Verificador de Colores Accesibles
Comprueba si los colores de tu texto y fondo son accesibles y obtén sugerencias de colores compatibles con WCAG que pasan AA o AAA cuando fallan.
Texto de ejemplo grande
El texto de ejemplo pequeño muestra qué tan legible es el cuerpo del texto con este contraste.
Sugerencias de colores accesibles
Ajustan la luminosidad del color del texto manteniendo su tono, hasta alcanzar tu objetivo.
Ninguna versión accesible de este color de texto pudo alcanzar el objetivo sobre este fondo. Prueba a cambiar el color de fondo o a elegir otro tono.
Haz que tu texto sea accesible con este verificador de colores accesibles gratuito. Introduce los colores del texto y del fondo, elige un nivel objetivo de WCAG y comprueba al instante si la combinación es accesible. Cuando no llega al mínimo, la herramienta sugiere colores de texto compatibles con WCAG que conservan tu tono original pero ajustan la luminosidad hasta pasar AA o AAA. Todo se ejecuta en tu navegador, así que nada se sube y no hay registro.
¿Qué es un verificador de colores accesibles?
Un verificador de colores accesibles comprueba si una combinación de color de texto y de fondo cumple los requisitos de contraste de las Pautas de Accesibilidad para el Contenido Web (WCAG), de modo que las personas con baja visión o daltonismo puedan leer tu contenido. A diferencia de un simple verificador de contraste, que solo informa si pasa o falla, esta herramienta va un paso más allá: cuando una combinación de colores no es accesible, genera automáticamente colores de texto corregidos que alcanzan tu objetivo manteniéndose lo más cerca posible de tu color original.
Cómo corregir colores inaccesibles
Define tus colores y el objetivo, y aplica uno de los colores accesibles sugeridos cuando la combinación falle.
- Introduce el color del texto, por ejemplo #7a7a7a, con el selector o el campo hex.
- Introduce el color de fondo, por ejemplo #ffffff.
- Elige el nivel WCAG que necesitas cumplir (AA o AAA, texto normal o grande).
- Si la combinación falla, revisa los colores de texto accesibles sugeridos y sus relaciones.
- Haz clic en Aplicar en una sugerencia para cargarla como tu nuevo color de texto.
Cómo funcionan las sugerencias de color
Cada sugerencia conserva el tono y la saturación de tu color de texto, pero desplaza su luminosidad en HSL —tanto más oscura como más clara— hasta que el contraste con tu fondo alcanza la relación objetivo. Esto produce colores accesibles que siguen encajando con tu marca o paleta, en lugar de sustituirlos por colores sin relación. La sugerencia con la relación más alta se muestra primero, para que elijas la opción más segura o la más parecida a tu original.
Objetivos AA y AAA de WCAG
El nivel AA de WCAG exige al menos 4,5:1 para texto normal y 3:1 para texto grande, mientras que el nivel más estricto AAA exige 7:1 para texto normal y 4,5:1 para texto grande. Texto grande significa alrededor de 18pt (24px) normal o 14pt (18,66px) en negrita y mayores. Usa el selector de objetivo para verificar y corregir exactamente el nivel que necesita tu proyecto.
¿Por qué usar este verificador de colores accesibles?
- Te dice al instante si una combinación de colores pasa el nivel WCAG que elijas.
- Sugiere colores de texto accesibles corregidos cuando la combinación falla.
- Conserva tu tono original para que las sugerencias sigan fieles a la marca.
- Admite objetivos AA y AAA para texto normal y grande.
- La vista previa en vivo muestra un texto de ejemplo real con tus colores.
- Se ejecuta por completo en tu navegador: gratis, sin anuncios y sin registro.
Preguntas frecuentes
¿En qué se diferencia de un verificador de contraste?
Un verificador de contraste solo mide la relación y te dice si pasa. Este verificador de colores accesibles también lo hace, pero cuando los colores fallan además genera colores de texto corregidos que alcanzan tu nivel objetivo, para que soluciones el problema con un clic en vez de adivinar valores nuevos a mano.
¿Cómo mantienen las sugerencias de colores accesibles la identidad de la marca?
Las sugerencias ajustan solo la luminosidad de tu color de texto en HSL, conservando su tono y su saturación. Eso significa que el color recomendado es una versión más clara o más oscura del que ya tenías, manteniendo el mismo carácter en lugar de reemplazarlo por un color sin relación.
¿Qué nivel de WCAG debo buscar?
El nivel AA (4,5:1 para texto normal, 3:1 para texto grande) es la base legal y de diseño más común y un buen valor por defecto. Apunta a AAA (7:1 normal, 4,5:1 grande) para interfaces con mucho texto o donde importa la máxima legibilidad.
¿Por qué a veces no se encuentra ningún color accesible?
Si tu fondo queda en mitad del rango de luminosidad, puede que ninguna versión del tono de tu texto sea lo bastante oscura o clara para alcanzar el objetivo sobre él. En ese caso, cambia el color de fondo o elige otro tono de texto, y la herramienta volverá a buscar.
¿Mis colores se suben a algún sitio?
No. Todos los cálculos de contraste y las sugerencias de color ocurren localmente en tu navegador. Nada sobre tus colores se envía a un servidor.