Use un alto contraste de color para diseños más asequibles

Las altas tasas de abandono a menudo se deben a la poca visibilidad de un sitio web. Cuando la fuente es demasiado pequeña o ilegible, cuando hay demasiada distracción o no hay suficiente espacio en blanco, muchas personas simplemente Abandonar el sitio sin pensar.

Una de las razones más comunes para el retiro temprano es la mala elección Esquemas de color que reducen la legibilidad Contenido.

De acuerdo a Estadísticas de la OMS, hay aproximadamente 285 millones de personas con discapacidad visual en todo el mundo, muchas de las cuales son parcial o totalmente daltónicas.

Las personas con problemas de visión perciben el color de manera diferente, es decir, Evite el bajo contraste de color Esto es inevitable en nuestro diseño si queremos brindar a nuestros clientes un sitio web accesible y fácil de usar.

estándar web para contraste de color

contraste de color Mide la diferencia de contraste entre dos colores. Cuanto mayor sea el valor, más fácil será distinguir los objetos (texto, imágenes, gráficos) en primer plano y en segundo plano.

Los colores se pueden contrastar de muchas maneras diferentes, p. tono, valor y saturación. El contraste de color se calcula mediante un fórmula Proporcionado por W3C, la principal organización internacional de estándares para la World Wide Web.

Puede haber un valor intermedio 1: 1 (Sin comparación, el primer plano y el fondo tienen el mismo color) y 21: 1 (máximo contraste sólo existe en blanco y negro).

Las últimas Directrices de accesibilidad al contenido web del W3C (WCAG) 2.0 proporciona a los desarrolladores web y creadores de contenido Mínimo (nivel AA) y Mejorado (nivel AAA) Valor permisible de contraste de color.

Se requiere al menos el nivel AA Relación de aspecto de 4,5:1 para texto sin formato, y 3: 1 para texto grande. Es mucho más fácil leer texto grande, como subtítulos, por lo que requiere un contraste de color más bajo.

Si desea lograr AAA con un nivel mejorado, debe diseñar su combinación de colores con más cuidado, ya que requiere al menos Relación de contraste 7:1 para texto normal, y 4.5: 1 GenialNo existe un requisito mínimo de contraste de color para ningún nivel de WCAG si el texto es parte del logotipo o nombre de una marca.

solo en El contraste de color entre cada objeto de primer plano y su fondo es al menos AA.

Las ventajas del alto contraste de color.

Al garantizar una mejor legibilidad, no solo puede complacer a los usuarios con discapacidades visuales, sino también personas que leen su contenido en pantallas pequeñas Por ejemplo, en un teléfono inteligente o reloj inteligente, donde condiciones de iluminación severas, y pantalla de baja calidad.

Las personas también leen más rápido cuando el contraste entre el texto y el fondo es mayor, por lo que es probable que tarden más en aburrirse del contenido del sitio.

Si le preocupa que la aplicación de un mayor contraste afecte negativamente a la estética de su diseño, querrá comprobar El alboroto contrastante Proyectos web que demuestren con ejemplos de la vida real que adherirse a reglas de alto contraste aún puede producir diseños atractivos y geniales.

Aplicaciones que verifican el contraste de color

Hay muchas excelentes herramientas gratuitas en la web para ayudar a los diseñadores a verificar el contraste de color de su sitio web.

La forma más sencilla de probar el contraste de color es elegir el color base con Photoshop o una extensión de navegador adecuada, p. esta Para Firefox, copie el valor a una de las siguientes aplicaciones.

Lo más importante que debes recordar es que siempre lo necesitas. Compare los colores de primer plano, como el color del texto, con el área circundante (Color de fondo).

1. Comprobador de contraste de color WebAim

WebAim (Web Accessibility In Mind) es una organización que promueve la accesibilidad web proporcionando a los desarrolladores soluciones sencillas pero fiables. Comprueba el contraste de color entre muchos otros grandes Herramientas de accesibilidad tal como ondas, una aplicación de accesibilidad general que puede ayudarte Evalúe rápidamente los problemas de accesibilidad de su sitio.

La verificación de contraste de color de WebAim te dice Si su color pasa las pruebas WCAG AA y AAA, para texto normal y grande.

2. Comprueba el contraste de color de Snook

Jonathan Snook, actualmente un desarrollador front-end líder en Shopify, presenta su mano Herramienta de verificación de contraste de color más de diez años. La aplicación Snook te permite Cambiar los valores HSL y RGB Use coincidencias uno a uno entre los colores de primer plano y de fondo Control deslizante de rango conveniente Hasta que se logre un resultado correspondiente al benchmark WCAG 2.0.

comprueba mi color

CheckMyColors de Giovanni Scala le permite verificar el contraste de color de todas las combinaciones de colores en el primer plano y el fondo en el sitio web en vivo.

calcula Contraste de brillo, diferencia de brillo, y Aberración cromática, y le da un informe completo sobre los resultados. Los informes de CheckMyColours pueden ayudarlo en gran medida a comprender cómo mejorar la accesibilidad visual de su sitio web.

diseñador de esquemas de color

diseñador de esquemas de color No es una verificación de contraste de color especial, sino una herramienta Diseñe un esquema de color completo.

Lo incluimos en esta colección porque tiene una función que le permite ver cómo las personas con diferentes tipos de discapacidades visuales perciben su combinación de colores.

Puede probar su color para detectar acromatopia, protanopia, deuteranopia y muchas otras discapacidades visuales. Hay una versión más nueva de la aplicación llamada Paletón Esto permite simulaciones visuales más complejas (también puede probar cosas como pantallas LED podridas o pantallas CRT débiles).

El W3C también le proporciona una enorme Lista de herramientas para evaluar la accesibilidad web Allí puede encontrar muchas otras herramientas para el contraste de color, y esta es útil. Rueda de colores para la accesibilidad.

Consejos para crear un sitio web visual

Si quieres crear un sitio web visualmente accesible, lo mejor Evite usar solo color para transmitir una función o significadoLos ejemplos típicos son iconos que cambian de color dependiendo del estado actual.

Si es posible, siempre Diseñe señales visuales adicionales Esto ayuda a las personas que ven los colores de manera diferente a comprender la función.

nunca olvides Presta especial atención al contraste de color de botones, enlaces y menús.ya que son la forma en que navega por su sitio. Si los usuarios no pueden navegar fácilmente por su sitio, los perderá rápidamente. Colores disponibles para los botones de llamada a la acción también Esencial para buenas tasas de conversión.

Probar el contraste de color al comienzo del proceso de diseño es una buena práctica de flujo de trabajo, ya que puede ser difícil persuadir a sus clientes para que cambien el esquema de color del sitio más adelante en el proceso de diseño.

Ahora lea: Una forma práctica de elegir un esquema de color para un sitio web