Criterios de Perceptible
PerceptiblePauta 1.4 Distinguible
1.4.5Imágenes de texto
Nivel AALo exige la normativa (EN 301 549).
Qué pide
Se usa texto real en lugar de imágenes que contienen texto, salvo logotipos o casos imprescindibles.
A quién ayuda: Personas con baja visión que ajustan tamaño, color o tipografía.
Un caso real
Un banner de rebajas es una imagen con «-30 % en todo».
BienEl banner es texto HTML con estilos sobre una imagen de fondo.
MalTodo el mensaje está dentro de un JPG.
Cómo aplicarlo en código
Texto real sobre la imagen
El texto en HTML se puede ampliar, traducir y cambiar de color. Comprueba el contraste del texto sobre la imagen.
<div class="banner">
<p class="banner-titulo">Rebajas: hasta un 50 % de descuento</p>
</div>
<style>
.banner { background: #16202e url(fondo-rebajas.jpg) center / cover; }
.banner-titulo { color: #fff; font-size: 2.5rem; font-weight: 700; }
</style><img src="banner-rebajas.png" alt="Rebajas: hasta un 50 % de descuento">Cómo comprobarlo
Intenta seleccionar el texto: si no puedes, es una imagen.