TL
Tool Lab
💰Donar
💰Donar

Verificador de Contraste

Verifica la relación de contraste de colores según las pautas de accesibilidad WCAG 2.1. Resultados AA/AAA instantáneos.

Color de primer plano
Color de fondo

Vista previa texto grande (18pt negrita)

Vista previa texto normal — The quick brown fox jumps over the lazy dog.

14.05:1relación de contraste
AA — Texto normal (≥ 4.5:1)Pasa
AA — Texto grande (≥ 3:1)Pasa
AAA — Texto normal (≥ 7:1)Pasa
AAA — Texto grande (≥ 4.5:1)Pasa

Acerca de esta herramienta

El verificador de contraste calcula la relación de contraste entre un color de primer plano (texto) y un color de fondo usando la fórmula de luminancia relativa WCAG 2.1.

WCAG 2.1 define dos niveles: AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 y 4.5:1 respectivamente.

Cómo usar

  1. Elige el color de primer plano y fondo con los selectores o escribe códigos hex.
  2. La vista previa muestra cómo se ve el texto en tamaños normal y grande.
  3. La relación de contraste y los resultados WCAG se actualizan al instante.
  4. Usa los pares de muestra para explorar patrones de accesibilidad comunes.

Casos de uso

Diseñadores UI verifican que etiquetas y texto cumplan con WCAG. Desarrolladores comprueban combinaciones texto-fondo en sistemas de diseño.

Preguntas frecuentes

  • ¿Qué cuenta como "texto grande"? — WCAG define texto grande como mínimo 18pt (24px) normal, o 14pt (~18.67px) negrita.
  • ¿Admite transparencia o rgba? — No, este herramienta funciona solo con colores hex sólidos.
  • ¿Qué nivel WCAG debería alcanzar? — AA es el mínimo recomendado para la mayoría de sitios web públicos. AAA ofrece mejor legibilidad.
  • ¿Es 4.5:1 siempre suficiente? — 4.5:1 satisface WCAG AA, pero los usuarios con discapacidad visual más severa pueden beneficiarse de relaciones más altas.