Verificador de Contraste de Color

Cómo funciona

Selecciona un color de primer plano y uno de fondo usando las muestras de color o escribiendo los valores hex directamente. La herramienta calcula la luminancia relativa de cada color usando la fórmula WCAG 2.1 — una suma ponderada de los canales sRGB tras la decodificación gamma — y divide la luminancia más brillante por la más oscura (más 0.05 en el numerador y denominador para evitar división por cero con negro puro). La relación de contraste resultante va de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro). Cuatro insignias WCAG muestran aprobado o suspenso: AA para texto normal (≥ 4.5:1), AA para texto grande (≥ 3:1), AAA para texto normal (≥ 7:1) y AAA para texto grande (≥ 4.5:1). Un panel de vista previa en vivo muestra frases de ejemplo en texto normal y grande para que puedas verificar el resultado visualmente. El cálculo se realiza enteramente en tu navegador sin ninguna llamada al servidor, y cada cambio en cualquier color actualiza la relación y la vista previa instantáneamente.

Casos de uso

• Comprobar una paleta de colores de marca para el cumplimiento de accesibilidad antes de lanzar un rediseño web
• Elegir colores de botones y enlaces que sigan siendo legibles contra un tema oscuro o claro
• Cumplir los requisitos WCAG 2.1 AA o AAA para la conformidad con la Sección 508, EN 301 549 o ADA
• Revisar una maqueta enviada por un diseñador para marcar texto ilegible antes de comenzar el desarrollo
• Enseñar conceptos de accesibilidad mostrando cómo pequeñas diferencias de luminancia causan grandes fallos de contraste