WCAG Contrast Checker
Understand WCAG Contrast Checker
Calcula la relación de contraste entre un color de texto y un color de fondo e informa de si cumple los niveles AA y AAA de WCAG.
How it works
Cada color se convierte primero en luminancia relativa. Los tres canales se normalizan a 0–1 y se linealizan — divididos entre 12,92 por debajo del umbral 0,03928 y, en caso contrario, elevados mediante ((c + 0,055) / 1,055)^2,4 — y después se ponderan 0,2126 el rojo, 0,7152 el verde y 0,0722 el azul, porque el ojo es mucho más sensible al verde que al azul. La relación es (L_más_claro + 0,05) / (L_más_oscuro + 0,05), que va de 1:1 para colores idénticos hasta 21:1 para negro sobre blanco. El término 0,05 representa el reflejo ambiental de la pantalla y es lo que impide que la fórmula divida entre cero con el negro puro.
When to use it
- Comprobar el texto de cuerpo contra su fondo antes de fijar un color de un sistema de diseño
- Encontrar el gris más oscuro que todavía aprueba sobre blanco: #767676 está en torno a 4,54:1, y un tono más claro ya no cumple el nivel AA
- Auditar el texto de marcador de posición, los estados deshabilitados y el texto de ayuda, que es donde suelen esconderse los fallos de contraste
- Aportar pruebas para una auditoría de accesibilidad conforme a WCAG 2.1, EN 301 549 o la Sección 508
Watch out for
- El umbral depende del texto, no del color. El nivel AA exige 4,5:1 para el texto de cuerpo pero solo 3:1 para el texto grande: 18 pt (24 px), o 14 pt (18,66 px) en negrita. La herramienta informa de ambos; usted elige cuál se aplica.
- Los elementos que no son texto tienen su propia regla. Los iconos, los anillos de foco, los bordes de los campos y los segmentos de un gráfico necesitan 3:1 según el criterio 1.4.11 de WCAG, algo fácil de pasar por alto cuando solo se comprueban los párrafos.
- Los colores semitransparentes no pueden medirse directamente. Un color con alfa debe componerse primero sobre lo que tiene realmente detrás, y el resultado depende de ese fondo.
- El texto sobre una fotografía o un degradado no tiene una única relación. Pruebe la región peor, o añada una capa sólida detrás del texto.
Not the right tool for: Demostrar que una paleta es utilizable por personas con deficiencia en la visión del color. La relación de contraste es una medida de luminancia: dos colores pueden aprobar con 7:1 y seguir siendo indistinguibles para una persona con deuteranopia, así que nunca codifique el significado solo mediante el tono.
Frequently Asked Questions
¿Cómo se comprueba el contraste de color para accesibilidad?
Introduzca el color de primer plano (texto) y el de fondo en HEX o RGB. La herramienta calcula la relación de contraste con la fórmula de luminancia relativa de WCAG 2.1 y muestra si se supera el nivel AA (4,5:1 para texto normal) y el AAA (7:1). Ajuste los colores hasta aprobar.
¿Por qué es importante el contraste de color para la accesibilidad?
Un contraste bajo dificulta la lectura a las personas con baja visión, con daltonismo o en entornos muy iluminados. Alrededor del 8 % de los hombres tienen alguna forma de deficiencia en la visión del color. Los requisitos de contraste de WCAG garantizan que el contenido sea legible en ese amplio rango de capacidades y condiciones visuales.
¿Cuál es la relación de contraste mínima para el nivel AA de WCAG?
WCAG 2.1 AA exige 4,5:1 para texto normal (menos de 18 pt, o 14 pt en negrita) y 3:1 para texto grande (18 pt o más, o 14 pt o más en negrita). Los componentes de interfaz que no son texto (iconos, bordes de campos) necesitan 3:1. El nivel AAA eleva esas cifras a 7:1 y 4,5:1. La mayoría de las normativas legales de accesibilidad exigen el nivel AA.
How to Use WCAG Contrast Checker
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.