El color es un medio que se utiliza para transmitir información y en el diseño web no puede ser un handicap para los usuarios. El problema viene cuando las personas que acceden a nuestra web no pueden diferenciar bien ciertos colores o utilizan dispositivos de salida no visuales.
Por ello, el uso adecuado de los colores permitirá que nuestro sitio web sea accesible e inclusivo.
La información comunicada en la página, deberá estar disponible sin color, por ejemplo mediante el contexto o marcadores (directriz 2.1 Pautas Accesibilidad para el Contenido Web WCAG 1.0).
Otro factor importante es el contraste en la presentación visual del texto, en las imágenes o en el fondo de la web. Si un texto o una imagen tienen poco contrate con su fondo, no podrán ser percibidos por personas daltónicas o con problemas de agudeza visual. Por tanto, podemos decir que un color de fondo y de texto contrastados crea un sitio web más fácil de leer para todos.
Además, una de las técnicas que se utiliza para evaluar el contraste en cualquier diseño web es verlo en escala de grises.
Según las Pautas de Accesibilidad para el Contenido web WCAG 1.0, los colores de fondo y primer plano deben tener suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro (directriz 2.2 Pautas Accesibilidad para el Contenido Web WCAG 1.0).
Además, el contraste mínimo del texto y las imágenes de texto tiene un ratio de contraste de al menos 4.5:1 (directriz 1.4.3 WCAG 2.0).
Con respecto al contraste mejorado, la presentación visual del texto y de las imágenes de texto tiene un ratio de contraste de al menos 7:1 (directriz 1.4.6 WCAG 2.0).
Tanto en el caso del contraste mínimo como el contraste mejorado existen excepciones:
• Textos e imágenes de texto de gran tamaño: tienen una relación de contraste de, al menos, 3:1.
• Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
• Textos de logotipos o nombres de marca: no tiene requisitos de contraste mínimo.
Con respecto a las reglas CSS, se recomiendan ciertas especificaciones para el color:
• Usar números en vez de nombres para colores:
h1 {color: #808000}
h1 {color: rgb(50%,50%,0%)}
• Utilizar las siguientes propiedades CSS:
«color», para el color de primer plano del texto.
«background-color», para el color de fondo.
«border-color», «outline-color» para colores de bordes.
Para colores de vínculos, hacer referencia a las pseudo-clases :link, :visited, y :active.
Finalmente decir que la selección cromática de un proyecto web debe contar con unos pocos colores dominantes que armonicen entre sí. Para ello, analizaremos la psicología del color y dependiendo de nuestro público y del mensaje que queramos transmitir seleccionaremos unos colores u otros.
Puedes participar en este tema en nuestros foros de discusión en el siguiente enlace:
https://www.psicologiadelcolor.es/foros
Artículo publicado por: Anais Gea, parte del equipo de illusion Studio.