Verificador de Contraste de Color
Comprueba si los colores de tu texto y fondo cumplen los estándares de accesibilidad WCAG.
Texto de Muestra Grande
Este es texto normal usado para previsualizar la legibilidad a un tamaño más pequeño.
Ratio de Contraste
El texto difícil de leer no es cuestión de gusto: es un fallo de accesibilidad medible, y uno de los más comunes en la web. El texto gris claro sobre fondo blanco se ve limpio para un diseñador con un buen monitor en una sala tenue, y es genuinamente ilegible para alguien con baja visión, en una pantalla barata, o a plena luz del sol. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen exactamente cuánto contraste necesita el texto, como una ratio numérica, así que esto deja de ser subjetivo. Esta herramienta mide el contraste entre dos colores cualesquiera y te dice si cumple esos estándares.
Cómo funciona el verificador
Introduce un color de texto y un color de fondo, y la herramienta calcula la ratio de contraste entre ellos usando la fórmula de WCAG, luego te dice qué niveles de accesibilidad pasa o falla la pareja. Tiene en cuenta que el texto más grande necesita menos contraste que el pequeño, así que reporta resultados para ambos. El cálculo se basa en la luminancia relativa de los colores, que es cómo el estándar modela la percepción humana del brillo en lugar de los valores de color en bruto.
Los umbrales de WCAG
Ratio de contraste = (L_claro + 0,05) ÷ (L_oscuro + 0,05)
L = luminancia relativa, de 0 (negro) a 1 (blanco)
Requisitos WCAG:
Texto normal AA: 4,5:1 AAA: 7:1
Texto grande AA: 3:1 AAA: 4,5:1
UI / gráficos AA: 3:1
Las ratios van de 1:1 (idéntico) a 21:1 (negro sobre blanco)La ratio se construye sobre la luminancia relativa, no sobre los valores de color en sí, por lo que dos colores que le parecen igual de distintos a un diseñador pueden tener un contraste muy diferente. La luminancia pondera el verde mucho más que el azul, porque el ojo humano es más sensible al verde, así que el texto amarillo se lee como brillante y el azul oscuro como tenue, incluso a saturación similar. Por eso también el «texto grande» recibe un requisito menor: las formas de letra más grandes son más fáciles de resolver, así que 3:1 basta donde el texto pequeño necesita 4,5:1. La escala llega hasta 21:1, negro puro sobre blanco puro.
Lo que conviene saber sobre el contraste de color
- 1Apunta a AA como mínimo: 4,5:1 para texto normal, 3:1 para grande. Este es el nivel al que hacen referencia la mayoría de las leyes y estándares de accesibilidad, y es un suelo genuino, no una aspiración. AAA (7:1) es más estricto y merece la pena alcanzarlo para el texto de cuerpo donde puedas, pero superar AA es la base que mantiene tu texto legible para la gran población con visión o pantallas menos que perfectas.
- 2El texto grande recibe un listón menor porque el tamaño ayuda a la legibilidad. El texto cuenta como «grande» a unos 18pt, o 14pt en negrita, y solo necesita 3:1 en lugar de 4,5:1. Por eso un titular grande puede usar un color que fallaría como texto de cuerpo. Pero no uses la concesión del texto grande para justificar texto pequeño de bajo contraste: los dos umbrales existen por una razón perceptiva real.
- 3Bello y accesible no están en conflicto, pero debes comprobar ambos. Las paletas armoniosas a menudo emparejan colores de luminosidad similar, lo que se ve elegante y puede fallar el contraste gravemente. Una paleta puede ser genuinamente atractiva y aun así dejar el texto ilegible, así que el contraste es una comprobación aparte de la estética: verifica la ratio en lugar de confiar en que una combinación bonita también sea legible.
- 4No olvides los elementos no textuales: iconos, botones y bordes de formularios necesitan 3:1. Los requisitos de contraste de WCAG se extienden más allá del texto a la propia interfaz, porque un control que nadie puede ver es tan inaccesible como texto que nadie puede leer. Un icono tenue o un borde de campo apenas visible fallan a usuarios reales, así que somete los elementos de UI también al mínimo de 3:1.
- 5Prueba en condiciones reales, no solo en un estudio de diseño tenue. Un contraste que parece adecuado en un monitor calibrado con poca luz puede volverse ilegible en un teléfono a plena luz o una pantalla de baja calidad. La ratio de WCAG existe precisamente para garantizar la legibilidad en esas condiciones del mundo real, así que cumplir el estándar numérico es más fiable que confiar en cómo se ve una combinación en tu propia pantalla.
Preguntas frecuentes
¿Qué ratio de contraste necesito para texto accesible?
Como mínimo, WCAG AA: 4,5:1 para texto normal y 3:1 para texto grande (unos 18pt, o 14pt en negrita). Este es el nivel al que hacen referencia la mayoría de las leyes de accesibilidad y es la base práctica para texto legible. El nivel más estricto AAA pide 7:1 en texto normal y 4,5:1 en grande, que merece la pena alcanzar para el texto de cuerpo donde sea posible. Por debajo de los umbrales AA, tu texto se vuelve genuinamente difícil de leer para una parte significativa de tu audiencia.
¿Por qué el texto gris claro sobre blanco falla aunque yo puedo leerlo?
Porque probablemente lo estás viendo en condiciones ideales: un buen monitor, con iluminación cómoda, con visión normal. La ratio de WCAG existe para garantizar la legibilidad en condiciones mucho más difíciles: baja visión, pantallas baratas o con reflejos, luz solar intensa y ojos que envejecen. El gris claro sobre blanco es un fallo clásico precisamente porque le parece bien al diseñador y es ilegible para un gran grupo de usuarios reales. El estándar numérico protege a las personas que no puedes ver probando tu sitio.
¿Por qué los tamaños de texto más grandes tienen un requisito de contraste menor?
Porque las formas de letra más grandes son inherentemente más fáciles de resolver, así que siguen siendo legibles a un contraste menor del que necesita el texto pequeño. WCAG fija 3:1 para texto grande (unos 18pt o 14pt en negrita) frente a 4,5:1 para texto normal por esta razón. Refleja un hecho perceptivo real, no un resquicio, y por eso no deberías estirar la concesión del texto grande para justificar texto de cuerpo de bajo contraste, donde el requisito mayor se aplica genuinamente.
¿El contraste aplica a botones e iconos, no solo al texto?
Sí. WCAG exige una ratio de contraste de 3:1 para elementos no textuales como iconos, límites de botones, bordes de campos de formulario y otros controles gráficos significativos, porque un elemento de interfaz que nadie puede percibir es tan inaccesible como texto ilegible. Un icono tenue o un contorno de campo casi invisible falla a usuarios reales igual que el texto de bajo contraste, así que la misma disciplina de comprobar la ratio aplica a la interfaz visual, no solo a las palabras.
¿Cómo se calcula realmente la ratio de contraste?
Compara la luminancia relativa de los dos colores —una medida del brillo percibido que pondera el verde más pesadamente, porque el ojo humano es más sensible al verde—. La ratio es la luminancia más clara más 0,05 dividida entre la luminancia más oscura más 0,05, produciendo un valor de 1:1 para colores idénticos hasta 21:1 para negro puro sobre blanco puro. Como se basa en la luminancia en lugar de los valores de color en bruto, dos colores que se ven muy distintos pueden aun así tener poco contraste, y por eso medirlo importa.