Verificador de contraste WCAG AA y AAA

Comprueba el contraste de colores WCAG 2.2 AA y AAA, previsualiza tamaños de texto y encuentra alternativas accesibles.

Pasa el cursor sobre un campo o selecciónalo para ver la ayuda. Pulsa Escape para cerrar.

Primer planoFondoFondo base opaco

Usa HEX, RGB, RGBA o HSL. Los colores transparentes se componen sobre el fondo base opaco.

5.84:1

Los umbrales usan el contraste con toda su precisión, nunca el valor redondeado mostrado.

WCAG 2.2
Nivel	Uso	SC	Mínimo	Resultado
AA	Texto normal	1.4.3	4.5:1	Superado
AA	Texto grande	1.4.3	3:1	Superado
AAA	Texto normal	1.4.6	7:1	No superado
AAA	Texto grande	1.4.6	4.5:1	Superado
AA	Componentes de interfaz y gráficos	1.4.11	3:1	Superado

Texto de vista previaTamaño de letra (px CSS)Negrita

Aa — fiokit.

Texto normal: AA ✓ · AAA ✗

Texto grande: al menos 24 px CSS, o 18,67 px CSS en negrita (14 pt).

Objetivo del primer plano sugeridoInforme

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Texto normal (SC 1.4.3): PASS — 4.5:1
AA Texto grande (SC 1.4.3): PASS — 3:1
AAA Texto normal (SC 1.4.6): FAIL — 7:1
AAA Texto grande (SC 1.4.6): PASS — 4.5:1
AA Componentes de interfaz y gráficos (SC 1.4.11): PASS — 3:1

Comprueba pares de colores, no toda la conformidad WCAG. Evalúa por separado colores adyacentes, estados de interacción y contenidos reales.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Cómo funciona

Configura primer plano, fondo y base opaca. Los resultados AA y AAA se actualizan al instante. Prueba tamaño y grosor de letra, aplica un color sugerido o descarga el informe.

Un ejemplo práctico

Colores

#155bdf

Preguntas frecuentes

¿Mi texto se envía a un servidor?

No. El contenido se procesa en este navegador. No se envía al servidor ni se guarda.

¿Qué debo saber sobre Verificador de contraste WCAG AA y AAA?

Muestra por separado las exigencias para texto y elementos no textuales. Esta comprobación no certifica la conformidad WCAG completa.