FREE WCAG COLOR CONTRAST CHECKER

Comprobador de contraste WCAG gratis

Comprueba al instante si los colores de texto y fondo son legibles según WCAG 2.2.

Los colores y resultados no se envían ni guardan en un servidor.

  1. 1Introducir colores
  2. 2Comprobar contraste
  3. 3Copiar resultado

1 · Introducir colores

Elige los colores que quieres comparar

Cálculo en tu dispositivo

Usa el selector o escribe un HEX de 3 o 6 dígitos.

Combinaciones de ejemplo

2 · Comprobar contraste

Resultado de contraste WCAG 2.2

Relación de contraste—
  • AA texto normal4,5:1 o más—
  • AA texto grande3:1 o más—
  • AAA texto normal7:1 o más—
  • AAA texto grande4,5:1 o más—
  • Componentes UI3:1 o más—

3 · Copiar resultado

Vista previa de colores

Texto normal — comprueba si el contenido se lee con facilidad.

Texto grandeEjemplo de botón

Solo comprueba colores sRGB sólidos y opacos. No analiza transparencia, degradados, imágenes ni una página completa.

Guía gratuita de accesibilidad del color

Comprueba una combinación legible con dos colores

Calcula gratis el contraste WCAG 2.2, sin cuenta ni instalación.
1

Introduce dos colores

Añade el color frontal y el fondo sólido que está detrás.

2

Revisa los niveles

Consulta AA y AAA para texto normal, grande e interfaz.

3

Mira la vista previa

Comprueba ejemplos de texto y componentes a tamaños reales.

Entender el contraste WCAG

Una relación con distintos mínimos

El mínimo cambia según el tamaño del texto y el nivel.

Texto normal 4,5:1

WCAG AA exige al menos 4,5:1 para texto normal.

Texto grande 3:1

El texto grande cumple AA desde 3:1.

UI 3:1

Controles y gráficos necesarios requieren 3:1.

FREE WCAG COLOR CONTRAST CHECKER FAQ

Preguntas sobre contraste de color

Consulta el uso gratis, los niveles WCAG y el alcance.
1¿El comprobador es gratis?

Sí. Es gratis, sin cuenta y sin límite de usos.

2¿Qué diferencia hay entre AA y AAA?

AAA exige más contraste. El texto normal requiere 4,5:1 para AA y 7:1 para AAA.

3¿Qué se considera texto grande?

En WCAG equivale aproximadamente a 24px normal o 18,66px en negrita.

4¿Este resultado prueba que todo mi sitio cumple WCAG?

No. Solo calcula dos colores sólidos opacos. Revisa también colores adyacentes reales, estados, imágenes y otros requisitos.