Cómo mostrar mejor el texto sobre una imagen en la página de destino

Quiero hacer algo como esto (ignorando por ahora el hecho de que la imagen aún no está correctamente alineada):

ingrese la descripción de la imagen aquí

Observe el nombre "Barack Obama" en el centro. Quiero mantenerlo de ese tamaño, pero no sé qué hacer para que sea más legible.

Mis opciones son:

  1. Coloque un fondo detrás del texto.
  2. Desenfoque la imagen para que sea un color más plano/único, luego seleccione mediante programación (de alguna manera) el color de mayor contraste.

Para (1), eso es así :

ingrese la descripción de la imagen aquí

Así que para esta imagen:

ingrese la descripción de la imagen aquí

Sin embargo, eso distrae de la imagen general, en mi opinión, al tener este bloque de negro o algún otro color cubriéndolo. Me pregunto si hay otras formas creativas de mostrar el texto aquí. Me pregunto si uno podría arrojar algo de luz sobre lo que podría verse mejor.

Podría colocar el texto con un fondo en la parte inferior o superior de la imagen, pero eso interfiere con los estilos generales de relleno.

También podría simplemente poner el texto en la página de destino y eso es todo, luego se desplaza hacia abajo en una ventana para ver la imagen. Hmm... tal vez eso sea lo mejor.

Preguntarse qué hacen en estos casos los libros con muchos gráficos, como esos libros de sobremesa .

¿Cuál es el uso de este subtítulo? ¿Es solo para identificar al sujeto de la foto? ¿Podrías simplemente usar una leyenda debajo de la imagen? ¿Es necesario que esté sobre ella? ¿Cómo se relaciona esto con las portadas de los libros? ¿Su proyecto será un sitio web interactivo o impreso? ¿Puede editar su pregunta para hacerla más enfocada o agregar más detalles sobre el problema que está tratando de resolver?

Respuestas (1)

Este es el proceso por el que sigo:

  1. Tal como está, sin ediciones, utilizo un comprobador de relación de contraste para ver cuál es mi posición en cuanto al cumplimiento de las WCAG. (hay varias extensiones en Google Chrome que puede usar) o este sitio

  2. Si no paso, aplico una ligera sombra paralela al texto, verifico nuevamente el cumplimiento

  3. Si eso no funciona, retoco la imagen con Photoshop hasta que pase la prueba de conformidad. por lo general, ajustar las curvas es todo lo que se necesita.

  4. Si descubro que paso demasiado tiempo editando una imagen, busco otra imagen que cumpla con mi texto.

En cuanto a cambiar los estilos de texto, podrías hacerlo. Pero por lo general estoy limitado a los estilos de marca del cliente, por lo que me resulta mucho más fácil editar la imagen.

Cómo mostrar mejor el texto sobre una imagen en la página de destino
RespuestasAquíPolítica de privacidad1y, 0v