Contraste de Color y Accesibilidad: Guía Completa de WCAG

Cada vez que entornas los ojos ante una página porque el texto es demasiado claro, o te cuesta leer el texto de un botón porque se confunde con el fondo, estás experimentando un fallo de contraste. Para la mayoría de las personas esto es una molestia menor. Para una parte significativa de la población —quienes tienen deficiencias en la visión del color, visión reducida, ojos envejecidos, o cualquiera que use una pantalla bajo la luz solar directa— hace que el contenido sea genuinamente inaccesible. El contraste de color es uno de los aspectos más importantes y más frecuentemente vulnerados de la accesibilidad web, y también es uno de los más fáciles de corregir una vez que se entienden las reglas. Esta guía explica el estándar, la matemática, los errores comunes y cómo usar el Verificador de Contraste de Color de BrowseryTools para verificar cualquier par de colores al instante en tu navegador.

Por Qué Importa el Contraste

La escala de la población afectada es mayor de lo que la mayoría de los diseñadores supone. Según la Organización Mundial de la Salud, aproximadamente 2200 millones de personas a nivel mundial tienen alguna forma de deterioro visual de cerca o de lejos. La deficiencia en la visión del color —comúnmente llamada daltonismo— afecta a aproximadamente el 8% de los hombres y el 0,5% de las mujeres de ascendencia noreuropea, lo que significa que unos 300 millones de personas en todo el mundo tienen cierta dificultad para distinguir determinados colores.

Más allá de las condiciones permanentes, el contraste afecta a todos de forma situacional:

• Leer el teléfono bajo la luz solar exterior intensa hace que el texto de bajo contraste sea completamente ilegible.
• Los monitores viejos o de bajo presupuesto tienen menor brillo y peor precisión de color.
• Las personas con migraña y fotosensibilidad suelen usar pantallas con brillo reducido.
• El reflejo de luz de ventanas o focos reduce efectivamente el contraste percibido.
• Los usuarios con prisa —básicamente todos— procesan el contenido de alto contraste más rápido.

Un buen contraste no es una adaptación de nicho. Mejora la experiencia para todos los usuarios, en todos los dispositivos y en cualquier condición de iluminación.

¿Qué Es la Relación de Contraste?

La relación de contraste es un número estandarizado que expresa cuán diferentes son dos colores en términos de su brillo relativo (luminancia). Siempre se expresa como una proporción: el color más claro dividido por el más oscuro, añadiendo 0,05 a cada uno para evitar la división por cero y tener en cuenta la luz ambiental en pantallas reales.

El rango va de 1:1 (dos colores idénticos — cero contraste, completamente ilegible) a 21:1 (negro puro sobre blanco puro — el máximo contraste posible). Cuanto mayor es la proporción, más distinguibles son los dos colores.

Cómo Se Calcula la Relación de Contraste

La fórmula utilizada por WCAG (y todo el ecosistema de estándares web) se basa en el concepto de luminancia relativa: una medida de cuánta luz parece emitir un color, ajustada para la percepción visual humana. El cálculo ocurre en dos pasos.

Paso 1: Calcular la luminancia relativa (L) para cada color.

Primero, convierte cada canal RGB del rango 0–255 a una escala lineal de 0–1 y aplica una fórmula de expansión gamma para tener en cuenta la forma en que las pantallas codifican el brillo:

// Para cada valor de canal c en [0, 1]:
if c <= 0.04045:
    c_linear = c / 12.92
else:
    c_linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

Los coeficientes 0,2126, 0,7152 y 0,0722 reflejan la sensibilidad al color humana: nuestros ojos son más sensibles al verde, moderadamente al rojo y menos al azul.

Paso 2: Calcular la relación de contraste.

Relación de contraste = (L_más_claro + 0.05) / (L_más_oscuro + 0.05)

Donde L_más_claro es la luminancia relativa del color más brillante y L_más_oscuro es la luminancia relativa del color más oscuro.

Ejemplos de Cálculo

• Negro (#000000) sobre blanco (#FFFFFF): L(blanco) = 1,0, L(negro) = 0,0. Proporción = (1,0 + 0,05) / (0,0 + 0,05) = 1,05 / 0,05 = 21:1. Contraste máximo posible.
• Gris #767676 sobre blanco (#FFFFFF): L(#767676) ≈ 0,216. Proporción = (1,0 + 0,05) / (0,216 + 0,05) ≈ 1,05 / 0,266 ≈ 4,54:1. Apenas supera el nivel AA de WCAG para texto normal.
• Gris #999999 sobre blanco (#FFFFFF): L(#999999) ≈ 0,319. Proporción = (1,0 + 0,05) / (0,319 + 0,05) ≈ 1,05 / 0,369 ≈ 2,85:1. No supera el nivel AA de WCAG para texto de ningún tamaño.

WCAG: El Estándar que Define los Requisitos de Accesibilidad

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son publicadas por el World Wide Web Consortium (W3C) y definen el estándar de accesibilidad web reconocido internacionalmente. La versión actual de uso regulatorio generalizado es WCAG 2.1, publicada en 2018. WCAG 3.0 está en desarrollo y eventualmente la reemplazará con un sistema de medición más matizado, pero WCAG 2.1 sigue siendo el estándar vigente a efectos de cumplimiento.

WCAG organiza los requisitos en tres niveles de conformidad: A (mínimo), AA (estándar) y AAA (mejorado). El nivel AA es lo que exige la mayoría de los marcos legales. El nivel AAA es aspiracional y no se exige para sitios completos, solo para contextos específicos.

Es importante notar a qué no se aplican los requisitos de contraste: las imágenes decorativas sin contenido informativo, los logotipos y las marcas de palabra, y el texto que forma parte de un componente de interfaz inactivo (un botón deshabilitado, por ejemplo) están todos exentos de los requisitos de contraste bajo WCAG 2.1. La intención es proteger el contenido informativo, no los elementos puramente decorativos.

Pares de Color: Ejemplos de Aprobado y Reprobado

La relación de contraste de un par de colores depende enteramente de la luminancia relativa de los dos colores, no de cuál sea "más bonito" ni de los que parezcan similares. Aquí tienes ejemplos representativos en todo el espectro de aprobado/reprobado:

Errores de Contraste Comunes

Los mismos errores aparecen repetidamente en las auditorías de accesibilidad en toda la web. Conocerlos por su nombre los hace más fáciles de identificar en tu propio trabajo.

Texto Gris Claro sobre Blanco

Este es el fallo de contraste más común en la web moderna. Las tendencias de diseño hacia el minimalismo han producido una generación de interfaces donde el cuerpo del texto, los pies de foto, los metadatos y el texto de marcador de posición se representan en tonos como #aaaaaa, #bbbbbb o #cccccc sobre fondos blancos. Estas combinaciones típicamente producen relaciones de contraste entre 1,5:1 y 2,5:1 —muy por debajo del mínimo de 4,5:1. El diseñador puede leerlo en un monitor calibrado de estudio en una habitación oscura; el usuario final en un smartphone bajo la luz solar de la tarde no.

Texto Blanco sobre Botones de Color

El texto blanco sobre amarillo (#ffdd00), verde lima (#84cc16) o naranja claro (#fb923c) no supera el nivel AA de WCAG para ningún tamaño de texto. Estas combinaciones de color son visualmente llamativas pero el contraste es demasiado bajo. El texto oscuro (negro o gris muy oscuro) sobre estos fondos brillantes es la solución accesible — suele alcanzar proporciones superiores a 10:1.

Texto de Marcador de Posición en Campos de Formulario

El texto de marcador de posición predeterminado del navegador —el texto de sugerencia que aparece en los campos de entrada vacíos antes de que el usuario escriba— se representa típicamente con una opacidad de alrededor del 40% del color del texto, o como un gris medio como #aaaaaa. Esto casi siempre no supera el nivel AA de WCAG. El texto de marcador de posición está sujeto al mismo requisito de contraste de 4,5:1 que el texto regular porque transmite información sobre qué escribir.

Texto de Enlace Azul sobre Fondos de Color u Oscuros

El color tradicional del hipervínculo azul (#0000ee) tiene un excelente contraste sobre blanco (8,6:1) pero falla sobre fondos de color. Sobre un fondo morado medio, el mismo enlace azul alcanza solo alrededor de 1,7:1. Los colores de los enlaces deben verificarse no solo contra el fondo de la página sino también contra cualquier sección o tarjeta de color en la que aparezcan.

Estados Deshabilitados e Indicadores de Foco

Si bien WCAG 2.1 exime a los componentes de interfaz deshabilitados de los requisitos de contraste, los indicadores de foco —el anillo o contorno visible que aparece cuando un usuario navega hasta un elemento enfocable con el teclado— deben cumplir un contraste de 3:1 contra los colores adyacentes bajo WCAG 2.2. Muchos sitios suprimen el anillo de foco predeterminado del navegador con outline: none y no proporcionan ningún reemplazo, lo cual es un fallo de accesibilidad para los usuarios que solo usan teclado.

Técnicas para Elegir Colores Accesibles

Empieza con Oscuro sobre Claro

El valor predeterminado más sencillo para el texto es texto casi negro sobre un fondo blanco o gris muy claro. Las relaciones superiores a 10:1 son fáciles de lograr y te dan enorme flexibilidad con el tamaño y el peso de la fuente. Reserva los esquemas de color claro sobre oscuro (modo oscuro) para superficies secundarias y verifica el contraste en ambos temas.

Verifica Todos los Estados Interactivos

El estado predeterminado de un botón puede superar AA mientras que su estado de hover —que aclara el fondo— cae por debajo de 4,5:1. Verifica los estados predeterminado, hover, foco, activo y deshabilitado por separado. El estado deshabilitado está exento del requisito, pero todos los demás deben aprobarlo.

La Regla 60-30-10 Aplicada con Accesibilidad

La regla de color 60-30-10 (60% color dominante, 30% color secundario, 10% acento) es útil para la jerarquía visual. Aplicarla con accesibilidad significa: verifica que el texto que aparece en cada una de esas tres zonas de color cumpla el umbral de contraste para esa zona individualmente. El color de acento al 10% es a menudo el más problemático: los colores de acento brillantes combinados con texto blanco u oscuro pueden fallar en ciertas combinaciones de matiz y saturación.

Usa el Verificador de Contraste de Color Antes de Comprometerte

El momento más barato para corregir un problema de contraste es antes de escribir código. Al seleccionar colores en una herramienta de diseño, verifica inmediatamente los pares de texto/fondo previstos. Ajustar la luminosidad de un color en un 10–15% a menudo lleva una combinación fallida al cumplimiento sin cambiar significativamente el carácter visual del diseño.

Requisitos Legales

El cumplimiento de WCAG no es puramente voluntario en muchas jurisdicciones. Los marcos legales que hacen referencia al nivel AA de WCAG incluyen:

• Estados Unidos — Ley de Estadounidenses con Discapacidades (ADA): La ADA prohíbe la discriminación por discapacidad en lugares de acomodación pública. Los tribunales federales y el Departamento de Justicia han interpretado que esto cubre los sitios web comerciales. Miles de demandas de accesibilidad por la ADA se presentan anualmente en los tribunales federales de EE. UU., con violaciones de contraste de color frecuentemente citadas en cartas de demanda.
• Unión Europea — EN 301 549: La Directiva de Accesibilidad Web de la UE exige el cumplimiento del nivel AA de WCAG 2.1 para sitios web y aplicaciones móviles del sector público. EN 301 549 es el estándar técnico usado para la contratación pública. Las organizaciones del sector privado en industrias reguladas también enfrentan requisitos crecientes.
• Canadá — AODA (Ley de Accesibilidad para Personas con Discapacidades de Ontario): Ontario exige el cumplimiento del nivel AA de WCAG 2.0 para organizaciones del sector privado con 50 o más empleados y para todas las organizaciones del sector público.
• Reino Unido — Ley de Igualdad de 2010: Los proveedores de servicios tienen el deber de hacer ajustes razonables para las personas con discapacidad, lo que el gobierno del Reino Unido interpreta que incluye la accesibilidad de los sitios web.

Más allá del riesgo legal, muchos clientes empresariales y procesos de contratación pública ahora exigen la conformidad con WCAG AA en los contratos de proveedores. El cumplimiento de la accesibilidad es cada vez más un requisito comercial, no solo uno ético.

Quiénes Se Benefician Más Allá de los Usuarios con Discapacidad

El contraste accesible es buen diseño para todos. La investigación en experiencia de usuario muestra sistemáticamente que el texto de alto contraste se lee más rápido y con menos errores en todos los grupos de usuarios. Las poblaciones que se benefician de manera más demostrable incluyen:

• Personas con deficiencia en la visión del color (rojo-verde, azul-amarillo o monocromatismo)
• Adultos mayores, para quienes la sensibilidad al contraste disminuye naturalmente con la edad
• Personas con baja visión que no usan ampliación de pantalla
• Usuarios en entornos de alta luz ambiental (al aire libre, cerca de ventanas)
• Usuarios con pantallas de baja calidad, antiguas o de bajo presupuesto
• Cualquiera bajo carga cognitiva: cuando se está cansado o distraído, el alto contraste reduce los errores de lectura

Cómo Usar el Verificador de Contraste de Color de BrowseryTools

El Verificador de Contraste de Color de BrowseryTools hace que sea trivial verificar cualquier combinación de colores contra los estándares WCAG:

• Introduce códigos hex: Escribe o pega cualquier código de color hex válido (3 o 6 dígitos, con o sin el prefijo #) en los campos de primer plano y fondo.
• Ve la relación al instante: La relación de contraste se calcula y muestra en tiempo real mientras escribes, sin necesidad de hacer clic en ningún botón.
• Insignias AA y AAA: Se muestran insignias claras de aprobado/reprobado para texto normal de nivel AA, texto grande de nivel AA, texto normal de nivel AAA y texto grande de nivel AAA, para que puedas ver exactamente qué umbrales cumple tu par.
• Vista previa en directo: La herramienta muestra una muestra de texto sobre el fondo elegido para que puedas ver la combinación tal como la vería un usuario.
• Usa el selector de color: Si no tienes un valor hex específico en mente, el selector de color integrado te permite elegir colores visualmente y ver al instante cómo cambia la relación al moverte por el espacio de color.