Comprobador de contraste de color
Comprobador de contraste de color gratis: verifica si texto y fondo cumplen WCAG 2.2 AA y AAA, mira la relación de contraste y el color más cercano que cumple.
Este es un texto normal, del tamaño de un párrafo.
Texto grande
Botón| AA | AAA | |
|---|---|---|
| Texto normal | ||
| Texto grande (24 px, o 18,7 px en negrita) | ||
| Íconos y bordes de la interfaz | — |
Qué hace
Este comprobador mide el contraste entre un color de texto y su fondo con la fórmula de las pautas de accesibilidad WCAG 2.2, que se usa en muchas leyes de accesibilidad. Muestra la relación de contraste, de 1:1 (sin contraste) a 21:1 (negro sobre blanco), y si el par cumple los niveles AA y AAA para texto normal, texto grande y componentes de la interfaz, como íconos y bordes. Cuando un par no cumple, sugiere el color más cercano, con el mismo tono, que sí cumple.
Cómo usarla
- Escribe o elige el color del texto y el color de fondo.
- Lee la relación de contraste y los resultados AA y AAA, y revisa la vista previa en vivo.
- Si no cumple, presiona Usar en un color sugerido y luego copia el enlace para compartir el resultado.
Preguntas frecuentes
¿Qué relación de contraste necesito?
El nivel AA, el objetivo legal habitual, exige 4,5:1 para texto normal y 3:1 para texto grande y para íconos y bordes de la interfaz. El nivel AAA exige 7:1 para texto normal y 4,5:1 para texto grande.
¿Qué se considera texto grande?
Texto de al menos 24 píxeles CSS (18 puntos), o de al menos unos 18,7 píxeles CSS (14 puntos) si está en negrita. Los títulos suelen ser grandes; el texto de párrafo normalmente no lo es.
¿Por qué falla #777777 sobre blanco?
Su relación es de 4,47:1, justo por debajo del 4,5:1 exigido para texto normal. Las relaciones no se redondean hacia arriba, así que un gris un poco más oscuro como #767676 (4,54:1) es el gris más claro que cumple sobre blanco.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast