Verificador de Contraste de Color

Acerca de Verificador de Contraste de Color

Este comprobador calcula la relación de contraste entre dos colores con la fórmula de WCAG 2.x tal como la define la norma, y muestra si se cumple AA y AAA para texto normal, texto grande y componentes de interfaz. El resultado es un número entre 1:1 (colores idénticos) y 21:1 (negro sobre blanco).

Si la combinación no pasa, la herramienta mantiene fijos el tono y la saturación del color de primer plano y recorre solo la luminosidad HSL de 0 a 100, proponiendo el color que aprueba con el menor cambio posible. Sirve para comprobar si un color de marca se puede salvar oscureciéndolo un poco antes de descartarlo.

Cómo se calcula la relación

Cada canal de 8 bits se divide entre 255 para obtener c, que luego se linealiza: c/12,92 si c está por debajo del umbral, y ((c + 0,055)/1,055)^2,4 en caso contrario. Así se deshace la curva gamma de sRGB y los valores reflejan cantidad de luz real.

La luminancia relativa es L = 0,2126 R + 0,7152 G + 0,0722 B. El verde pesa casi diez veces más que el azul porque la sensibilidad del ojo a la luminancia es máxima en la zona verde del espectro. La relación es (L clara + 0,05) / (L oscura + 0,05). El 0,05 representa el reflejo ambiental de una pantalla real, y por eso la escala termina en 21 en lugar de dispararse con el negro puro.

Versiones antiguas de WCAG daban 0,03928 como umbral; en 2021 se corrigió a 0,04045, el valor del estándar sRGB. El W3C aclara que el cambio no tiene efecto práctico, y el código de esta herramienta sigue usando 0,03928.

De dónde salen 4,5, 3 y 7

Según el documento explicativo del W3C, 3:1 es el mínimo que recomienda ISO 9241-3 para personas con visión normal. Una persona con agudeza 20/40 (unos 0,5 en la escala decimal que usan los ópticos en España y Latinoamérica) pierde sensibilidad al contraste en un factor de aproximadamente 1,5, así que 3 × 1,5 = 4,5 se convirtió en el umbral AA. El nivel AAA de 7:1 está pensado para una visión de alrededor de 20/80.

Texto grande significa al menos 18 puntos, o 14 puntos en negrita: unos 24 px normales o 18,5 px en negrita en CSS (1 pt = 1,333 px). Una etiqueta de 16 px en negrita no es texto grande, un error que aparece constantemente en auditorías. El texto grande necesita 3:1 para AA y 4,5:1 para AAA.

El 3:1 para componentes de interfaz viene del criterio 1.4.11 Contraste no textual, añadido en WCAG 2.1. Se aplica a lo que hace falta ver para reconocer un control y su estado: bordes de campos, contornos de casillas, indicadores de foco, iconos con significado. Los controles desactivados, los logotipos y la decoración están exentos.

Cuándo la fórmula se equivoca

La relación de WCAG 2 es simétrica: texto gris sobre blanco y texto blanco sobre ese mismo gris obtienen la misma puntuación, aunque el texto claro sobre fondo oscuro de los temas oscuros se percibe de forma distinta. También suele suspender combinaciones perfectamente legibles, como blanco sobre naranja saturado, y aprobar pares oscuros que en la práctica se ven apagados.

De esas críticas nació APCA (Accessible Perceptual Contrast Algorithm), que tiene en cuenta tamaño, grosor y polaridad del texto. APCA figuró en borradores tempranos de WCAG 3, pero se retiró del borrador de trabajo de julio de 2023, y el borrador actual indica que el método de contraste está por decidir. Las leyes y los pliegos de contratación siguen remitiendo a WCAG 2.x, así que esta herramienta muestra solo la relación de WCAG 2. Las puntuaciones APCA de otras herramientas sirven como ayuda de diseño, no como prueba de cumplimiento.

Lo que el contraste no resuelve: el daltonismo

La deficiencia de visión rojo-verde afecta aproximadamente al 8 % de los hombres y al 0,5 % de las mujeres de ascendencia del norte de Europa, con tasas menores (en torno al 4-7 % de los hombres) en poblaciones de Asia oriental. La relación de contraste solo mide diferencia de luminosidad, así que un rojo y un verde de luminancia parecida pueden aprobar contra el fondo y aun así ser indistinguibles entre sí para estas personas. Por eso existe el criterio 1.4.1: acompaña el color con un icono, un texto o un patrón.

Ejemplos

Cómo se usa

1. Introduce el color del texto y el del fondo en HEX o rgb(), o elígelos con el selector.
2. Revisa la relación y los cinco resultados.
3. Si no aprueba, usa el color sugerido o la barra de rangos de luminosidad para encontrar el tono más cercano que pase.

Preguntas frecuentes

Guías relacionadas

• Contraste de color y accesibilidad: el origen de la fórmula WCAG, sus límites y la ley