Comprobador de contraste (Contrast Checker)

Comprueba el contraste del texto antes de publicar

Un buen contraste de color es una de las formas más sencillas de hacer un sitio web más legible. Este comprobador de contraste compara el color del texto y el del fondo con la fórmula de luminancia relativa de WCAG y luego muestra la relación de contraste y los resultados de aprobado o suspenso para los niveles AA y AAA. Es útil para botones, navegación, insignias, tarjetas, mensajes de alerta y cualquier lugar donde el texto aparezca sobre una superficie de color.

El cálculo se ejecuta en tu navegador y no requiere subir nada. Elige dos colores, intercámbialos si hace falta y usa el bloque de vista previa para ver cómo se siente un texto real. La relación es objetiva, pero la vista previa sigue siendo importante porque el grosor de la fuente, el tamaño de las letras y el diseño circundante influyen en la legibilidad. Un par que técnicamente aprueba puede resultar cansado si el texto es diminuto o la superficie está visualmente recargada.

Cómo entender los resultados AA y AAA

WCAG AA es el objetivo habitual para la mayoría de sitios y productos. El texto normal debe alcanzar al menos 4,5:1 y el texto grande al menos 3:1. AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande. Texto grande significa 18pt normal o 14pt en negrita o más. El umbral más bajo existe porque las letras más grandes y gruesas siguen siendo más fáciles de distinguir con menos contraste que el texto pequeño del cuerpo. Si no sabes qué categoría se aplica, trata el texto como normal y apunta al requisito más alto.

Diseñar sistemas de color accesibles

El contraste debe comprobarse pronto, no solo cuando el diseño visual ya está terminado. Al elegir los colores de marca, pruébalos sobre las superficies donde realmente aparecerán: tarjetas blancas, barras de navegación oscuras, fondos apagados y estados deshabilitados. Documenta las combinaciones accesibles como tokens para que los equipos no tengan que redescubrirlas. Recuerda que el contraste es solo una parte de la accesibilidad. Usa contornos de foco visibles, etiquetas claras, HTML semántico y no te apoyes solo en el color para comunicar estados importantes como errores, éxitos y advertencias.