Unidad 3 · Semana 5 · Clase 4 de 5
Color accesible
Elegir combinaciones de color accesibles, con contraste suficiente para leer.
- Lectura 15 min
- Práctica 35 min
- Repaso 10 min
Diseñar para todos
Alrededor de 1 de cada 12 varones y una proporción mucho menor de mujeres tiene algún tipo de daltonismo, más frecuentemente dificultad para distinguir rojos y verdes. A eso se suman personas con baja visión, personas mayores y cualquiera que mire el celular al sol. El color tiene que funcionar para todas ellas.
El contraste mínimo
Las Pautas de Accesibilidad para el Contenido Web (WCAG), el estándar internacional, piden una relación de contraste mínima entre texto y fondo:
| Tipo de texto | Contraste mínimo (nivel AA) |
|---|---|
| Texto normal | 4,5 : 1 |
| Texto grande (24 px, o 18,5 px en negrita, aproximadamente) | 3 : 1 |
| Íconos y elementos gráficos necesarios | 3 : 1 |
La relación va de 1:1 (mismo color) a 21:1 (negro sobre blanco). Hay verificadores de contraste gratuitos en línea: cargás los dos colores y te dicen si pasan.
Aunque nacieron para la web, estas pautas son una muy buena guía también para impresos.
Reglas prácticas
- No uses solo el color para dar información. Un gráfico con líneas roja y verde tiene que tener también etiquetas, formas o patrones distintos.
- Cuidado con el texto sobre fotos. Agregá una capa oscura semitransparente o un fondo detrás del texto.
- Los grises claros sobre blanco, muy de moda, suelen no pasar el contraste mínimo.
- Probá tus diseños con un simulador de daltonismo (muchos programas y navegadores lo tienen).
El acento violeta de esta diplomatura,
#6D28D9, sobre blanco tiene un contraste de alrededor de 7:1: se puede usar para texto. El lila claro#B392FFsobre blanco no llega a 3:1: sirve para fondos y detalles, no para texto.
Práctica · 35 min
- Tomá tus cinco versiones de color de la clase anterior.
- Verificá con un verificador de contraste en línea cada combinación de texto y fondo. Anotá la relación.
- Pasá cada versión por un simulador de daltonismo.
- Corregí las combinaciones que no pasan, cambiando el valor del color sin perder la armonía.
Repaso · 10 min
1. ¿Qué contraste mínimo piden las WCAG para texto normal?
¡Bien! Es el nivel AA para texto de tamaño normal.
Todavía no. Probá otra opción.
2. ¿Por qué no hay que usar solo el color para dar información?
¡Bien! Hay que sumar etiquetas, formas o patrones.
Todavía no. Probá otra opción.
3. ¿Qué conviene hacer al poner texto sobre una foto?
¡Bien! Así se asegura el contraste en cualquier zona de la foto.
Todavía no. Probá otra opción.
Preguntale al asistente
Conoce esta clase y toda la diplomatura. Responde a cualquier hora.
El asistente puede equivocarse. Ante una duda importante, contrastá con la lectura.