Contraste y legibilidad: la base invisible de una web accesible

Hay una diferencia entre una web que “cumple la norma” y una web que la gente puede leer. El contraste de color es el ejemplo más claro de esa brecha: el texto con contraste insuficiente, por debajo de los umbrales WCAG 2 AA, aparece en el 83,9% de las páginas de inicio analizadas en el informe WebAIM Million 2026, siendo el problema de accesibilidad detectado con más frecuencia. No es un dato menor: es el error más repetido, año tras año, en la web.

Este post explica cómo funciona el sistema de ratios WCAG, qué herramientas miden lo que realmente ve el usuario, cuándo los colores de una paleta de marca superan el umbral y cuándo fallan, y cómo integrar todo esto desde el diseño sin sacrificar identidad visual. Al final hay un checklist concreto para auditar cualquier web.

1. Cómo funciona el ratio de contraste WCAG

WCAG usa una métrica de ratio de contraste para determinar la legibilidad del texto. El ratio es una medición de la diferencia de luminancia (brillo) entre dos colores. Cuanto mayor es el ratio, más legible resulta el texto.

La escala va de 1:1 (blanco sobre blanco, indetectable) hasta 21:1 (negro sobre blanco, máximo posible). Los criterios vigentes en WCAG 2.2 son tres:

• 1.4.3 Contraste Mínimo — Nivel AA: ratio de al menos 4,5:1 para texto normal y 3:1 para texto grande.

• 1.4.6 Contraste Mejorado — Nivel AAA: ratio de al menos 7:1 para texto normal y 4,5:1 para texto grande.

• 1.4.11 Contraste No Textual — Nivel AA: los objetos gráficos y componentes de interfaz deben tener un ratio mínimo de 3:1 contra los colores adyacentes. Esto incluye bordes de inputs, iconos informativos y estados de foco.

“Texto grande” se define como 14 puntos en negrita (aproximadamente 18,66 px) o 18 puntos normales (aproximadamente 24 px) o más.

¿Por qué esos números concretos?

El ratio de 4,5:1 fue elegido para el nivel AA porque compensa la pérdida de sensibilidad al contraste equivalente a una agudeza visual de 20/40, que corresponde aproximadamente a la visión típica de personas mayores de 80 años.

El ratio de 7:1 del nivel AAA compensa la pérdida equivalente a 20/80, cubriendo a usuarios con baja visión que no usan tecnología de asistencia y aportando mejora para deficiencias en la percepción del color.

Estos umbrales son el suelo, no el techo. Pasar justo el mínimo no equivale a ser accesible: algunos usuarios tendrán dificultad real aunque el ratio sea 4,52:1, y lo sensato no es mover la aguja lo mínimo necesario para estar en verde.

2. La trampa de las herramientas que engañan

No todas las herramientas de contraste calculan lo mismo. Hay dos fuentes de error habituales:

El problema del CSS no renderizado. Algunas herramientas analizan el código fuente o los estilos en hoja, pero no el DOM renderizado. Si un color viene de una variable CSS calculada en tiempo de ejecución, de un tema dinámico o de un overlay con transparencia, la herramienta puede comprobar que existe un contraste mínimo en estilos inline, pero no puede procesar todo el CSS para verificar el contraste real del texto que ve el usuario.

El problema de las transparencias y gradientes. Un overlay semitransparente sobre una imagen hace que el contraste efectivo dependa de los píxeles subyacentes, que cambian. Las herramientas que no renderizan el DOM completo devuelven un ratio incorrecto en esos casos.

Las herramientas fiables trabajan sobre el DOM renderizado:

• WebAIM Contrast Checker — introduce los valores hexadecimales y calcula el ratio con la fórmula de luminancia relativa WCAG. Rápido para verificar pares concretos durante el diseño.

• Axe DevTools (extensión Chrome/Firefox de Deque) — usa el mismo motor axe-core en el que se basa Lighthouse, pero ejecuta más reglas y tiene la política de cero falsos positivos. Es la opción más precisa para auditar páginas completas.

• WAVE (extensión Chrome/Firefox) — permite evaluar la accesibilidad de las páginas en tiempo real e identifica problemas como contrastes insuficientes y estructuras de encabezado incorrectas.

• Lighthouse (integrado en Chrome DevTools) — da una puntuación de accesibilidad con recomendaciones específicas. Útil para integrar en CI.

Una advertencia importante: las herramientas automáticas de análisis de accesibilidad detectan, según diversas estimaciones del sector, entre el 20% y el 40% de los criterios WCAG que pueden testarse automáticamente. Las comprobaciones de contraste automatizadas no sustituyen revisar manualmente los estados hover, focus, disabled y las combinaciones sobre imágenes.

3. Cuándo un color de marca pasa y cuándo falla

Tener una paleta de marca no garantiza accesibilidad. El ratio depende siempre del par texto-fondo en contexto real, no del color en abstracto.

Algunos patrones frecuentes y su comportamiento:

Texto claro sobre fondo oscuro (dark mode). Suele ser la combinación más favorable. Un blanco #F9FAFB sobre un Charcoal 900 #2F3437 da un ratio de 12,05:1 — nivel AAA sin esfuerzo. El riesgo aparece cuando se usa el color de acento de marca como texto: un Sand medio sobre fondo oscuro puede superar el umbral, pero un Teal saturado puede quedarse en AA sin alcanzar AAA.

Texto oscuro sobre fondo claro (light mode). Aquí el error más común es usar un tono de fondo que parece neutro pero tiene suficiente luminancia para reducir el contraste con el texto oscuro. Un fondo #F0ECE4 (neutro cálido) con texto Charcoal 900 #2F3437 da 10,69:1 — AAA. Si el fondo fuera un amarillo más saturado como #FFF6E1, el ratio bajaría por el incremento de luminancia del fondo.

Colores de acento como texto de cuerpo. Muchos equipos diseñan para el estado por defecto pero no verifican cómo se comportan los elementos interactivos al hacer hover o focus. Un acento Teal, por ejemplo, puede alcanzar AA como color de enlace en fondo oscuro (ratio 6,77:1) pero fallar si se usa como texto de párrafo en fondo claro sin ajustar la variante.

Texto sobre imagen o gradiente. Técnicamente hay que medir el peor caso. Si el overlay tiene una opacidad del 55% sobre una fotografía, el contraste efectivo depende de la imagen. La práctica segura es verificar con la zona más clara del fondo visible, no con el promedio.

Estados interactivos y foco. WCAG 2.1 exige un ratio de al menos 3:1 para componentes de interfaz como bordes de input. El ring de foco es un elemento de interfaz, no texto: debe cumplir 3:1 contra el fondo adyacente. Si el foco ring es Teal sobre fondo blanco, hay que verificar que ese par específico pasa.

La regla práctica

Antes de integrar una combinación en el design system, calcula el ratio en los cuatro contextos donde aparecerá: estado normal, hover, focus y disabled. Si alguno falla, ajusta la variante de color (más claro o más oscuro) antes de que llegue a producción. Corregir un token en el design system es trivial; corregir todos los componentes que ya lo usan, no.

4. Contraste e identidad de marca: compatibles con criterio

Una objeción habitual al diseño accesible es que los ratios WCAG “matan la marca”. En la mayoría de los casos, esa tensión se resuelve con decisiones tipográficas, no cambiando los colores de marca.

El tamaño y el peso abren margen. Texto de 24 px o más solo necesita 3:1 en lugar de 4,5:1. Un titular grande en un color de acento que no alcanzaría AA en texto de cuerpo puede ser perfectamente válido en ese tamaño. Reservar el color de acento para displays y headlines, no para párrafos, permite usar la paleta completa sin sacrificar accesibilidad.

El modo oscuro como ventaja. Las combinaciones de texto claro sobre fondo oscuro suelen tener más margen: los fondos oscuros tienen luminancia baja y permiten que colores de acento relativamente saturados alcancen ratios altos. Esto es una razón técnica, no solo estética, para que un dark mode bien ejecutado sea más fácil de hacer accesible que un light mode con fondos saturados.

Separar color de marca y color de texto. Un color de marca no tiene por qué ser el color del texto. Puede ser el fondo de un botón, el borde de una card, o el indicador de una barra de progreso — contextos donde el criterio aplicable es 3:1 (contraste no textual) y no 4,5:1. La paleta no se restringe; se usa en los elementos correctos.

APCA como herramienta de exploración (con cautela). WCAG 3 contempla un nuevo método de contraste llamado APCA (Advanced Perceptual Contrast Algorithm), una propuesta de mejora sobre el sistema actual que está siendo evaluada.

WCAG 2.x ignora en gran medida el peso y la tipografía: una fuente delgada y una negrita se tratan igual si los valores de color coinciden, aunque su legibilidad es dramáticamente diferente. Las fuentes de trazos finos necesitan más contraste percibido para ser legibles, algo que APCA está diseñado específicamente para compensar. Sin embargo, APCA fue eliminada del borrador de trabajo de WCAG 3 en julio de 2023 y actualmente no figura en el borrador activo del estándar.

Para proyectos comerciales y públicos, lo más probable es que estés obligado a cumplir WCAG 2 por ley o política, lo que significa que no puedes depender de APCA para la conformidad. Puedes usarlo como señal adicional durante el diseño, pero el ratio WCAG 2 sigue siendo el estándar auditable.

5. Checklist de auditoría de contraste

Este checklist cubre los puntos que las herramientas automáticas pueden verificar y los que requieren revisión manual.

Verificación automática (axe / Lighthouse / WAVE):

• Texto de cuerpo (≤18 px normal o ≤14 px negrita) cumple 4,5:1 en todos los fondos.
• Texto grande (≥24 px o ≥19 px negrita) cumple 3:1 en todos los fondos.
• Bordes de inputs, checkboxes y radio buttons cumplen 3:1 contra el fondo adyacente.
• Iconos informativos (sin texto alternativo adyacente) cumplen 3:1.
• No hay texto con color igual o similar al fondo en ningún estado.

Revisión manual (los estados que las herramientas no alcanzan):

• Estado hover sobre enlaces y botones: verificar el par color hover / fondo.
• Focus ring: medir el color del outline contra el fondo donde aparece (no contra el elemento enfocado).
• Estado disabled: aunque los elementos deshabilitados están exentos del criterio 1.4.3, verificar que el aspecto visual comunica claramente que están inactivos.
• Texto sobre imagen o gradiente: medir en la zona más clara del fondo visible.
• Texto sobre vídeo o animación: si el fondo cambia, el contraste debe mantenerse en todos los fotogramas críticos.
• Light mode y dark mode por separado: una combinación que pasa en dark puede fallar en light con el mismo componente.
• Texto en placeholders de inputs: los placeholders son texto decorativo, pero muchos lectores los toman como referencia. Nivel AA recomendado aunque no obligatorio.

Revisión en contexto real:

• Probar la página en pantalla con brillo reducido al 50% (simula entornos con luz exterior intensa).
• Activar el modo alto contraste del sistema operativo y verificar que el diseño no rompe.
• Revisar con Sim Daltonism u otra herramienta de simulación de daltonismo las combinaciones de color que no son texto (iconos de estado, badges, gráficos).

---

La accesibilidad de contraste no es un checkbox de final de proyecto: es un criterio de diseño que se integra en el momento de definir los tokens, no después. El European Accessibility Act ya está en vigor y exige que los productos y servicios digitales sean accesibles; desde 2025, esta obligación se extiende al sector privado. Para negocios en España, esto ya no es una recomendación.

Si tienes dudas sobre si tu web cumple o necesitas un plan de mejora concreto, puedes solicitar una auditoría gratuita — el informe base incluye verificación de contraste en las páginas principales.