Verificador de contraste de color

¿Qué es Verificador de contraste de color?

El Verificador de contraste de color es una herramienta en línea gratuita de relación de contraste WCAG para diseñadores, desarrolladores y testers de accesibilidad. Toma un color de primer plano (texto) y uno de fondo, calcula la luminancia relativa de cada uno y da la relación de contraste como un valor de 1:1 a 21:1. Luego indica si esa relación cumple el nivel AA de WCAG 2.1 (4.5:1 normal, 3:1 grande) y el nivel AAA (7:1 normal, 4.5:1 grande), y muestra los dos colores en una vista previa con texto de muestra para que juzgues la legibilidad de un vistazo. Úsalo para comprobar que el texto, los botones, los enlaces y las etiquetas son legibles antes de publicar un diseño.

Cómo usar Verificador de contraste de color

1. Escribe o pega el color de primer plano (texto) como valor HEX, o haz clic en su selector de color nativo para elegirlo de forma visual.
2. Haz lo mismo con el color de fondo sobre el que se asienta el texto.
3. Lee la salida de relación de contraste, mostrada como un valor del tipo 4.5:1 (1:1 son colores idénticos, 21:1 es negro puro sobre blanco).
4. Revisa las insignias AA y AAA para texto normal y para texto grande (18pt / 14pt en negrita y superior) para ver qué niveles aprueban.
5. Mira la vista previa con texto de muestra renderizada con tus dos colores para confirmar que el texto es cómodamente legible.
6. Ajusta cualquiera de los colores hasta alcanzar el nivel de contraste que necesita tu diseño.

Ejemplos

Primer plano #595959, Fondo #ffffff

Relación 7.00:1 — aprueba AA y AAA para texto normal y grande

Primer plano #999999, Fondo #ffffff

Relación 2.85:1 — no aprueba AA normal ni AAA, no cumple lo exigido para texto de cuerpo

Primer plano #767676, Fondo #ffffff

Relación 4.54:1 — aprueba AA normal y AA grande, pero no AAA normal

Preguntas frecuentes

¿Qué relaciones de contraste exige WCAG?

El nivel AA de WCAG 2.1 necesita al menos 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA es más estricto: 7:1 para texto normal y 4.5:1 para texto grande. Este verificador muestra una insignia de aprobado/no aprobado para cada uno de esos cuatro umbrales.

¿Qué se considera texto grande?

WCAG define el texto grande como 18pt (unos 24px) en adelante, o 14pt (unos 18.66px) en adelante cuando está en negrita. El texto grande tiene un requisito de contraste menor porque las letras más grandes son más fáciles de leer, por eso las insignias de texto grande pueden aprobar cuando las de texto normal no lo hacen.

¿Cómo se calcula la relación de contraste?

Usa la fórmula oficial de WCAG: la luminancia relativa de cada color se calcula a partir de sus canales sRGB linealizados, y la relación es (más claro + 0.05) / (más oscuro + 0.05). El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).

¿Admite alfa, RGB o colores con nombre?

La entrada es solo HEX (#rgb abreviado o #rrggbb), con un selector de color nativo para cada campo. No tiene en cuenta el alfa/opacidad ni la transparencia parcial: combina primero las capas semitransparentes en un color sólido y luego compruébalo.

¿Se envían mis colores a un servidor?

No. Los cálculos de luminancia y relación se ejecutan por completo en tu navegador con JavaScript: no se sube ningún color ni se envía nada a un servidor, así que funciona de forma privada e incluso sin conexión una vez cargada la página.