24

Estoy tratando de mejorar un sitio web existente, y esto es con lo que estoy empezando:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

Me parece que esta combinación de colores es difícil de leer. Otros no están de acuerdo, pero hemos acordado que depende mucho del contraste, el brillo y otras propiedades de visualización (incluso el ángulo de visión):

Ya he experimentado un poco con el -webkit-text-stroke, text-shadow(ver el código de seguridad), pero como mejorar las cosas en una pantalla, se pone peor en otro.

¿Qué más puedo intentar para que esto sea más legible en una variedad de pantallas, manteniendo el esquema de color general?

color website-design color-theory

— bers
fuente

22

Siéntase libre de mostrar este comentario a su cliente. Tengo muchos años de experiencia en diseño, y puedo asegurarle que los "otros" en su pregunta anterior, que piensan que es legible, están completamente equivocados :) Todo el esquema debe cambiarse porque está roto sin posibilidad de reparación.

— Mayersdesign

15

Tengo más de 30 años de experiencia como diseñador ... No podría estar más de acuerdo con el comentario de @mayersdesign anterior. ese esquema de color debe ser rechazado de inmediato.

— Scott

66

Primero, debe comprender el propósito de su combinación de colores. En un esquema de color para la interfaz de usuario, tiene sentido usar colores neutros como colores primarios, cualquier color acentuado debe arrojarse con moderación . Piense en YouTube, por ejemplo, ¿qué color le viene a la mente? Rojo y negro, pero eche un vistazo a la página web real de YouTube, es 98% blanco y gris claro. El rojo se usa simplemente como acento.

— Happy Hour Coding

¡Gracias a todos (incluidos los que respondieron)! Solo verifiqué dos veces SE para ver lo que esperaba que fueran 1 o 2 comentarios desde esta mañana, y ahora esto. Aprendí mucho y recibí algunos argumentos convincentes. ¡Gracias!

— bers

1

1995 llamado. Quieren su esquema de color de vuelta.

— Mazura

54

Cambia la mente del cliente.

No hay nada que pueda corregir el hecho de que el texto rojo sobre un fondo azul es una elección extremadamente pobre para la legibilidad porque el contraste es demasiado bajo y porque específicamente el rojo y el azul funcionan mal como colores contrastantes.

Este sitio web webaim.org muestra que el contraste entre sus dos colores es lamentable 1.52: 1

El contraste es importante para la legibilidad.

El contraste del texto es uno de los aspectos más importantes de la legibilidad del texto. Afortunadamente para nosotros, las Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.0 abordan específicamente el contraste de texto y proporcionan pautas que, aunque están destinadas a proporcionar accesibilidad a la web a las personas con discapacidades, también ofrecen buenos consejos en general.

El nivel AA de WCAG requiere una relación de contraste de al menos 4.5: 1 para texto normal y 3: 1 para texto grande y el nivel AAA requiere una relación de contraste de al menos 7: 1 para texto normal y 4.5: 1 para texto grande.

Por lo tanto, el sitio web de sus clientes está en contradicción directa con las pautas profesionales publicadas . También está en contradicción con el gusto estético (en mi opinión profesional)

Todavía puede usar elementos de rojo y azul en un diseño si es necesario. Pero colocar texto rojo de "tamaño de contenido" sobre un fondo azul simplemente va a rechazar a un gran porcentaje de los visitantes de su sitio. En mi opinión, usted tiene la responsabilidad profesional de persuadir a su cliente para que no lo use.

Afortunadamente, los enlaces proporcionados podrían ayudarlo a presentar su caso de una manera más sólida que simplemente argumentando que le resulta difícil de leer. De hecho, es probablemente difícil de leer.

Cromostereopsis

Si eso no fue lo suficientemente persuasivo, intente esto: la cromostereopsis es (¡brevemente!) Una ilusión óptica que causa problemas de profundidad de campo para los espectadores. Es desagradable!

— mayersdesign
fuente

11

Para aclarar, las relaciones de contraste en el documento W3C son mínimas . El no dice que la proporción debe estar entre 4.5: 1 o 7: 1; dicen que debería ser al menos uno de esos, según el nivel de accesibilidad al que se dirija

— Adrian McCarthy

1

Muy buen punto, he actualizado la respuesta para incluir más detalles, especialmente este.

— Mayersdesign

8

Aunque de ninguna manera es perfecto (o incluso bueno), agregar un contorno blanco (u otro) al texto puede ayudar con la legibilidad:

Esto podría ser útil si su cliente insiste en mantener los colores.

— Duendecillo
fuente

Para ser justos, eso solo funciona con el tipo de 36 puntos.

— user8356

Sí, gran concepto. No significa sarcasmo. Y cuanto más lo aplique, mejor podremos leer el texto. Así que tome los contornos blancos hasta el borde de la pantalla ... Guiño, guiño.

— Martin Zaske

8

No puedes Esos tonos de rojo y azul son colores oscuros y saturados, prácticamente vibran uno contra el otro, y ese texto hará que los ojos de las personas sangren. Cualquier desarrollador o diseñador que no se preocupe por la legibilidad del texto debe ser ejecutado fuera de la ciudad en un riel de rubí.

Intenta hacer el rojo MUCHO más claro. Se verá rosa pero será más legible. O use blanco o amarillo pálido en ese fondo. Los fondos oscuros son notoriamente difíciles de legibilidad. Puede tener el mismo color general, un azul verdoso, pero hacerlo mucho más claro. Pero el texto rojo brillante nunca es fácil de leer tampoco, así que simplemente descartaría ese esquema de color para el texto.

— usuario8356
fuente

7

Como se ha señalado, es un contraste de color horrible . También es una mala paleta para personas daltónicas (con daltonismo rojo-azul, la relación de contraste cae a algo muy cercano a 1: 1, que es completamente ilegible).

Su mejor apuesta aquí será convencer al cliente de que no debe mezclar texto y fondos de colores. O colorea el texto o el fondo, no ambos. Intente cargar una maqueta en una herramienta que le permita simular percepciones daltónicas (puede encontrar un par de opciones decentes en línea), y mostrar el resultado a su cliente, lo que debería ayudar significativamente a convencerlos.

Si esa no es una opción, otras cosas que puede intentar para mejorar la legibilidad incluyen (tenga en cuenta que ninguno de estos resuelve el problema del daltonismo, solo ayudan con el contraste o la legibilidad general:

Use una fuente monoespaciada. Suena estúpido, pero esto realmente ayuda a la mayoría de las personas a leer el texto más fácilmente. Obviamente no es Courier New, pero Bitstream Vera Sans Mono (o incluso algo así como Droid Sans Mono) aún debería verse decente, y será algo más legible.
Haga el peso de la fuente, y probablemente el tamaño también un poco. Un texto más grande y audaz es más fácil de leer, independientemente del contraste.
Cambie el esquema de color (es decir, haga que el texto sea azul oscuro sobre un fondo rojo brillante). Suena simple, pero generalmente es más fácil para la mayoría de las personas preparar azul oscuro sobre rojo brillante que al revés.
Agregue una sombra paralela estrecha de alto contraste al texto con un desplazamiento. Lo que quieres aquí no es una mezcla en el fondo, es un borde duro que proporciona un buen contraste. Desplazar la sombra también puede ayudar con esto, especialmente un desplazamiento diagonal simple. También iría con negro aquí en lugar de blanco (desea acentuar el texto, no el fondo, así que busque un alto contraste con el texto). En general, algo similar text-shadow: 2px 2px 4px black;es probablemente un buen punto de partida.
Aligera el rojo significativamente. En este momento, lo estás usando rgb(255,0,0). rgb(255,204,204)Probaría primero con algo como (o posiblemente incluso más ligero), y me ajustaría a partir de ahí.
Oscurece el azul. Algo más cercano rgb(25,51,77)tiene el mismo tono, pero debe ser lo suficientemente oscuro como para que el texto sea más legible.

Una opción más que también ayuda a algunos con el problema del daltonismo:

Desaturar el fondo azul. Si bien no es la mejor opción (sesga un poco el esquema de color), esto debería ayudar a la legibilidad al máximo de cualquiera de las otras cosas que he enumerado, ya que aumentará activamente el contraste. Intentaría un 30% menos de saturación (eso es rgb(82,102,122)) como punto de partida.

— Austin Hemmelgarn
fuente

6

Si ya ha intentado la sombra de texto, creo que la única posibilidad de mantener los mismos colores es hacer un espacio de texto

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Estilos

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— Danielillo
fuente

1

O incluso un blanco liso y duro es mejor

— aloisdg dice Reinstate Monica

1

todavía son difíciles de leer para mí ..

— Happy Hour Coding

@Dylan lo que opinas sobre jsfiddle.net/bersbers/xdkj76L3

— BER

2

Es legible. No creo que sea una buena idea. Pero se puede leer.

— Happy Hour Coding

blog.theteamw.com/2009/11/09/…

— yunzen

5

Debe tener una relación de contraste lo suficientemente alta entre el fondo y el texto (objeto en primer plano) para que sea legible, con una relación de contraste mínima de 4.5: 1. https://www.oss-usa.com/color-check-ada-image-compliance muestra que su fondo y primer plano están demasiado juntos para ser legibles.

A veces, se le debe decir al cliente que el esquema de color no se puede preservar por completo y debe revisarse para cumplir con los requisitos de legibilidad. Obviamente, invertir el texto a un color claro daría el contraste suficiente contra un fondo oscuro.

— Max Tokman
fuente

3

"¿Cómo hacer que el texto sea más legible?" En resumen, no lo haces! La combinación de colores no cumple con las pautas de accesibilidad web y no debe usarse. Se debe utilizar un color de primer plano o de fondo diferente. No importa quién sea su audiencia objetivo, siempre debe tratar de atender a las personas con discapacidad visual, y esta es una solución fácil.

Las relaciones de contraste para sus combinaciones de colores se pueden ver aquí ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrés
fuente

2

(No hay suficientes puntos para comentar)

Puedes intentar agregar un trazo al texto. Estoy usando el término "trazo" en el sentido de Photoshop, básicamente el color del borde / contorno del texto para que sirva como contraste. El negro / blanco debería estar bien (especialmente si juegas con el grosor del trazo), pero imagino que ciertos tonos de rojo / azul también podrían funcionar.

— todas las bicicletas son tomadas
fuente

¿Cómo hago que esta combinación de colores sea más legible?

Cambia la mente del cliente.