Combinacion de colores fondo y letra

Generador de combinaciones de colores

Este artículo es la tercera parte de mi serie “Teoría del color para pantallas digitales”. En él se describe cómo se puede aplicar la teoría del color a las interfaces de usuario de los programas de aplicación y a las páginas web, y se ofrecen muchas pautas para el uso eficaz del color.

Para los fondos detrás del texto, utilice colores sólidos y contrastados, y evite el uso de texturas y patrones, que pueden hacer que las formas de las letras sean difíciles de distinguir o incluso ilegibles. Elija con cuidado las combinaciones de color del texto y del fondo. El contraste de valores entre el cuerpo del texto y su color de fondo debe ser como mínimo de un ochenta por ciento.

Dado que sólo el dos por ciento de los conos de la retina -los fotorreceptores que proporcionan la visión del color- son conos sensibles al azul y que el ojo enfoca el azul por delante y no por encima de la retina, la agudeza visual para la gama azul del espectro es pobre y disminuye con la edad. El rendimiento del usuario en la identificación de símbolos es más pobre con símbolos azules que con símbolos de cualquier otro color. Por lo tanto, evite utilizar tonos oscuros o muy saturados de azul para el texto u otros elementos consistentes en líneas finas sobre un fondo negro u otro fondo oscuro. Asimismo, evite textos o símbolos consistentes en líneas finas en tonos azules muy saturados sobre un fondo blanco u otro fondo claro. El texto en tonos azules desaturados es adecuadamente legible sobre fondos claros. El azul es un buen color de fondo.

Bonitas combinaciones de colores

Cuando creas paletas de colores para tus proyectos de diseño web, ¿estás probando las combinaciones de colores para comprobar el contraste? Si no lo haces, puede que no estés teniendo en cuenta la legibilidad final del diseño y, por tanto, estés perdiendo audiencia potencial.

He estado trabajando en un proceso que me ayude a asegurar un buen contraste de color y legibilidad en mis proyectos. Gracias a algunas herramientas útiles de accesibilidad al contraste de color, creo que tengo algo que está funcionando y quería compartirlo con los demás por si a ti también te resulta útil.

Debo mencionar que estoy lejos de ser un experto en accesibilidad. Mi objetivo aquí es simplemente mostrar que un poco de esfuerzo puede ir muy lejos cuando se trata de seleccionar los colores con una legibilidad óptima en mente.  Consulta el W3C para obtener una explicación más detallada. También puedes consultar Contrast Rebellion para ver el problema del contraste.

Mientras que usted puede utilizar las herramientas de contraste de color para ayudarle a establecer una paleta de colores, también puede utilizar las herramientas para ayudar a encontrar buenas opciones dentro de una paleta existente. En este caso, estoy utilizando una paleta de colores preexistente y mostrando cómo estoy utilizando tintes, tonos y sombras para ayudar a crear más opciones de contraste de color.

Color del texto fondo blanco

Algunos colores pueden ser brillantes y aparecer de forma vibrante sobre un determinado color de fondo, como el azul sobre el negro, pero son opciones de poco contraste. Si, por ejemplo, creara una página con todo el texto azul sobre un fondo negro, sus lectores experimentarían rápidamente fatiga visual.

Además de su propio sentido del diseño, pruebe algunas herramientas en línea para comprobar la elección de colores de su sitio.  CheckMyColors.com probará todos los colores de su sitio y le informará sobre la relación de contraste entre los elementos de la página.

Además, cuando piense en la elección de colores, también debe tener en cuenta la accesibilidad del sitio web y las personas que tienen formas de daltonismo. WebAIM.org puede ayudar en este sentido, al igual que ContrastChecker.com, que pondrá a prueba tus elecciones en función de las Directrices de Accesibilidad al Contenido en la Web.

Un fuerte contraste juega un papel importante en el éxito del diseño de cualquier sitio web. Un contraste adecuado garantiza una experiencia de usuario de calidad y una legibilidad más fácil que contribuirá al éxito de un sitio a largo plazo. Sin embargo, los sitios web con un contraste demasiado bajo pueden ser difíciles de leer y utilizar, lo que tendrá un efecto negativo en la eficacia de cualquier sitio.

Las mejores combinaciones de colores en la ropa

El contraste de los colores es un problema de accesibilidad web que a menudo se pasa por alto. Las personas con baja visión o daltónicas pueden tener dificultades para distinguir el texto del color de fondo si el contraste es insuficiente. Hay casi tres veces más personas con baja visión que con ceguera total; y una de cada doce personas tiene algún tipo de deficiencia cromática. Por lo tanto, es fundamental tener en cuenta un contraste adecuado entre el texto y el fondo.

Para la conformidad con el nivel AA, el criterio de éxito 1.4.3 de las WCAG 2.0 recomienda que el texto normal tenga una relación de contraste mínima de 4,5:1 y que el texto grande (de 18 puntos o 14 puntos en negrita) tenga una relación de contraste mínima de 3:1. Estas proporciones se han calculado científicamente para garantizar que el texto pueda ser leído por las personas con baja visión moderada y que el contraste sea suficiente para quienes tienen deficiencias cromáticas. Una pregunta habitual que se hacen los diseñadores de páginas web al abordar el contraste de colores es qué colores deben evitar. No se trata tanto de evitar los colores como de garantizar que los colores utilizados en el diseño web tengan el contraste adecuado.

Museo estatal