Tool Hub

Comprobador de contraste

Comprueba la relación de contraste WCAG 2.1 entre texto y fondo

Relación de contraste

Aa Bb Cc 123

Sample text · normal size

17.40:1

Nivel WCAGResultado
AA Normal (4.5:1)
Pass
AA Large / UI (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

Cómo usar

  1. Ingrese o seleccione el color de primer plano usando la entrada de color de la izquierda.
  2. Ingrese o seleccione el color de fondo usando la entrada de color de la derecha.
  3. Lea la relación de contraste y las insignias de aprobación/fallo de WCAG 2.1 para texto normal (AA requiere 4.5:1), texto grande (AA requiere 3:1) y componentes de UI (3:1).
  4. Haga clic en el botón de intercambio para invertir los colores y verificar ambas direcciones.

Ejemplos

  • Primer plano #767676 sobre fondo #ffffff produce una relación de 4.48:1, que falla AA para texto normal pero pasa para texto grande.
  • Primer plano #000000 en #ffffff da 21:1, pasando todos los niveles de WCAG 2.1 incluyendo AAA.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.