F83Texto sobre imágenes de fondo con poco contraste

Por qué es importante

Es muy habitual en las portadas. Un titular blanco sobre la foto de un cielo, o un texto negro sobre una trama de rayas. Las líneas y manchas de la imagen se mezclan con las letras. Una F puede parecer una E.

Las personas con baja visión o con cataratas son las más perjudicadas. Pero cualquiera tiene problemas al leer el móvil a pleno sol. Si el texto es un botón o un plazo, se pierde información importante.

Cómo evitarlo

1. Ponga detrás del texto una capa de color sólido o semitransparente que asegure el contraste.
2. Elija fotos con una zona tranquila y uniforme para colocar el texto.
3. Mida el contraste con la zona más clara de la imagen si el texto es claro, o con la más oscura si el texto es oscuro.
4. Respete los mínimos: 4,5:1 para texto normal y 3:1 para texto grande (criterio 1.4.3). En el nivel AAA, 7:1 y 4,5:1 (criterio 1.4.6).
5. Revise también la versión para móvil. La imagen se recorta y el texto cae sobre otra zona.
6. Defina un background-color bajo la imagen, por si esta no carga.

Cómo comprobarlo

1. Localice los textos y las imágenes de texto colocados sobre fotos, degradados o texturas.
2. Prueba rápida: mida el contraste entre el texto y la zona de la imagen más parecida a él. Use Colour Contrast Analyser (programa gratuito con cuentagotas) o el selector de color de las herramientas del navegador.
3. Si llega al mínimo, no hay fallo. Si no llega, revise el fondo que hay detrás de cada letra.
4. No confíe en axe ni en WAVE para esto. No pueden medir el texto sobre imágenes y lo dejan para revisión manual.

Ejemplo

Una capa oscura detrás del titular garantiza el contraste, sea cual sea la foto.

.portada {
  background: #1c1c1c url("playa.jpg") center / cover;
}
.portada h1 {
  color: #fff;
  /* Capa oscura detrás del texto: el contraste ya no depende de la foto */
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.5em;
}