Comprobador de contraste de color
Escribe un color de texto y otro de fondo — obtienes la relación de contraste y una muestra en vivo.
Cómo usarlo
Los colores se escriben de cualquier forma habitual: #1a1a1a, rgb(20, 20, 20) o un nombre como teal. El botón de intercambio los invierte, útil para comprobar el tema claro y el oscuro. Abajo verás si la pareja cumple AA y AAA.
AA es el nivel que piden las leyes de accesibilidad y la mayoría de estándares corporativos: al menos 4,5 para texto normal y 3 para texto grande. Grande significa 24px, o 19px en negrita — el umbral es más suave porque las letras gruesas se leen mejor.
Preguntas frecuentes
¿Qué significa la relación de contraste?
Es la proporción entre la luminancia del color claro y la del oscuro. El mínimo es 1 (colores idénticos) y el máximo 21 (negro sobre blanco). Sigue la fórmula de WCAG, que tiene en cuenta que el ojo percibe el brillo de forma no lineal.
¿En qué se diferencian AA y AAA?
AA es el mínimo práctico que exigen la legislación y casi todos los estándares: 4,5 para texto normal. AAA es más estricto, 7, y se aplica sobre todo al texto corrido en productos donde la accesibilidad es prioritaria.
¿Qué cuenta como texto grande?
24px en peso normal, o 18,66px en negrita. Esos tamaños tienen umbrales menores: 3 para AA y 4,5 para AAA.
¿Debo comprobar también iconos y bordes?
Sí — WCAG pide al menos 3 para elementos de interfaz y gráficos. Introduce el color del icono y el del fondo igual que con el texto y mira la fila de texto grande.