Contraste de texto sobre imágenes
Silktide detecta texto colocado directamente sobre una imagen o un degradado, donde el contraste entre el texto y su fondo no puede medirse automáticamente. Estos casos requieren la revisión de una persona para confirmar que el texto es legible.
Por qué es importante
Los banners hero y los fondos fotográficos son uno de los lugares donde el contraste suele fallar con más frecuencia en la práctica. Una foto tiene zonas claras y oscuras, así que un texto que es legible sobre una parte de la imagen puede desaparecer sobre otra; y la imagen puede desplazarse detrás del texto a medida que cambia el tamaño de la pantalla. Las personas con baja visión son las más afectadas, pero el texto sobre una foto recargada fatiga a todo el mundo.
Se aplican los mismos mínimos legales que para el texto normal: exige una de al menos 4.5:1 para texto normal y 3:1 para texto grande (al menos 18 puntos, o 14 puntos en negrita), medido con respecto al área de la imagen detrás del texto.
Cómo solucionarlo
- Revisa visualmente cada elemento señalado. El texto debe cumplir la relación requerida respecto a todas las partes de la imagen sobre las que pueda situarse, incluidos otros tamaños de pantalla en los que la imagen pueda recolocarse.
- Cuando el contraste sea dudoso, añade una superposición sólida o semitransparente entre la imagen y el texto, o mueve el texto fuera de la imagen por completo.
- Elegir imágenes más tranquilas y uniformes detrás del texto también funciona, pero recuerda que los editores de contenido podrían cambiar la imagen más adelante; una superposición es más segura.
- Si el texto es claramente legible, el hallazgo.
Cómo prueba esto Silktide
- Examina cada fragmento de texto visible en la página, omitiendo el texto oculto, el texto dentro de gráficos SVG y cualquier elemento que hayas excluido de la comprobación.
- Identifica el texto cuyo fondo sea una imagen o un degradado en lugar de un color sólido. El texto sobre colores sólidos se mide automáticamente mediante Contraste de texto.
- Omite fondos que no puedan afectar al texto, como imágenes de fondo con tamaño cero y pequeñas imágenes de fondo que no cubren todo el fondo en elementos de lista (normalmente iconos de viñetas personalizados).
- Informa del resto de textos para que los confirmes, mostrando el color del texto y las capas de fondo implicadas. Como una imagen no tiene un único color, la relación no puede calcularse automáticamente.
Solución de problemas
La comprobación marca texto que es claramente legible
Es lo esperado: esta comprobación no puede medir el contraste sobre imágenes, por lo que tiende a mostrarte todos los casos. Revisa y aprueba los que estén bien; se mantendrán aprobados en futuros análisis.
La imagen se ve bien en mi pantalla
Comprueba también anchos de pantalla más pequeños y más grandes. Los diseños responsive mueven el texto con respecto a la imagen, de modo que un texto que se sitúa sobre una zona oscura en escritorio puede quedar sobre una zona clara en móvil.