¿Por qué algunos colores se leen mal?
El ojo distingue las letras por la diferencia entre claro y oscuro. Si dos colores tienen una luminosidad parecida, el texto se pierde en el fondo aunque sean colores muy distintos.
El texto amarillo sobre blanco se lee muy mal. El azul oscuro sobre blanco se lee con claridad.
Datos de ejemplo
Cuando el texto y el fondo son lo bastante distintos, todos, desde los más pequeños hasta los abuelos, leen con más facilidad.
Pulsa “Pruébalo” para llevar el ejemplo a la vista previa. Puedes deshacerlo.
Prueba texto pequeño y grande
Con el mismo par de colores, el texto grande o en negrita se lee mejor. La relación de contraste no cambia al cambiar el tamaño; solo cambia el nivel exigido.
Texto grande es el de 24 px o más, o de 18,67 px o más en negrita. El texto grande necesita 3:1; el texto normal, 4,5:1.
Datos de ejemplo
Cuando el texto y el fondo son lo bastante distintos, todos, desde los más pequeños hasta los abuelos, leen con más facilidad.
Pulsa “Pruébalo” para llevar el ejemplo a la vista previa. Puedes deshacerlo.
Prueba botones e iconos
Un botón tiene dos partes que deben verse bien: el texto del botón y el borde o icono que permite reconocerlo.
El texto del botón se evalúa como texto normal o grande. El borde y los iconos necesitan 3:1 frente al color de al lado. Las formas solo decorativas no lo requieren.
Datos de ejemplo
Ver más
Pulsa “Pruébalo” para llevar el ejemplo a la vista previa. Puedes deshacerlo.
Entiende el resultado
«Se lee bien» significa que el par cumple AA para texto normal (desde 4,5:1). «Solo para texto grande» significa que solo cumple AA para texto grande (desde 3:1). «Se lee mal» es menos de 3:1.
WCAG 2.2 son las pautas de accesibilidad web del W3C. AA es el nivel habitual; AAA es un nivel más exigente.
La relación mostrada se trunca a 2 decimales; el resultado usa el valor sin redondear.
Fórmula y cálculo
Cada canal sRGB se normaliza a 0–1 y se linealiza: c/12,92 si c ≤ 0,04045; si no, ((c + 0,055)/1,055)^2,4. Luminancia L = 0,2126 R + 0,7152 G + 0,0722 B. Relación = (L clara + 0,05) / (L oscura + 0,05).
Con el par actual: luminancia del texto 0,0215, del fondo 1,0000 → relación 14,67:1.
¿Qué comprueba esta herramienta?
Mide el contraste entre dos colores opacos en pantalla. Ayuda a elegir colores; no es una certificación.
- Solo comprueba pares de colores; no certifica que un sitio web o un diseño completo cumpla WCAG.
- Solo admite colores sRGB opacos en HEX de 3 o 6 caracteres; aún no admite transparencia, degradados ni imágenes de fondo.
- El resultado es contraste numérico en pantalla; no garantiza el color impreso ni el material.
- No usa APCA para concluir AA/AAA y no simula alteraciones de la visión.
- Las muestras son ilustrativas; no representan todos los dispositivos ni a todos los lectores.
Fuentes
La fórmula y los umbrales proceden de los documentos oficiales del W3C: