¿Cómo calcular cuánto contraste necesitas en un encabezado si el foco está en el contenido?

Estoy rediseñando un blog dental. Entonces el foco obviamente es el contenido, pueden leer noticias relacionadas, descargar documentos técnicos, ver videos, etc.

Así que quería que el diseño fuera sutil.

Pero el encabezado que de inmediato quise llamar su atención. Usar amarillo para llamar la atención sobre el principal punto de venta del producto principal.

Pero casi parece que hay demasiada atención allí con ese amarillo y un poco de rojo. ¿Cómo puedo calcular cuánto contraste de color sería ideal? ¿Y tal vez debería poner un fondo oscuro detrás del encabezado que se expande a todo lo ancho?

ingrese la descripción de la imagen aquí

Respuestas (1)

No creo que esto sea una cuestión de color, sino de elementos que compiten entre sí (usando colores y otras propiedades). Por ejemplo:

  • Peso y tipo de fuente: mientras que el encabezado usa sans-serif gruesas (particularmente en el logotipo y el título), el contenido usa una negrita pero pequeña serif Georgia. El título rojo, por ejemplo, tiene un tamaño similar al extracto del informe. La primera vez que miré la imagen, me la perdí por completo.

  • Tamaño: si bien el banner en el encabezado es grande, el contenido en sí es bastante pequeño. El encabezado parece más 'relevante' porque es simplemente más grande. ¿Podría ser demasiado grande, tal vez?

  • Espacio en blanco: el contenido puede ser legible debido al espacio en blanco, pero en este caso, la legibilidad juega en contra de la capacidad del contenido para sobresalir. Además, el gráfico que estaba más cerca de la izquierda, pero no alineado a la izquierda, me confundió un poco. Al principio pensé: ¿Ese gráfico es parte del banner? ¿Es otro banner/servicio? Esperaría alguna transición de texto entre el banner y el contenido, una introducción que haga más obvio que el banner no es solo un anuncio, en realidad es una especie de presentación de lo que viene a continuación. Y creo que esto es algo con lo que debes tener mucho cuidado, porque nuestros cerebros llenos de spam tienden a ignorar los banners que parecen anuncios.

  • Color: Creo que no solo hay que fijarse en los colores del menú (línea roja) y del banner (bloques amarillos), sino también los del gráfico, porque también compiten con el resto.

Entonces, para resumir, si bien la atención ciertamente se dirige al elemento principal (el banner), creo que aún debe encontrar una manera de conectar el contenido con él . Como mencionas, usar un fondo podría significar una gran diferencia, ya que el color puede ser tu conector.

Por otra parte, estudios recientes parecen sugerir tamaños de letra más apropiados para personas ciegas. 16px para el tipo de cuerpo es enorme. Sospecho que los estudios se realizaron en dispositivos que no respetan la configuración de píxeles.