Comprobador de contraste de colores (WCAG)

Cómo funciona

Escriba los colores del texto en el panel izquierdo, uno por línea; el formato se reconoce solo: #777777, rgb(119, 119, 119) y hsl(0, 0%, 47%) se leen igual. Indique el color de fondo en el campo de opciones; si lo deja vacío se asume blanco. El panel de resultados muestra para cada color la relación de contraste en un solo número, como 4,48:1, y dice si ese número supera los umbrales AA y AAA para el tamaño de texto elegido. Ejemplo: sobre fondo blanco, el gris #777777 da 4,48:1 y se queda a un paso del nivel AA en texto normal; oscurecido un punto a #767676 sube a 4,54:1 y aprueba. Los cuadros de color se pintan en vivo bajo la salida, así que puede ver el par a ojo antes de mirar la cifra. Para probar varios colores de marca contra el mismo fondo, escríbalos uno debajo de otro; la línea de estado cuenta cuántos aprueban.

Esta herramienta también se busca como comprobador de contraste, contraste de colores accesibilidad, contraste aa aaa, calcular contraste de colores.

¿Qué es Relación de contraste?

La relación de contraste reduce la diferencia de luminancia entre dos colores a un solo número, escrito siempre en la forma «X:1». Su valor mínimo es 1:1: los dos colores son idénticos y el texto resulta invisible sobre el fondo. Su valor máximo es 21:1, el del negro con el blanco. Lo cómodo de la medida es que ignora el orden de los colores: intercambie texto y fondo y encontrará el mismo número, porque el cálculo pone siempre el color claro en el numerador.

¿Qué es WCAG AA y AAA?

Las WCAG (Pautas de Accesibilidad para el Contenido Web) definen dos niveles de conformidad para la legibilidad. El nivel AA pide un contraste de 4,5:1 en texto normal y de 3:1 en texto grande; es la base a la que apuntan los organismos públicos y la mayoría de los productos profesionales. El nivel AAA sube el listón a 7:1 en texto normal y 4,5:1 en texto grande, y es difícil de mantener en una página entera. Los logotipos, los botones desactivados y el texto decorativo quedan fuera de la regla.

¿Qué es Luminancia relativa?

La luminancia relativa dice cuánta luz envía un color desde la pantalla hasta su ojo, en una escala de 0 (negro) a 1 (blanco). El cálculo tiene dos pasos: primero cada canal se linealiza, es decir, se anula la curva gamma de la pantalla; después los canales se suman con los pesos 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. Esos pesos reflejan la sensibilidad del ojo, altísima al verde y casi nula al azul — por eso aclarar el azul casi nunca mejora un contraste.

¿Qué diferencia hay entre AA y AAA?

Los dos niveles usan la misma relación de contraste; lo único que cambia es la nota de corte: en texto normal, AA pide 4,5:1 y AAA pide 7:1. La distancia es mayor de lo que parece — sobre fondo blanco, el gris más claro que aprueba AA es #767676, mientras que el más claro que aprueba AAA es #595959: hay que oscurecer el texto corriente de forma notable. En la práctica, AA se fija como objetivo para toda la página; AAA se reserva para pantallas de lectura larga, usadas al aire libre o dirigidas a un público mayor.

¿Por qué un gris que a su ojo se ve legible suspende la prueba?

La relación de contraste se calcula a partir de la luminancia de los dos colores en pantalla; pero esa luminancia no es la lectura directa de los números del código HEX. Los canales primero se linealizan, y después el verde recibe tres veces más peso que el rojo y diez veces más que el azul — porque el ojo ve mucho el verde y muy poco el azul.

La consecuencia práctica: dos colores que a la vista parecen igual de oscuros no dan la misma relación. Sobre fondo blanco, el azul puro #0000FF sale a 8,59:1, mientras que el verde oscuro #008000 se queda en 5,14:1. Por eso la decisión se toma con el número y no con el ojo; el brillo de su pantalla, además, distorsiona su juicio.

¿Qué umbral conviene fijarse?

AA es el nivel base que se espera en la mayoría de los servicios abiertos al público; AAA es realmente exigente y normalmente no se aplica a todo el texto corriente.

• Texto corriente, etiqueta de formulario, mensaje de error → como mínimo AA de texto normal (4,5:1)
• Título grande (18 pt o 14 pt en negrita) → con 3:1 basta
• Público mayor o pantalla que se lee al aire libre → apunte a AAA (7:1)
• Texto de ayuda en gris pálido → donde más se suspende; que no baje de 4,5:1

Preguntas frecuentes

¿Cómo se calcula la relación de contraste?

Se halla por separado la luminancia relativa de cada color y se toma la relación (claro + 0,05) / (oscuro + 0,05). El resultado va de 1:1 como mínimo (dos colores idénticos) a 21:1 como máximo (negro sobre blanco).

¿Cuántos puntos son exactamente el texto grande?

Las WCAG definen el texto grande desde 18 puntos, o desde 14 puntos si va en negrita. En la web equivale aproximadamente a 24 píxeles en grosor normal y 18,66 píxeles en negrita.

¿Importa el orden de los colores? Si intercambio texto y fondo, ¿cambia el resultado?

No. La fórmula mira primero cuál de los dos colores es más claro, así que intercambiar el texto y el fondo no cambia la relación. Lo único que cambia es su impresión de cuál se lee mejor.

¿Los colores se envían a alguna parte?

No. El cálculo se hace por completo dentro de su navegador; los códigos de color que escribe no van a ningún servidor ni a terceros.