En este artículo
Para comprobar el contraste del texto sobre imágenes generadas, mide contra el fondo que queda justo debajo de las letras en cada diseño. Empieza por el recorte más estrecho, donde el titular puede ocupar más líneas o caer sobre una zona iluminada. Mantén el texto editable. Muévelo, oscurece la zona de la imagen o añade un fondo sólido y vuelve a probar con la tipografía y las palabras reales.
Fija un objetivo para cada tamaño de texto
Para la web, la explicación de W3C sobre WCAG 2.2 AA indica un contraste mínimo de 4.5:1 para el texto normal y 3:1 para el que cumple la definición de texto grande. Llamarlo titular no basta: comprueba el tamaño y el peso con que se muestra. Una etiqueta pequeña debajo puede seguir necesitando 4.5:1. El mínimo es un punto de partida. Un margen adicional puede facilitar una lectura rápida.
Mide el fondo que pisan las letras
Imagina un cartel web para un taller de cerámica, con un jarrón claro a la derecha y una pared azul oscura a la izquierda. En el ordenador, el titular blanco queda sobre el azul. En un recorte móvil más bajo, la imagen se desplaza y la última línea pasa por una zona beige iluminada. Un promedio de la imagen no detectaría esa zona. En una vista previa al tamaño previsto, oculta el texto temporalmente y conserva la imagen y cualquier capa de sombreado. Toma muestras debajo de las palabras, en especial las zonas más claras bajo letras blancas. Para calcular, usa el color asignado al texto en vez del píxel suavizado de un borde.
Compara la zona fuerte con la débil
Con colores de ejemplo, blanco sobre azul oscuro #253343 da aproximadamente 12.86:1 y blanco sobre beige #B9A78E, 2.34:1. No son muestras de la portada. El azul supera el mínimo para texto normal y el beige queda por debajo de ambos umbrales. Lee toda la línea al tamaño de publicación y busca la relación más baja donde haya letras. Si hay textura o bordes marcados, prueba varios puntos.
Elige una corrección que resista distintos recortes
Intenta primero mover el titular a una zona estable y deja sitio para una traducción más larga. Si la imagen debe ocupar todo el espacio, un degradado localizado puede oscurecer el fondo bajo las palabras sin apagar el jarrón. Mide el punto más débil después de aplicarlo. Si el texto cambia mucho de posición o la foto se sustituye con frecuencia, usa un panel sólido o coloca el texto fuera de la imagen. Blanco sobre #222222 sólido da unos 15.91:1. El panel tapa parte de la foto, así que reserva espacio para él al componer.