Comprobador de contraste de color WCAG

Requisitos de contraste de WCAG

Las Pautas de Accesibilidad para el Contenido Web fijan relaciones de contraste mínimas para que el texto siga siendo legible para personas con baja visión, deficiencias en la visión del color o un teléfono a pleno sol. Las relaciones van de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).

AA, texto normal

Al menos 4.5:1 (criterio de conformidad 1.4.3). El nivel que exigen la mayoría de las leyes y políticas de accesibilidad, incluidas la Ley Europea de Accesibilidad y las directrices de la ADA en EE. UU.

AA, texto grande

Al menos 3:1. Grande significa 24 px (18 pt) o más, o 18.66 px (14 pt) o más en negrita.

AAA, texto normal

Al menos 7:1 (criterio de conformidad 1.4.6). El nivel mejorado, recomendable para textos largos de lectura.

AAA, texto grande

Al menos 4.5:1.

Contraste de elementos no textuales

Al menos 3:1 (criterio de conformidad 1.4.11) para iconos, bordes de campos, indicadores de foco, líneas de gráficos y las partes de un control que necesitas ver para usarlo.

Cómo se calcula la relación de contraste

Cada color se convierte a su luminancia relativa: los canales sRGB se linealizan (deshaciendo la curva gamma) y se ponderan con 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul, porque el ojo es mucho más sensible al verde. La relación es entonces (L1 + 0.05) / (L2 + 0.05), con L1 el color más claro. Por ejemplo, #777777 sobre blanco da 4.48:1, justo por debajo de AA, mientras que #767676 llega a 4.54:1 y pasa.

Una relación nunca se redondea hacia arriba hasta un umbral: WCAG deja claro que 4.49:1 no cumple 4.5:1. Los colores translúcidos se mezclan primero como los dibuja el navegador: el primer plano sobre el fondo y un fondo translúcido sobre blanco.

Corregir un color que no pasa

Las sugerencias mantienen el tono y la saturación de tu color de texto y solo cambian su luminosidad en OKLCH, el espacio de color perceptual que CSS ya admite, oscureciendo y aclarando paso a paso hasta que la relación pasa y eligiendo la opción más cercana a tu original. El resultado suele ser el mismo color de marca, un poco más profundo o más claro, y no un salto al negro. Si ningún matiz de ese tono puede alcanzar el objetivo sobre tu fondo, la herramienta lo indica, y lo que hay que cambiar es el fondo.

Para explorar otras variantes por tu cuenta, abre el color en el conversor de colores y recorre sus tintes y sombras, o saca colores candidatos de una foto con el generador de paletas de colores.

Errores de contraste habituales

• Texto de marcador de posición y texto con aspecto desactivado. El texto gris claro de un placeholder sigue siendo texto y debe cumplir 4.5:1 si los usuarios lo necesitan. Los controles realmente desactivados están exentos, pero lo que solo parece desactivado no.
• Texto sobre imágenes y degradados. Comprueba la parte más clara de la imagen detrás del texto, no la media. Una capa oscura o un panel sólido detrás del texto es la solución fiable.
• Colores de marca usados para texto. Un naranja o turquesa vivo puede parecer potente y aun así no pasar sobre blanco. Usa la sugerencia para encontrar una variante más profunda del mismo tono para el texto y reserva la brillante para titulares grandes o decoración.
• Indicadores de foco y bordes de campos. Un borde gris claro de 1 px alrededor de un campo de texto a menudo no cumple la regla de 3:1 para elementos no textuales, y el campo resulta difícil de encontrar para personas con baja visión.
• Modo oscuro. Que una pareja pase en el tema claro no dice nada del oscuro. Comprueba ambos temas y usa el botón de intercambio para echar un vistazo rápido a la pareja invertida.

APCA y WCAG 3

Debajo de los resultados de WCAG 2 también verás un valor de contraste de luminosidad APCA, escrito Lc. APCA es el método de contraste propuesto para el futuro WCAG 3. Tiene en cuenta el grosor de la fuente y el hecho de que el texto claro sobre fondo oscuro necesita un contraste distinto que el texto oscuro sobre claro, algo que la fórmula de WCAG 2 ignora; por eso también cambia de signo al intercambiar los colores. Como guía aproximada, Lc 75 sirve para el texto principal, Lc 60 para otro texto legible y Lc 45 para titulares grandes. WCAG 3 sigue siendo un borrador, así que trata APCA como información adicional: WCAG 2.x sigue siendo el estándar al que remiten auditorías y leyes.