Saltar al contenido principal
ImágenesProcessado no seu navegador

Verificador de Contraste WCAG

Verifica el contraste de colores y la conformidad WCAG AA/AAA con vista previa y exportación.

0 de 3 usos hoy · 3 restantes. Pasa a Pro y elimina el límite.

Mejorar

Verificador de contraste WCAG

WCAG 2.1Procesamiento en el dispositivo

Cumplimiento WCAG 2.1 con vista previa en vivo y sugerencia de color accesible.

Algoritmo
Color de primer plano
Ajustar primer plano0
Color de fondo
Ajustar fondo0
Vista previa en vivo
Contenido de ejemplo

Este párrafo muestra el par de colores en un texto corrido para validar visualmente el contraste de forma rápida.

Texto de apoyo pequeño que requiere el mayor nivel de contraste.

Resultado

Diagnóstico de contraste

Enlace para compartir
Relación
9.7:1
Nivel
AAA
Texto normal
AA · Cumple
AAA · Cumple
Texto grande
AA · Cumple
AAA · Cumple
Elementos de UI
AA · Cumple
APCA Lc
Lc
92.1
Polaridad
Texto oscuro / fondo claro
Banda
Alto contraste
Veredictos por tamaño (APCA Bronce/Plata)
Leyenda 12px· regular · Lc mín. 90
Bronce · CumplePlata · No cumple
Cuerpo pequeño 14px· regular · Lc mín. 75
Bronce · CumplePlata · Cumple
Cuerpo 16px· regular · Lc mín. 60
Bronce · CumplePlata · Cumple
Subtítulo 20px· media · Lc mín. 60
Bronce · CumplePlata · Cumple
Titular 32px· negrita · Lc mín. 45
Bronce · CumplePlata · Cumple
Simulación de daltonismo
Alcance estimado: 100%
Normal
Aa
9.7:1Cumple AA
~92.987% de la población
Deuteranopía
Aa
16.1:1Cumple AA
~6% de la población
Protanopía
Aa
14.7:1Cumple AA
~1% de la población
Tritanopía
Aa
11.1:1Cumple AA
~0.01% de la población
Acromatopsia
Aa
12.1:1Cumple AA
~0.003% de la población
Sugerencia accesible
La combinación actual ya cumple AA: no se requiere sugerencia.
Pares guardados0 pares
Aún no hay pares guardados.

§ Cómo usar

Cómo verificar el contraste de color (WCAG)

Verifica el contraste texto/fondo según WCAG AA y AAA, con simulación de daltonismo — en el navegador.

  1. Elige los colores

    Define el color de texto (frente) y de fondo con los selectores o las entradas HEX.

  2. Lee la relación

    Mira la relación de contraste y si pasa WCAG AA y AAA para texto normal y grande.

  3. Simula y ajusta

    Previsualiza los modos de daltonismo y ajusta los colores hasta que el contraste pase.

Relacionadas

Herramientas relacionadas

Da mesma categoria.