Comprobador de Contraste de Color

Comprueba la relación de contraste WCAG entre colores de texto y fondo, con niveles AA/AAA para texto normal y grande.

Colores
Comprueba la relación de contraste WCAG entre colores de texto y fondo, con niveles AA/AAA para texto normal y grande.
Resultados
Los colores transparentes se mezclan con blanco para el contraste.
Relación de contraste
18.88:1
AA (normal): AprobadoAA (grande): AprobadoAAA (normal): AprobadoAAA (grande): Aprobado
Primer plano
#111111
Fondo
#FFFFFF
Aa Bb Cc 123
Vista previa
Texto normal / Texto grande
Texto normal

Aa Bb Cc 123

Texto grande

Aa Bb Cc 123

¿Qué es el contraste de color?

La relación de contraste mide la diferencia de luminancia entre el texto (primer plano) y el fondo en una escala de 1:1 (sin contraste) a 21:1 (negro sobre blanco).

Esta herramienta convierte los colores a sRGB, mezcla la transparencia antes de comparar y usa la fórmula de luminancia relativa de la WCAG.

Umbrales WCAG

  • AA: 4.5:1 para texto normal, 3:1 para texto grande.
  • AAA: 7:1 para texto normal, 4.5:1 para texto grande.
  • Texto grande es 18pt+ regular o 14pt+ en negrita.
  • Componentes de UI, iconos y gráficos deberían aspirar al menos a 3:1.

Ratios más altos mejoran la legibilidad, especialmente con tipografías finas o tamaños pequeños.