Lección 5 de 7 · 11 min
Contraste, color, zoom y reflujo
Al terminar sabrás
11 min- Medir el contraste de textos y componentes con una herramienta
- Detectar información que depende solo del color
- Probar zoom al 200% y reflujo a 320 píxeles CSS
Construyes: La medición de contraste y la prueba de reflujo de tus tres flujos críticos.
El contraste se mide, no se opina
"Se ve bien en mi pantalla" no es un criterio: depende del monitor, del brillo y de quien mira. WCAG define el contraste como una relación numérica entre el color del texto y el del fondo, y fija mínimos:
| Qué | Nivel AA | Criterio |
|---|---|---|
| Texto normal | 4,5:1 | 1.4.3 |
| Texto grande (aproximadamente 18 puntos, o 14 en negrita) | 3:1 | 1.4.3 |
| Bordes de campos, íconos que transmiten información, estado de foco | 3:1 | 1.4.11 |
Para medir, basta con una herramienta de contraste: pones los dos colores y te dice la relación y si aprueba. Las herramientas de desarrollo de los navegadores también lo muestran al inspeccionar un texto.
Los fallos más comunes:
- texto gris claro sobre blanco para "textos secundarios";
- texto blanco sobre un botón de color claro;
- bordes de campos casi invisibles: el campo existe, pero no se ve dónde está.
El color no puede ser la única señal
Una de cada varias personas con daltonismo no distingue bien el rojo del verde. Si un formulario marca los errores solo con borde rojo, o un gráfico distingue dos series solo por color, esa persona no recibe la información. Es el criterio 1.4.1 Uso del color.
La prueba: mira la pantalla en escala de grises (los sistemas operativos tienen un filtro de accesibilidad para eso) y pregúntate si se sigue entendiendo. Un error con ícono y texto se entiende; uno con solo color, no.
Zoom al 200%
Muchas personas con baja visión agrandan la página. El criterio 1.4.4 Cambio de tamaño del texto pide que se pueda llegar al 200% sin perder contenido ni funcionalidad. La prueba: zoom del navegador al 200% y recorrer los flujos críticos. Lo que aparece: textos que se cortan, botones que se superponen, menús que tapan el contenido.
Reflujo a 320 píxeles
El criterio 1.4.10 Reflujo pide que el contenido se pueda leer en un ancho de 320 píxeles CSS sin scroll en dos direcciones: la página se reacomoda en una columna y se lee bajando, sin moverse a los lados.
Equivale a usar zoom al 400% en una pantalla de escritorio, y se prueba fácil: herramientas de desarrollo, modo responsive, ancho de 320.
Una excepción razonable: una tabla ancha puede tener su propio scroll horizontal dentro de una caja (como las tablas de este curso en celular). Lo que no puede es empujar toda la página.
Lo que se automatiza aquí
El contraste de textos es de lo poco que las herramientas automáticas detectan bien, y conviene que corra en cada cambio. Zoom, reflujo y el uso del color, en cambio, siguen necesitando a una persona que mire. Es el tema de la próxima lección.
Compruébalo
0/3Responde sin mirar atrás. Verás la explicación al instante.
1. ¿Qué contraste mínimo pide WCAG en nivel AA para texto normal?
2. Un formulario marca los campos con error solo poniéndolos en rojo. ¿Qué problema hay?
3. ¿Qué pide el criterio 1.4.10 Reflujo?
Reto: contraste y reflujo de tus flujos
Mide el contraste de los textos secundarios, los textos de los botones y los bordes de los campos de tus tres flujos críticos.
Pon el ancho de la ventana en 320 píxeles (con las herramientas de desarrollo del navegador) y recorre los flujos. Anota todo lo que se corta o exige scroll horizontal.