Comprobador de contraste de color
Comprueba cualquier combinación de color de texto y de fondo según WCAG 2.2 AA y AAA. Obtén la relación de contraste exacta, si cumple o no para texto normal, texto grande y componentes de interfaz, y un enlace para compartir. Gratis y privado: todo se ejecuta en tu navegador.
Combinaciones predefinidas
Vista previa en vivo
Texto de título grande (24 px negrita)
Texto normal a 16 px. El veloz murciélago hindú comía feliz cardillo y kiwi. Un buen contraste mantiene los párrafos legibles para personas con baja visión, daltonismo o que usan el móvil a pleno sol.
Letra pequeña a 14 px: la letra pequeña también debe cumplir el umbral del texto normal.
Cómo se calcula la relación de contraste
WCAG define el contraste a partir de la luminancia relativa, es decir, lo brillante que percibe el ojo humano un color en una escala de 0 (negro) a 1 (blanco). Para cada color, ContrastCheck:
- Separa el valor hexadecimal en los canales rojo, verde y azul, y divide cada uno entre 255.
- Linealiza cada canal: los valores ≤ 0,04045 se dividen entre 12,92; el resto se calcula con
((c + 0.055) / 1.055)^2.4. - Los pondera según la sensibilidad del ojo a cada uno:
L = 0.2126·R + 0.7152·G + 0.0722·B.
La relación de contraste es entonces (L_lighter + 0.05) / (L_darker + 0.05), que va de 1:1 para colores idénticos a 21:1 para negro sobre blanco. El resultado se compara con los umbrales sin redondear: 4,5:1 (AA) y 7:1 (AAA) para texto normal, 3:1 (AA) y 4,5:1 (AAA) para texto grande, y 3:1 para componentes de interfaz y gráficos.
¿No sabes qué nivel buscar? Lee Contraste WCAG AA vs AAA: ¿cuál deberías usar?
Preguntas frecuentes sobre el contraste de color
›¿Qué relación de contraste de color se considera buena?
El nivel AA de WCAG 2.2 exige al menos 4,5:1 para el texto normal y 3:1 para el texto grande. El nivel AAA sube esos valores a 7:1 para texto normal y 4,5:1 para texto grande. Las relaciones van de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
›¿Qué se considera texto grande en WCAG?
Se considera texto grande el de al menos 18 puntos (unos 24 px de CSS) con peso normal, o al menos 14 puntos (unos 18,66 px de CSS) en negrita. El texto grande tiene umbrales de contraste más bajos porque los caracteres más grandes se leen con más facilidad.
›¿En qué consiste el requisito de 3:1 para componentes de interfaz y gráficos?
El criterio de conformidad 1.4.11 de WCAG, Contraste no textual, exige una relación de 3:1 para los límites visuales de los controles interactivos (bordes de campos, indicadores de foco, estados de interruptores) y para los objetos gráficos necesarios para entender el contenido, como iconos y líneas de gráficos.
›¿Importa el orden del color de primer plano y el de fondo?
No. La fórmula de WCAG siempre divide la luminancia del color más claro entre la del más oscuro, así que intercambiar primer plano y fondo da la misma relación. La vista previa cambia, pero los números y los resultados no.
›¿Se suben mis datos a algún sitio?
No. Este comprobador de contraste funciona íntegramente en tu navegador. El único lugar donde se guardan tus colores es la URL de la página (?fg=…&bg=…), lo que te permite guardar en favoritos o compartir una combinación concreta.
›¿Por qué 4,49:1 no cumple si está tan cerca de 4,5:1?
Los umbrales de WCAG son mínimos estrictos y no se redondean. ContrastCheck compara la relación exacta y trunca el valor mostrado, de modo que una combinación que muestra 4,49:1 no cumple AA para texto normal. Usa el color sugerido para superar el umbral por poco.
›¿Este comprobador es compatible con APCA o WCAG 3?
Todavía no. ContrastCheck utiliza la relación de contraste de WCAG 2.x, que es la que citan hoy las leyes y normas de contratación vigentes (directrices de la ADA, Sección 508, EN 301 549 / Ley Europea de Accesibilidad).