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 de vision del color. Millones mas experimentan sensibilidad de contraste reducida debido al envejecimiento, cataratas o condiciones de visualizacion. El texto con bajo contraste no es una molestia menor, hace que el contenido sea ilegible para una parte significativa de su audiencia.
WCAG (Web Content Accessibility Guidelines) proporciona el estandar internacional para el contraste de color accesible, y se referencia en leyes y reglamentos de accesibilidad globalmente.
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 (texto negro sobre fondo blanco, maximo contraste).
La formula compara la luminancia relativa del color de primer plano con el color de fondo:
Ratio de contraste = (L1 + 0,05) / (L2 + 0,05)
No necesita calcular esto manualmente, las herramientas de verificacion de contraste lo hacen por usted.
Requisitos WCAG 2.1
WCAG define dos niveles de conformidad relevantes para el contraste:
Nivel AA (requisito estandar)
| Tipo de contenido | Ratio minimo de contraste |
|---|---|
| Texto normal (< 18pt / 14pt negrita) | 4,5:1 |
| Texto grande (>= 18pt o >= 14pt negrita) | 3:1 |
| Componentes UI y elementos graficos | 3:1 |
Nivel AAA (mejorado)
| Tipo de contenido | Ratio minimo de contraste |
|---|---|
| Texto normal | 7:1 |
| Texto grande | 4,5:1 |
Que esta exento de los requisitos de contraste
- Texto decorativo (decoracion visual pura sin valor informativo)
- Texto en logotipos y nombres de marca
- Elementos de UI desactivados / inactivos
Como verificar el contraste
En las herramientas de desarrollador del navegador
Chrome y Firefox tienen verificacion de contraste integrada. En DevTools, seleccione un elemento de texto y mire la pestana de Accesibilidad.
Herramientas de diseno
Figma, Sketch y Adobe XD tienen plugins de accesibilidad que verifican los ratios de contraste durante el diseno.
Verificador dedicado
El verificador de contraste de color de este sitio le permite introducir cualquier color de primer plano y fondo (HEX, RGB o HSL) y muestra inmediatamente el ratio de contraste y el estado de conformidad WCAG AA/AAA.
Fallos comunes y correcciones
Texto gris claro sobre fondo blanco, extremadamente comun, casi siempre falla. Oscurecer el texto o aclarar el fondo.
Texto blanco sobre un color de saturacion media, a menudo falla en tamanos de texto mas pequenos aunque parece correcto en tamanos grandes. Verificar con el tamano de fuente real.
Texto de marcador de posicion, el color de marcador de posicion predeterminado del navegador es tipicamente muy claro. Use color: #767676 o mas oscuro para el texto de marcador de posicion.
UI solo con icono, un icono sin etiqueta de texto es un elemento grafico y debe cumplir el ratio 3:1 contra su fondo.
Informacion solo por color, nunca transmita informacion solo a traves del color (p. ej., "los errores se muestran en rojo"). Esto falla WCAG 1.4.1 incluso si el contraste es correcto, porque los usuarios con daltonismo no pueden distinguir el estado.
Resumen
WCAG 2.1 requiere como minimo un ratio de contraste de 4,5:1 para texto normal y 3:1 para texto grande y componentes UI (Nivel AA). Probar pronto en el proceso de diseno, adaptar las opciones de color es significativamente mas dificil que hacerlas correctas desde el principio.