Accesibilidad web: Guía completa de contraste de color

El contraste de color es la diferencia de luminosidad y/o color entre un elemento (como texto) y su fondo. Es uno de los pilares fundamentales de la accesibilidad web y el diseño inclusivo. ¿Por qué importa? • Aproximadamente 300 millones de personas en el mundo tienen algún tipo de daltonismo • Más de 2,200 millones de personas tienen alguna discapacidad visual • Las personas mayores experimentan una reducción natural de la sensibilidad al contraste • Incluso personas con visión perfecta sufren con bajo contraste en pantallas brillantes, bajo el sol o en dispositivos de baja calidad Estándares WCAG: Las Web Content Accessibility Guidelines (WCAG), publicadas por el W3C, son el estándar internacional de accesibilidad web. Definen niveles de conformidad: • Nivel A: Requisitos mínimos básicos • Nivel AA: Estándar recomendado (requerido legalmente en muchos países) • Nivel AAA: Máximo nivel de accesibilidad Importancia legal: En muchos países, la accesibilidad web es un requisito legal para sitios gubernamentales y servicios públicos. En EE.UU., la ADA (Americans with Disabilities Act) se ha aplicado a sitios web. En la UE, la Directiva de Accesibilidad Web exige conformidad con WCAG 2.1 nivel AA para sitios del sector público desde 2020. Beneficio para todos: Mejorar el contraste no solo ayuda a personas con discapacidades — mejora la experiencia para todos los usuarios, especialmente en condiciones de lectura difíciles (pantalla pequeña, sol directo, fatiga visual).

WCAG 2.1 define ratios mínimos de contraste según el tamaño del texto y el nivel de conformidad: Nivel AA (estándar recomendado): • Texto normal (menos de 18pt o 14pt negrita): Ratio mínimo de 4.5:1 • Texto grande (18pt+ o 14pt+ negrita): Ratio mínimo de 3:1 • Componentes de interfaz y gráficos: Ratio mínimo de 3:1 Nivel AAA (máxima accesibilidad): • Texto normal: Ratio mínimo de 7:1 • Texto grande: Ratio mínimo de 4.5:1 ¿Qué significan los ratios? El ratio de contraste va de 1:1 (sin contraste, blanco sobre blanco) a 21:1 (máximo contraste, negro sobre blanco). Ejemplos de ratios comunes: • Negro (#000000) sobre blanco (#FFFFFF): 21:1 ✓ AAA • Gris oscuro (#333333) sobre blanco: 12.63:1 ✓ AAA • Gris medio (#767676) sobre blanco: 4.54:1 ✓ AA (el gris más claro que pasa AA) • Gris claro (#999999) sobre blanco: 2.85:1 ✗ Falla • Azul enlace (#0000EE) sobre blanco: 8.59:1 ✓ AAA • Rojo (#FF0000) sobre blanco: 3.99:1 ✗ Falla AA para texto normal Nota importante: El tamaño del texto importa. "Texto grande" se define como 18pt (24px) regular o 14pt (18.66px) negrita. El texto grande tiene requisitos menores porque es inherentemente más legible.

El cálculo del ratio de contraste sigue un proceso matemático definido por WCAG: Paso 1 — Calcular la luminancia relativa de cada color: Para cada componente RGB (rojo, verde, azul) con valores de 0 a 255: 1. Dividir entre 255 para normalizar (0 a 1) 2. Aplicar linearización gamma: • Si el valor ≤ 0.04045: valor / 12.92 • Si el valor > 0.04045: ((valor + 0.055) / 1.055) ^ 2.4 3. Calcular luminancia: L = 0.2126 × R + 0.7152 × G + 0.0722 × B Paso 2 — Calcular el ratio: Ratio = (L1 + 0.05) / (L2 + 0.05) Donde L1 es la luminancia más alta y L2 la más baja. Ejemplo práctico: • Blanco (#FFFFFF): L = 1.0 • Negro (#000000): L = 0.0 • Ratio = (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21:1 Ratios comunes de referencia: • Negro sobre blanco: 21:1 (máximo) • Azul oscuro (#003366) sobre blanco: 9.87:1 • Verde oscuro (#006600) sobre blanco: 6.58:1 • Naranja (#FF6600) sobre blanco: 3.07:1 • Amarillo (#FFFF00) sobre blanco: 1.07:1 (prácticamente invisible) ¿Por qué los pesos son diferentes para R, G, B? El ojo humano es más sensible al verde (0.7152), menos al rojo (0.2126) y mucho menos al azul (0.0722). Por eso el amarillo (rojo + verde) sobre blanco tiene tan poco contraste: ambos son muy luminosos para nuestros ojos.

Estos son los errores de contraste más frecuentes en diseño web: 1. Texto gris claro sobre fondo blanco: El error más común. Textos en #AAAAAA o más claro sobre blanco fallan todos los estándares WCAG. Muchos diseñadores lo usan por estética "minimalista", pero sacrifican la legibilidad. • Solución: Usar como mínimo #767676 sobre blanco (4.54:1, pasa AA) 2. Distinción solo por color: Usar únicamente el color para transmitir información (campos de error en rojo, enlaces solo diferenciados por color). Las personas daltónicas no pueden percibir la diferencia. • Solución: Añadir un icono, subrayado, negrita o texto complementario además del color 3. Botones de bajo contraste: Botones con texto blanco sobre fondo de color pastel, o botones "fantasma" con borde fino y texto claro. • Solución: Asegurar ratio mínimo de 3:1 para componentes de interfaz y 4.5:1 para el texto del botón 4. Placeholder como etiqueta: Texto placeholder en inputs suele ser gris muy claro. Si se usa como única etiqueta del campo, es inaccesible. • Solución: Usar etiquetas visibles además del placeholder 5. Texto sobre imágenes sin overlay: Texto blanco sobre fotografías sin una capa oscura semitransparente. Dependiendo de la zona de la imagen, el texto puede ser ilegible. • Solución: Añadir overlay oscuro, sombra al texto, o una caja semitransparente detrás del texto 6. Modo oscuro descuidado: Muchos sitios implementan modo oscuro sin verificar el contraste. Texto gris medio sobre fondo gris oscuro puede fallar. • Solución: Verificar el contraste específicamente para cada tema de color

Gigi Tools ofrece varias herramientas gratuitas para trabajar con colores y verificar la accesibilidad: • Selector de color: Elige colores y obtén los códigos en HEX, RGB y HSL • Conversor de colores: Convierte entre formatos HEX, RGB y HSL al instante • Conversor HEX a RGB y RGB a HEX: Herramientas especializadas para las conversiones más comunes • Generador de gradientes: Crea gradientes CSS con vista previa en tiempo real Cómo verificar el contraste con nuestras herramientas: 1. Usa el selector de color para elegir tus colores de texto y fondo 2. Obtén los códigos HEX de ambos colores 3. Verifica manualmente usando la fórmula de luminancia o herramientas externas de contraste 4. Ajusta los colores hasta alcanzar el ratio WCAG deseado Consejos de accesibilidad: 1. Siempre prueba tu paleta de colores con simuladores de daltonismo 2. No confíes solo en el color para transmitir información 3. Usa fuentes de al menos 16px para texto de párrafo 4. Mantén un ratio mínimo de 4.5:1 para todo el texto normal 5. Documenta tu paleta accesible para mantener consistencia Todo se procesa en tu navegador — tus datos nunca se envían a ningún servidor. Prueba las herramientas de color de Gigi Tools y asegura la accesibilidad de tu diseño.