Cómo usar Comprobador de contraste
- 1
Introduce dos colores
Escribe el color del texto y el color de fondo en HEX, rgb(), hsl() u oklch(), o abre la muestra redonda para elegir uno.
- 2
Lee el veredicto
La relación y cinco filas de cumple o no cumple muestran AA y AAA para texto normal y grande, y la regla de 3:1 para iconos y bordes.
- 3
Aplica una corrección
Si un nivel no cumple, usa el texto o el fondo más oscuro o más claro más cercano que sí cumpla y copia el nuevo valor.
Límites y Pro
Gratis e ilimitado: cualquier número de comprobaciones, 5 criterios WCAG 2.2 por pareja, 2 correcciones sugeridas por nivel que no cumple y una cuadrícula de hasta 7 colores.
Acerca de Comprobador de contraste
Este comprobador de contraste mide cuánto se diferencian dos colores en luminosidad con la fórmula de luminancia relativa de WCAG 2.2, el mismo cálculo que usan las auditorías de accesibilidad de los navegadores y los plugins de diseño. El resultado es una relación entre 1:1 (idénticos) y 21:1 (negro sobre blanco). El criterio de éxito 1.4.3 pide 4,5:1 para el texto de cuerpo y 3:1 para el texto grande en el nivel AA; el 1.4.6 lo eleva a 7:1 y 4,5:1 para AAA; el 1.4.11 pide 3:1 para los elementos significativos que no son texto, como los anillos de foco, los contornos de campos y las líneas de gráficos.
Una muestra en directo presenta ambos tamaños de texto, un botón con contorno y un icono con tus colores, para que puedas juzgar la legibilidad además del número. Las relaciones se truncan a dos decimales en lugar de redondearse, porque una pareja con 4,496:1 no cumple un requisito de 4,5:1. Cuando un nivel no cumple, el comprobador explora la luminosidad OKLCH de uno de los colores manteniendo su tono y su croma, y propone el valor más cercano que cumple, por separado para el texto y para el fondo.
El comprobador es para colores sólidos. No puede evaluar texto sobre fotos o degradados, transparencias, el renderizado del grosor de la fuente en una pantalla concreta ni el método APCA, más reciente, propuesto para WCAG 3, así que considera un resultado favorable como el mínimo y prueba también en pantallas reales.
Privacidad
Ambos colores permanecen en esta pestaña: la relación, las comprobaciones de cumple y no cumple y las correcciones sugeridas las calcula tu navegador, y no se envía ni se guarda ningún valor de color en un servidor.