Verificador de Contraste de Color WCAG
Verifica el contraste de color según WCAG 2.1. Comprueba accesibilidad AA y AAA al instante.
Texto de ejemplo
Este es un párrafo de texto normal para verificar la legibilidad.
#1a1a1f
#f8f6f3
Por qué usarlo
Accesibilidad web sin adivinar ratios
WCAG 2.1 oficial
Usa la fórmula exacta de luminancia relativa del W3C. Resultados precisos y conformes.
AA y AAA de un vistazo
Ves de inmediato si tu combinación cumple el nivel mínimo legal exigible.
Instantáneo
Cálculo en tiempo real mientras cambias los colores.
Sin registro
Verifica tus colores sin cuentas ni instalaciones.
Cómo funciona
Tres pasos, sin complicaciones
Introduce los colores
Selecciona el color del texto y el color de fondo usando el selector de color o introduciendo valores hex, RGB o HSL directamente.
Obtén la relación de contraste
La relación de contraste se calcula instantáneamente siguiendo la fórmula de luminancia relativa de WCAG 2.1. Verás si cumple los niveles AA y AAA.
Ajusta hasta cumplir
Si el contraste no cumple los requisitos, ajusta los colores. El verificador te indica qué nivel de conformidad alcanza tu combinación de colores.
Preguntas frecuentes
¿Tienes dudas?
WCAG (Web Content Accessibility Guidelines) son las pautas de accesibilidad para el contenido web desarrolladas por el W3C (World Wide Web Consortium). Son el estándar internacional de referencia para hacer el contenido web accesible a personas con discapacidades visuales, auditivas, motoras y cognitivas. La versión actual es WCAG 2.1 (publicada en junio de 2018); WCAG 2.2 fue publicada en octubre de 2023 con criterios de éxito adicionales. WCAG 3.0 está en desarrollo y propone un nuevo modelo de contraste basado en APCA (Advanced Perceptual Contrast Algorithm).
WCAG define tres niveles de conformidad. Nivel A: requisitos básicos que si no se cumplen hacen el contenido inaccessible. Nivel AA: estándar recomendado para la mayoría de sitios web; exigido por legislación en muchos países. Nivel AAA: el nivel más alto de accesibilidad, no siempre posible para todo el contenido. Para contraste de color: AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 para texto normal y 4.5:1 para texto grande. La legislación de accesibilidad web (ADA en EE.UU., EAA en Europa) generalmente exige el nivel AA.
La relación de contraste es un número entre 1:1 (sin contraste, colores idénticos) y 21:1 (máximo contraste, negro sobre blanco). Se calcula como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa de un color sRGB se calcula transformando cada canal (R, G, B) de su valor gamma a lineal: si el valor normalizado es ≤ 0.03928 se usa canal/12.92, si es mayor se usa ((canal+0.055)/1.055)^2.4. La luminancia final es 0.2126×R + 0.7152×G + 0.0722×B.
En Estados Unidos, la Americans with Disabilities Act (ADA) se aplica a sitios web de entidades cubiertas y los tribunales han establecido que WCAG 2.1 nivel AA es el estándar aplicable. En Europa, la European Accessibility Act (Directiva 2019/882) entró en vigor el 28 de junio de 2025 y exige que productos y servicios digitales cumplan con estándares de accesibilidad equivalentes a WCAG 2.1 AA. En España, el Real Decreto 1112/2018 exige WCAG 2.1 AA para sitios web del sector público. Ignorar estos requisitos puede resultar en litigios y multas.
WCAG 2.1 define texto grande como texto con al menos 18 puntos (aproximadamente 24px) en peso normal, o al menos 14 puntos (aproximadamente 18.67px) en negrita (font-weight 700 o superior). Este texto tiene un requisito de contraste menor (3:1 para AA en lugar de 4.5:1) porque el mayor tamaño facilita la lectura incluso con menor contraste. Los logotipos y texto puramente decorativo están exentos de los requisitos de contraste. Los controles de interfaz de usuario (botones, inputs) requieren 3:1 mínimo para sus partes activas (criterio 1.4.11 Non-text Contrast).
WCAG y contraste de color: accesibilidad web, legislación y algoritmos
Las Web Content Accessibility Guidelines (WCAG) tienen su origen en el Web Accessibility Initiative (WAI) del W3C, lanzada en 1997. WCAG 1.0 fue publicada en mayo de 1999. WCAG 2.0 llegó en diciembre de 2008, introduciendo el modelo de cuatro principios: Perceptible, Operable, Comprensible y Robusto (POUR). WCAG 2.1 (junio 2018) añadió 17 nuevos criterios de éxito, especialmente para usuarios móviles, personas con baja visión y usuarios con discapacidades cognitivas. El criterio 1.4.3 (Contraste Mínimo) establece los requisitos de relación de contraste que hacen necesario esta herramienta. La Sección 508 de la Rehabilitation Act de EE.UU. (actualizada en 2017) incorpora por referencia WCAG 2.0 nivel AA para tecnología de la información de la administración federal.
La fórmula de luminancia relativa de WCAG se basa en el espacio de color sRGB (IEC 61966-2-1), el estándar para monitores de computadora desde 1999. La transformación de gamma sRGB a lineal (la operación ((c+0.055)/1.055)^2.4 para valores mayores a 0.03928) aproxima la curva gamma real del estándar sRGB. Los coeficientes de luminosidad (0.2126 para rojo, 0.7152 para verde, 0.0722 para azul) reflejan la sensibilidad del ojo humano a cada longitud de onda, basada en los trabajos de la Comisión Internacional de Iluminación (CIE). Lea Verou, investigadora de MIT y miembro del W3C CSS Working Group, desarrolló una implementación de referencia muy citada y creó la herramienta contrast-ratio.com en 2012.
WCAG 3.0 (actualmente en borrador) propone reemplazar la fórmula de contraste actual con APCA (Advanced Perceptual Contrast Algorithm), desarrollada por Andrew Somers. APCA modela mejor la percepción visual humana al tener en cuenta la polaridad del contraste (texto oscuro sobre fondo claro vs. texto claro sobre fondo oscuro se perciben diferente), el tamaño y peso de la fuente, y la adaptación del sistema visual. La escala de APCA va de 0 a 106 Lc (Lightness Contrast), y sus umbrales difieren significativamente de los ratios de WCAG 2.x — por ejemplo, texto negro sobre blanco puro da 106 Lc, mientras que combinaciones que pasarían AA en WCAG 2.x podrían fallar en APCA o viceversa. La transición a WCAG 3.0 será gradual y se espera que la versión final no llegue antes de 2026.