Comprobador de contraste de color
La relación se calcula en esta pestaña. No se sube nada.
Contraste
El texto normal se ve así a 16px.
Texto grande a 24px
5.79:1
Contraste WCAG 2: AA 4.5:1 para texto normal y 3:1 para texto grande; AAA 7:1 y 4.5:1; no textual 3:1.
Cómo usar esta herramienta
Comprueba un par de texto y fondo según WCAG 2 AA y AAA. No se sube nada.
Abre Comprobador de contraste
Hay un par de ejemplo rosa sobre crema. La relación y las filas de cumple/no cumple están a la derecha bajo una muestra de texto.
Introduce tus colores
Escribe un código hex o usa el selector de color para texto y fondo. Intercambiar invierte los dos.
Arregla un par que no cumple
Cuando el texto normal no cumple AA, se sugiere bajo la tabla el color de texto más cercano que cumple. Copiar deja la relación y los resultados en el portapapeles.
Preguntas frecuentes
¿Qué significa la relación de contraste?
Compara la luminancia relativa del color del texto y del fondo en una escala de 1:1 (mismo color) a 21:1 (negro sobre blanco), tal como la define WCAG 2.
¿Se sube algo?
No. La relación se calcula en esta pestaña.
¿Qué relación necesito?
WCAG AA pide 4.5:1 para texto normal y 3:1 para texto grande; AAA pide 7:1 y 4.5:1. Iconos, bordes y controles de formulario necesitan 3:1 (contraste no textual).
¿Qué cuenta como texto grande?
Al menos 18pt (24px) en regular, o 14pt (unos 18,7px) en negrita.
¿Cómo funciona la sugerencia?
Cuando el par no cumple AA para texto normal, el color del texto se acerca paso a paso al negro o al blanco, el que ayude, hasta alcanzar 4.5:1. El tono se mantiene lo más parecido posible.