Por que importa el contraste de color
Aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres tienen alguna forma de deficiencia en la vision del color. Millones mas experimentan sensibilidad de contraste reducida por envejecimiento, cataratas o condiciones de iluminacion adversas, leer en pantalla bajo el sol de verano en una terraza espanola, por ejemplo.
El texto con bajo contraste no es una molestia menor: hace el contenido ilegible para una parte significativa de los usuarios. Ademas, en Espana y en la Union Europea, la accesibilidad web es una obligacion legal para administraciones publicas y empresas de cierta escala.
La normativa espanola: UNE 301549
En Espana, la norma de referencia para la accesibilidad digital es la UNE 301549, que incorpora las pautas WCAG 2.1 nivel AA como requisito minimo. Su cumplimiento es obligatorio para:
- Todos los sitios web y apps de las administraciones publicas espanolas (Real Decreto 1112/2018)
- Entidades privadas que prestan servicios de interes general: banca, seguros, transporte, telecomunicaciones, comercio electronico con mas de 10 empleados o mas de 2 millones de euros de facturacion
La Directiva Europea de Accesibilidad (2016/2102) y la Ley Europea de Accesibilidad (2019/882) amplian estas obligaciones, con plazos de aplicacion que llegan a 2025-2030 para distintos sectores. Ignorar el contraste de color ya no es solo mala practica, puede ser un incumplimiento normativo.
Que es el ratio de contraste
El ratio de contraste mide la diferencia de luminancia entre dos colores. Se expresa como un ratio de 1:1 (colores identicos, sin contraste) a 21:1 (negro puro sobre blanco puro, maximo contraste posible).
El calculo usa la luminancia relativa de cada color, que se obtiene linealizando los valores RGB y aplicando la formula de luminancia del estandar sRGB:
Ratio = (L1 + 0,05) / (L2 + 0,05)
Donde L1 es la luminancia del color mas claro y L2 la del mas oscuro. No es necesario calcularlo manualmente: el verificador de contraste lo hace instantaneamente.
Niveles WCAG 2.1: AA y AAA
Las WCAG (Web Content Accessibility Guidelines) del W3C definen dos niveles de conformidad relevantes para contraste:
Nivel AA (requisito estandar, exigido por UNE 301549)
| Tipo de contenido | Ratio minimo |
|---|---|
| Texto normal (< 18 pt o < 14 pt negrita) | 4,5:1 |
| Texto grande (>= 18 pt normal o >= 14 pt negrita) | 3:1 |
| Componentes de interfaz y graficos informativos | 3:1 |
Nivel AAA (contraste mejorado, recomendado)
| Tipo de contenido | Ratio minimo |
|---|---|
| Texto normal | 7:1 |
| Texto grande | 4,5:1 |
Que esta exento de los requisitos de contraste
No todo debe cumplir los ratios de contraste:
- Texto decorativo: elementos visuales puramente ornamentales sin contenido informativo
- Logotipos y marcas: el texto que forma parte de un logotipo o nombre de marca
- Elementos desactivados: controles de interfaz en estado inactivo (disabled)
- Texto en imagenes de fondo: si el texto forma parte integrante de una imagen que no puede modificarse
En la practica, estas excepciones son mas estrechas de lo que parece. Un parrafo con texto de "fondo" que el usuario no puede distinguir no es texto decorativo, es texto inaccesible.
Fallos de contraste mas comunes en sitios espanoles
El informe WebAIM Million analiza anualmente los fallos de accesibilidad mas frecuentes en el millon de paginas de inicio mas visitadas. El bajo contraste de texto aparece consistentemente como el error numero 1, presente en mas del 80 % de las paginas analizadas.
Los patrones de fallo mas frecuentes:
Texto gris claro sobre fondo blanco, el diseno "minimalista" mas comun. Un gris #999999 sobre blanco tiene ratio 2,85:1, muy por debajo del 4,5:1 requerido. La solucion es oscurecer el texto a al menos #767676 sobre blanco (ratio exactamente 4,54:1).
Texto blanco sobre colores corporativos de saturacion media, el naranja, el verde y el azul saturados frecuentes en branding espanol a menudo no alcanzan 4,5:1 con texto blanco para texto de tamano normal. Hay que verificar con el tamano de fuente real, no con un texto de muestra grande.
Texto de placeholder en formularios, el color de placeholder predeterminado del navegador suele ser #757575 o mas claro. Define explicitamente el color del placeholder en CSS a #767676 o mas oscuro.
Iconos sin etiqueta de texto, un icono informativo sin etiqueta visible es un elemento grafico y debe cumplir ratio 3:1 contra su fondo segun WCAG 1.4.11 (Contenido no textual).
Informacion transmitida solo por color, mostrar errores de formulario solo en rojo, o estados de disponibilidad solo en verde/rojo, falla WCAG 1.4.1 incluso si el contraste es correcto. Anade siempre un indicador adicional (icono, texto, forma) que no dependa del color.
Como verificar el contraste durante el desarrollo
En las herramientas de desarrollador del navegador: Chrome DevTools muestra el ratio de contraste al inspeccionar un elemento de texto en la pestana Elementos > Estilos. Firefox tiene una herramienta similar en el Inspector de Accesibilidad.
En herramientas de diseno: Figma, Sketch y Adobe XD tienen plugins de accesibilidad (A11y Annotation Kit, Stark, etc.) que verifican los ratios durante la fase de diseno, mucho antes de llegar al codigo.
Extensiones de navegador: axe DevTools y WAVE son extensiones gratuitas que auditan toda una pagina e identifican los fallos de contraste con sus ubicaciones exactas.
Verificador en linea: el verificador de contraste de este sitio permite introducir cualquier par de colores en HEX, RGB o HSL y muestra inmediatamente el ratio y el estado de conformidad WCAG AA y AAA para texto normal y texto grande.
Integrar el contraste desde el principio
Corregir el contraste durante el desarrollo es mas costoso que elegir los colores correctamente desde el diseno. Algunas practicas que ayudan:
- Define una paleta de colores accesibles desde el inicio del proyecto, con los ratios verificados incluidos en la guia de estilo
- Si el branding corporativo usa colores que no alcanzan 4,5:1 con texto blanco, define una version alternativa del color para texto sobre fondo blanco o viceversa
- Haz auditorias de contraste automaticas en el pipeline de CI/CD con herramientas como axe-core, detectan regresiones antes de que lleguen a produccion