HEXgenerator.online

Comprobador de contraste WCAG

El contraste WCAG mide la diferencia de luminancia entre texto y fondo con un ratio que va de 1:1 a 21:1. Para el nivel AA, el texto normal necesita al menos 4.5:1 y el texto grande 3:1. El nivel AAA exige 7:1 y 4.5:1.

Actualizado el

Clic en un HEX para copiarlo · candado para fijarlo

Cómo usarlo

  1. Genera o carga una paleta. La matriz cruza cada color de fondo con todos los demás como color de texto.
  2. Busca las celdas marcadas AA o AAA para texto normal. AA18 solo sirve para texto grande.
  3. Usa «Probar una combinación» para ver un título y un párrafo reales con el par elegido.

Preguntas frecuentes

¿Qué cuenta como texto grande en WCAG?

Texto de al menos 18 puntos (unos 24 px), o de 14 puntos (unos 18,7 px) en negrita. Para ese tamaño, WCAG 2.2 acepta un contraste mínimo de 3:1 en el nivel AA.

¿Cómo se calcula el ratio de contraste?

Se suma 0,05 a la luminancia relativa de cada color y se divide la del color más claro entre la del más oscuro. El resultado va de 1:1 (mismo color) a 21:1 (negro sobre blanco).

¿El contraste afecta también a iconos y bordes?

Sí. El criterio 1.4.11 de WCAG pide al menos 3:1 para componentes de interfaz y gráficos necesarios para entender el contenido, como iconos, bordes de campos y líneas de gráficas.