Uso de contraste de color alto para un diseño más accesible
Un alto índice de rebote es frecuentemente causado por la mala accesibilidad visual de un sitio web. Cuando las fuentes son demasiado pequeñas, o apenas son legibles, cuando hay demasiadas distracciones o no hay suficiente espacio en blanco, muchas personas simplemente dejar el sitio sin pensarlo dos veces.
Una de las razones más frecuentes para el abandono temprano es el mal seleccionado esquemas de color que disminuyen la legibilidad del contenido.
Según las estadísticas de la OMS, hay alrededor de 285 millones de personas con discapacidad visual en todo el mundo, muchas de las cuales son parcial o totalmente ciegas al color. Las personas con discapacidad visual ven los colores de manera diferente, por lo que evitando el bajo contraste de color en nuestros diseños es inevitable si queremos proporcionar a nuestros clientes un sitio web accesible y fácil de usar.
Estándares web para el contraste de color
Relación de contraste de color Mide la diferencia de contraste entre dos colores. Cuanto más alto es el valor, más fácil es distinguir el objeto (texto, imagen, gráfico) en el primer plano del fondo.
Los colores pueden contrastar de muchas maneras diferentes, como en matiz, valor y saturación. La relación de contraste de color se calcula mediante una fórmula proporcionada por W3C, la principal organización internacional de estándares para la World Wide Web.
Puede tomar un valor entre 1: 1 (sin contraste en absoluto, El primer plano y el fondo tienen el mismo color) y 21: 1 (el máximo contraste que solo existe entre blanco y negro).
Las últimas Pautas de Accesibilidad al Contenido Web (WCAG) 2.0 de W3C proporcionan a los desarrolladores web y creadores de contenido puntos de referencia para el valor mínimo (Nivel AA) y mejorado (Nivel AAA) de relación de contraste de color aceptable.
El nivel AA requiere al menos Proporción de 4.5: 1 para texto regular, y 3: 1 para texto grande. Es mucho más fácil leer textos grandes como subtítulos, por eso necesita un contraste de color más bajo.
Si desea alcanzar el Nivel AAA que es el nivel mejorado, necesita diseñar su combinación de colores con mayor cuidado, ya que requiere al menos Relación de contraste 7: 1 para texto normal, y 4.5: 1 para grandes. Si un texto es parte de un logotipo o una marca, no hay un requisito mínimo de contraste de color en ningún nivel WCAG.
Solo podemos llamar a un sitio web visualmente accesible si el la relación de contraste de color entre cada objeto en primer plano y su fondo alcanza al menos el nivel AA.
Beneficios de la alta relación de contraste de color
Al garantizar una mejor legibilidad, no solo involucra a usuarios con discapacidades visuales, sino que también Personas que leen tu contenido en pantallas pequeñas. como en un teléfono inteligente o un reloj inteligente, entre malas condiciones de iluminación, y en monitores de menor calidad.
Las personas también leen más rápido cuando hay un mayor contraste entre el texto y el fondo, por lo que es probable que les lleve más tiempo aburrirse con el contenido del sitio..
Si le preocupa que la aplicación de una mayor relación de contraste tenga un impacto negativo en la estética de su diseño, debe revisar el proyecto web Contrast Rebellion que demuestra, con ejemplos de la vida real, que las reglas de alta relación de contraste aún pueden resultar. en diseños atractivos y frescos.
Aplicaciones para comprobar el contraste de color
Hay muchas herramientas gratuitas en toda la web que pueden 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 en su diseño es elegir los colores principales con Photoshop o una extensión de navegador adecuada como esta para Firefox, y copiar los valores en una de las aplicaciones a continuación.
Lo más importante que debes recordar es que siempre debes compare el color de primer plano, como el color del texto, con el área circundante (color de fondo).
1. WebAim Color Contrast Checker
WebAim (Web Accessibility In Mind) es una organización que promueve la accesibilidad web que ofrece a los desarrolladores un comprobador de contraste de color simple pero confiable, entre muchas otras herramientas excelentes de accesibilidad como Wave, una aplicación de evaluación de accesibilidad general que puede ayudarlo. Evalúe rápidamente los problemas de accesibilidad de su sitio..
El Comprobador de Contraste de Color de WebAim te dice Si tus colores pasan las pruebas WCAG AA y AAA., Tanto para textos normales como para grandes..
2. Snook Color Contrast Check
Jonathan Snook, que actualmente trabaja como desarrollador líder de Front-End en Shopify, ha estado alojando su práctica herramienta de verificación de contraste de color durante más de una década. La aplicación de Snook te permite cambiar los valores HSL y RGB del primer plano y el color de fondo uno por uno utilizando controles deslizantes de rango conveniente Hasta que llegue a un resultado que cumpla con los puntos de referencia WCAG 2.0.
CheckMyColours
CheckMyColours creado por Giovanni Scala le permite verificar la relación de contraste de color de todas las combinaciones de colores de primer plano y fondo en un sitio web en vivo.
Se calcula Relación de contraste de luminosidad, diferencia de brillo., y diferencia de color, y le proporciona un informe completo sobre los resultados. El informe de CheckMyColours puede facilitar significativamente su comprensión de cómo puede mejorar la accesibilidad visual de su sitio.
Diseñador de esquemas de color
Color Scheme Designer no es particularmente un comprobador de contraste de color, sino una herramienta para diseñando esquemas de color completos.
Lo incluimos en esta colección, porque tiene una función que le permite ver cómo perciben su esquema de color las personas con diferentes tipos de discapacidades visuales. Puede probar sus colores para ceguera a todo color, protanopy, deuteranopy y muchas otras discapacidades visuales. La aplicación tiene una versión más nueva llamada Paletton que hace posible incluso una simulación de visión más sofisticada (también puede probar cosas como la pantalla LED malísima o la pantalla CRT débil).
W3C también le proporciona una enorme lista de herramientas de evaluación de accesibilidad web donde puede encontrar muchas otras herramientas de contraste de color, como esta útil rueda de colores de accesibilidad..
Consejos para crear sitios web accesibles visualmente
Si desea crear un sitio web accesible visualmente, siempre es una buena idea Evite usar el color solo para transmitir funcionalidad o significado.. Los iconos que cambian de color según su estado actual son ejemplos típicos de esto..
Si es posible, siempre. diseñar señales visuales adicionales que ayudan a las personas que ven los colores de manera diferente en la comprensión de la funcionalidad.
Nunca olvides Preste especial atención al contraste de color de los botones, enlaces y menús., Como son los medios de navegación en su sitio. Si los usuarios no pueden navegar fácilmente en su sitio, los perderá rápidamente. Colores accesibles para botones de llamada a la acción son también crucial para una buena tasa de conversión.
Es una buena práctica de flujo de trabajo probar la relación de contraste de colores lo antes posible en el proceso de diseño, ya que será difícil persuadir a su cliente para que cambie el esquema de color del sitio más adelante en el proceso de diseño..
Ahora lea: Enfoque práctico para elegir el esquema de color del sitio web
