Contraste de color
El texto gris claro sobre blanco queda elegante en un diseño y desaparece en un móvil al sol. El contraste es el fallo de accesibilidad más común de la web, y uno de los más baratos de corregir.
Por Sergio Gualda Última revisión:
Qué falla
El contraste es la diferencia de luminosidad entre un texto, o una forma importante, y lo que tiene detrás. Las WCAG lo miden como un ratio que va de 1:1 (blanco sobre blanco) a 21:1 (negro sobre blanco). Por debajo de cierto ratio, quien tiene baja visión no puede leer el texto, y el resto lo lee más despacio.
Estos son los mínimos del nivel AA, el que piden las leyes y normas:
| Qué | Ratio mínimo |
|---|---|
| Texto normal | 4,5:1 |
| Texto grande (24 px, o 18,66 px en negrita) | 3:1 |
| Iconos, bordes de campos, anillos de foco, líneas de gráficos | 3:1 |
Falla en los mismos sitios en casi todas las webs:
Texto gris. #999 sobre blanco da 2,8:1. Es el hallazgo más frecuente de la web, y suele venir de un sistema de diseño que eligió un gris “suave” una vez y lo usó en todas partes.
Placeholders y textos de ayuda. El texto pequeño y gris bajo un campo, o dentro de él, suele ser el más claro de la página y a la vez el que explica qué hay que escribir.
Botones con el color de marca. El texto blanco sobre un color de marca de tono medio (naranja, azul claro, verde) cae a menudo entre 2,5:1 y 4:1.
Texto sobre imágenes. Un titular sobre una foto puede cumplir por un lado y fallar por el otro.
Bordes de los campos. Un campo con un borde gris muy claro cuesta incluso encontrarlo, y por eso los elementos no textuales tienen su propia regla de 3:1.
Cómo probarlo
Un minuto por página, sin instalar nada.
- Abre la página en Chrome, haz clic derecho sobre un texto y elige Inspeccionar.
- En el panel de estilos, pulsa el cuadradito de color junto a
color. El selector muestra el ratio de contraste y una marca de cumple o no cumple para AA y AAA. - Busca el texto más claro de la página: placeholders, pies de foto, enlaces del pie, precios, fechas.
- Comprueba un botón de cada color, con su texto.
- Comprueba el borde de un campo de formulario y el anillo de foco al llegar con el tabulador.
Para comprobar un solo par, como el color de tu marca sobre blanco, usa el comprobador de contraste: te da el ratio y, si falla, el color más cercano que cumple.
Para revisar una página entera de una vez, el análisis automático es la herramienta adecuada: el contraste es un cálculo, así que el test de accesibilidad gratuito encuentra todas las parejas que fallan y te da el ratio exacto de cada una.
Cómo corregirlo
Oscurece, no rediseñes. La mayoría de fallos se arreglan bajando un gris unos pasos. #767676 es el gris más claro que cumple 4,5:1 sobre blanco, y en pantalla sigue leyéndose como gris.
/* 2,8:1, no cumple */
.pie-foto { color: #999999; }
/* 4,5:1, cumple y sigue viéndose claro */
.pie-foto { color: #767676; }Corrígelo en las variables, no página a página. Si tu web usa variables o un sistema de diseño, cambia el valor una vez (--texto-secundario, --borde, --placeholder) y todos los casos se corrigen a la vez.
En los botones de marca, cambia el texto o el tono. El texto oscuro sobre un color de marca claro suele cumplir donde el blanco no. Si el texto tiene que ser blanco, usa un tono más oscuro del color de marca solo para los botones.
Pon una capa detrás del texto sobre imágenes. Una banda sólida o una capa semitransparente te da un fondo predecible contra el que medir.
.titular-portada {
background: rgb(0 0 0 / 0.6);
color: #fff;
}No dependas solo del color. Los errores llevan un mensaje y un icono, los enlaces dentro del texto van subrayados y los gráficos llevan etiquetas o tramas además de colores.
Por qué importa comercialmente
El bajo contraste no bloquea una compra como lo hace una trampa de teclado. Frena un poco a todo el mundo y deja fuera del todo a algunas personas, y suele estar repartido por todas las páginas. Por eso compensa corregirlo en el origen: unos pocos valores de color cambiados en un solo sitio eliminan decenas de hallazgos de una auditoría, y la web se lee mejor para cualquier visita.