Comprobador de contraste de color
Comprueba si los colores de texto y fondo cumplen los requisitos de contraste WCAG y, si no, obtén el color accesible más cercano.
Ejemplo de texto grande
Ejemplo de texto normal, como la mayor parte de tu página.
Ratio de contraste
4.83:1
- WCAG AA, texto normal (4.5:1) Cumple
- WCAG AA, texto grande (3:1) Cumple
- WCAG AA, componentes e iconos (3:1) Cumple
- WCAG AAA, texto normal (7:1) No cumple
- WCAG AAA, texto grande (4.5:1) Cumple
Qué muestra el comprobador de contraste
Todo lo necesario para elegir colores legibles.
Relación de contraste
La relación WCAG exacta entre tus dos colores.
Resultados AA y AAA
Texto normal, texto grande y componentes de interfaz frente a los umbrales WCAG.
Vista previa en vivo
Ve tus colores en texto de ejemplo mientras los ajustas.
Sugerencia accesible
El tono más cercano de tu color de texto que cumple AA.
Cómo funciona
Elige dos colores
Usa el selector o introduce valores hex o RGB.
Lee el resultado
La relación y el aprobado o suspenso de cada nivel WCAG se actualizan al instante.
Aplica la solución
Usa el color sugerido si tu combinación no cumple.
El contraste es uno de muchos requisitos WCAG. Haz una auditoría de accesibilidad completa para revisar toda la página.
Preguntas
WCAG AA pide 4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz. AAA pide 7:1 y 4,5:1.
Al menos 24 px normal o unos 18,7 px en negrita (18 pt o 14 pt en negrita).
No, revisa una combinación de colores. La auditoría de accesibilidad revisa el contraste en una página en vivo.
Relacionado
Revisa la accesibilidad de toda tu página
Hallazgos vinculados a WCAG, incluido el contraste, en una auditoría gratuita de tu sitio en vivo.
Ejecutar auditoría gratis