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?
Respuestas:
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.
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!
fuente
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.
fuente
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.
fuente
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:
text-shadow: 2px 2px 4px black;es probablemente un buen punto de partida.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í.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:
rgb(82,102,122)) como punto de partida.fuente
Si ya ha intentado la sombra de texto, creo que la única posibilidad de mantener los mismos colores es hacer un espacio de texto
Estilos
fuente
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.
fuente
"¿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
fuente
(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.
fuente