KolorPal

Verificador de contraste

Comprueba que tus diseños sean accesibles con este verificador de contraste WCAG 2.1 gratuito. Introduce cualquier combinación de color de texto y fondo para ver al instante la relación de contraste y si cumple AA o AAA para texto normal y grande.

Preview Text

The quick brown fox jumps over the lazy dog

Small text sample for accessibility testing

Contrast Ratio

4.60:1

AA Normal

Pass

AAA Normal

Fail

AA Large

Pass

AAA Large

Pass

Comprueba cualquier par de texto y fondo según WCAG 2.1

El verificador de contraste calcula la relación de contraste de luminancia entre un color de primer plano y uno de fondo y te dice si el par cumple WCAG 2.1 en los niveles AA y AAA, tanto para texto normal como grande. La relación usa la misma fórmula de luminancia relativa definida por el W3C, así que el número que ves aquí coincide con el que reportan las auditorías de accesibilidad automatizadas. No hay subida de archivos ni cuenta; el resultado se actualiza mientras escribes.

Cómo usarlo

  1. Introduce el color del texto y el color de fondo como códigos hex, o usa los selectores de color.
  2. Lee la relación, mostrada como n:1. 21:1 es negro sobre blanco; 1:1 es ausencia total de contraste.
  3. Revisa las cuatro insignias: AA Normal (4.5:1), AAA Normal (7:1), AA Grande (3:1) y AAA Grande (4.5:1).
  4. Ajusta el color más claro hasta que todas las insignias que necesites se pongan en verde y luego copia los códigos hex en tu diseño.

¿Qué cuenta como texto grande?

WCAG define el texto grande como al menos 18 pt (24 px) en peso regular, o 14 pt (unos 18.66 px) en negrita. Todo lo que sea más pequeño es texto normal y necesita la relación más alta. Los iconos, bordes y contornos de formularios son contenido no textual y necesitan al menos 3:1 según el criterio de éxito 1.4.11.

Ejemplos

Consejos

Frequently Asked Questions

¿Qué es la relación de contraste WCAG AA?▾

WCAG AA exige una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande (14 pt ≈ 18.66 px en negrita, o 18 pt = 24 px regular). Esto garantiza la legibilidad para usuarios con deficiencias visuales moderadas.

¿Cuál es la diferencia entre WCAG AA y AAA?▾

WCAG AAA es más estricto: exige 7:1 para texto normal y 4.5:1 para texto grande. AAA ofrece mejor legibilidad pero es más difícil de alcanzar con diseños a color. AA es el requisito estándar.

¿Cómo compruebo el contraste de color para accesibilidad?▾

Introduce arriba el color de tu texto y el color de fondo. La herramienta calcula al instante la relación de contraste y muestra si cumple WCAG AA y AAA tanto para texto normal como grande.

¿Qué relación de contraste necesitan los componentes de UI?▾

Los componentes de UI no textuales (iconos, bordes, campos de formulario) requieren una relación de contraste mínima de 3:1 respecto a su fondo según el criterio de éxito 1.4.11 de WCAG 2.1.