Cómo usarla
- Introduce el color del texto (primer plano) y el color de fondo en HEX, rgb(), hsl() u otro formato CSS, o usa los selectores de color.
- Consulta la relación de contraste y el resultado de cumplimiento de cada requisito de WCAG.
- Si no se cumple un requisito, elige un objetivo y aplica el color sugerido, que conserva el tono y solo cambia la luminosidad.
- Usa «Intercambiar» para comprobar la combinación inversa; por ejemplo, texto claro sobre un botón oscuro.
Cómo funciona
La proporción sigue la definición de WCAG 2.2: la luminancia relativa de cada color se calcula a partir de sus canales sRGB, y la proporción es (más claro + 0.05) ÷ (más oscuro + 0.05). Va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
Requisitos comprobados: el criterio de éxito 1.4.3 (AA) exige 4.5:1 para texto normal y 3:1 para texto grande; el 1.4.6 (AAA) exige 7:1 y 4.5:1; el 1.4.11 exige 3:1 para elementos de la interfaz y gráficos significativos, como bordes de campos e iconos. El texto grande es de al menos 24px en peso normal o unos 18.66px en negrita. WCAG no permite redondear hacia arriba, así que 4.49:1 no cumple AA aunque esté cerca; la proporción que se muestra aquí se trunca, no se redondea.
La sugerencia mantiene el tono y la cromaticidad del color del texto en OKLCH y busca la luminosidad más cercana, más oscura o más clara, que cumple el objetivo. La proporción de contraste es solo un aspecto de la legibilidad: también influyen el grosor y el tamaño de la fuente, así como las diferencias en la percepción del color. WCAG 2.2 es la recomendación actual del W3C a la que remiten la mayoría de las leyes de accesibilidad.
Ejemplos
Texto gris que casi cumple
El gris #777777 sobre blanco da 4.48:1. Cumple para texto grande y componentes de interfaz, pero no cumple AA para texto normal. El gris más cercano que sí cumple es aproximadamente #767676, que alcanza 4.54:1.
Texto blanco en un botón de marca
El blanco sobre #ff8800 da aproximadamente 2.4:1, por lo que ni siquiera cumple el nivel 3:1 para texto grande. Las soluciones habituales son oscurecer el naranja o usar texto oscuro; la sugerencia muestra cuánto habría que oscurecer el color del texto.
Comprobar el borde de un campo de formulario
Un borde gris claro #cccccc sobre blanco da aproximadamente 1.6:1. Según el criterio 1.4.11, el borde que identifica un campo de entrada necesita 3:1, por lo que se requiere un color cercano a #949494 o más oscuro.
Preguntas frecuentes
¿Qué proporción de contraste necesito para WCAG AA?
4.5:1 para texto normal, 3:1 para texto grande (24px o 18.66px en negrita) y 3:1 para componentes de interfaz y gráficos significativos. AAA eleva los requisitos del texto a 7:1 y los del texto grande a 4.5:1.
¿El texto de un logotipo o de un botón deshabilitado debe cumplir?
No. WCAG exime el texto de logotipos y nombres de marca, el texto puramente decorativo y el texto de componentes de interfaz inactivos (deshabilitados).
¿Por qué mi resultado difiere ligeramente del de otro comprobador?
Algunas herramientas redondean la proporción a un decimal o hacia arriba. WCAG compara el valor exacto, por lo que esta herramienta trunca a dos decimales. También pueden producirse pequeñas diferencias con colores introducidos con alfa.
¿Qué ocurre con el nuevo método de contraste APCA?
APCA es un método diferente propuesto para una futura versión de WCAG. No forma parte de WCAG 2.2, que es lo que mide esta herramienta y a lo que hacen referencia las normas de accesibilidad actuales.
Privacidad
Los colores se comprueban en tu navegador. No se sube ni se almacena nada.