Contraste de color y accesibilidad: guía práctica
Cómo asegurarte de que tus colores cumplen los estándares de accesibilidad WCAG. Ratios de contraste, AA vs AAA y herramientas para hacerlo bien — explicado sin jerga.
Eliges un color que se ve genial en tu monitor. Lo publicas. Entonces alguien te dice que no puede leer el texto.
Esto pasa más de lo que crees. Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tiene alguna forma de deficiencia en la visión del color. Suma pantallas de bajo contraste, luz solar intensa y ojos envejeciendo, y de repente tus decisiones de color afectan a mucha gente.
La buena noticia: hay reglas claras para esto. Se llaman requisitos de contraste WCAG, y son más simples de lo que parecen.
¿Qué es un ratio de contraste?
Un ratio de contraste es un número que describe cuánto difieren dos colores en brillo. Va de 1:1 (sin contraste — mismo color) a 21:1 (contraste máximo — negro sobre blanco).
Tus ojos no ven todas las diferencias de color por igual. Un ratio de contraste tiene en cuenta cómo la visión humana percibe realmente la luminosidad, no solo la diferencia matemática de color.
Referencia rápida:
| Ratio de contraste | Apariencia | ¿Pasa? | |---|---|---| | 1:1 – 2:1 | Casi invisible | No | | 3:1 | Legible pero forzando | AA solo texto grande | | 4.5:1 | Lectura cómoda | AA texto normal | | 7:1 | Muy claro | AAA texto normal | | 21:1 | Máximo (negro sobre blanco) | Todo |
AA vs. AAA: ¿cuál es la diferencia?
WCAG define dos niveles de conformidad importantes para el color:
Nivel AA (el estándar al que apuntan la mayoría de los sitios):
- Texto normal (menos de 18pt): necesita ratio de 4.5:1
- Texto grande (18pt+ o 14pt+ negrita): necesita ratio de 3:1
- Componentes UI y objetos gráficos: necesita ratio de 3:1
Nivel AAA (el estándar de oro):
- Texto normal: necesita ratio de 7:1
- Texto grande: necesita ratio de 4.5:1
La mayoría de las organizaciones apuntan al AA. El AAA es ideal pero puede ser restrictivo para el diseño — no muchas combinaciones de colores alcanzan 7:1 y se ven bien al mismo tiempo.
Fallos de contraste comunes
Estos aparecen todo el tiempo en proyectos reales:
Texto gris claro sobre fondo blanco: ¿ese texto gris sutil y "elegante"? A menudo falla en contraste. #999999 sobre blanco es solo 2.85:1 — falla incluso para texto grande.
Texto de color sobre fondos de color: azul sobre morado, verde sobre azul, rojo sobre gris oscuro. Pueden parecer distintos para ti pero no alcanzan los ratios de contraste.
Texto placeholder en formularios: el texto placeholder gris claro es casi universal en diseño web, y casi siempre falla en los requisitos de contraste. Los usuarios con baja visión no pueden leer qué se espera en el campo.
Texto sobre imágenes: a menos que agregues una capa oscura o sombra de texto, el texto sobre fotos raramente cumple los estándares de contraste consistentemente.
Consideraciones sobre daltonismo
Los ratios de contraste ayudan, pero no resuelven todo. El daltonismo significa que algunos usuarios literalmente no pueden distinguir ciertos pares de colores.
No dependas solo del color para transmitir información:
- ¿Rojo/verde para error/éxito? Agrega también íconos o etiquetas de texto
- ¿Gráficos codificados por color? Agrega patrones, etiquetas o formas diferentes
- ¿Campos obligatorios marcados solo en rojo? Agrega un asterisco o texto "(obligatorio)"
Los tipos más comunes:
- Deuteranopía (rojo-verde, ~6% de hombres): rojo y verde se ven parecidos
- Protanopía (rojo-verde, ~2% de hombres): el rojo aparece oscuro/marrón
- Tritanopía (azul-amarillo, raro): azul y amarillo son difíciles de distinguir
Pasos prácticos para corregir tus colores
Paso 1: convierte tus colores de marca a hexadecimal usando un convertidor de colores. Necesitas valores exactos para verificar el contraste.
Paso 2: prueba cada combinación texto/fondo. No solo revises tu texto principal — revisa botones, enlaces, leyendas, labels de formulario, mensajes de error.
Paso 3: corrige los fallos ajustando la luminosidad. Generalmente puedes mantener el mismo tono y saturación mientras oscureces o aclaras para alcanzar el ratio.
Paso 4: prueba con simuladores. Chrome DevTools tiene un simulador de deficiencia visual incorporado (panel Rendering > Emular deficiencias visuales).
Paso 5: revisa también tus gráficos SVG e imágenes. Los íconos con mal contraste son igual de problemáticos que el texto.
Victorias rápidas
Si tienes prisa, estas combinaciones seguras siempre pasan AA:
- Negro (
#000000) + blanco (#FFFFFF) — 21:1 - Gris oscuro (
#333333) + blanco — 12.6:1 - Texto blanco + azul oscuro (
#003366) — 9.9:1 - Texto negro + amarillo claro (
#FFF9C4) — 18.1:1 - Verde oscuro (
#2E7D32) + blanco — 5.1:1
Y estos fallan comúnmente:
- Gris medio (
#808080) + blanco — 3.9:1 (falla AA texto normal) - Rojo (
#FF0000) + negro — 5.25:1 (pasa AA pero falla AAA) - Naranja (
#FF8C00) + blanco — 3.0:1 (falla AA texto normal)
La accesibilidad no es solo cumplimiento — es asegurarte de que todos puedan realmente usar lo que construyes. Empieza verificando tus ratios de contraste de texto. Corrige los fallos obvios primero. Luego avanza por botones, íconos y texto secundario. Pequeños cambios, gran impacto.