¿Mis colores son accesibles?

En este artículo, comprenderá la accesibilidad del color y las herramientas que lo ayudarán a tomar buenas decisiones de contraste de color.

Tabla de contenidos

• ¿Qué es el contraste de color?
• ¿Qué es la accesibilidad del color?
• Cómo mejorar la accesibilidad del color
• Herramientas para comprobar manualmente la accesibilidad del color

El contraste de color se mide como una proporción de dos colores. La diferencia en "luminancia" o brillo de dos colores se conoce como contraste de color.

Lo que más nos preocupa es la distinción entre el contenido central y su fondo en una aplicación web típica (la diferencia de los textos o botones en el fondo). El texto, los íconos, los enlaces, los elementos de formulario, los botones y otros controles personalizados son componentes comunes del contenido principal.

Por lo tanto, si el contraste es demasiado bajo, muchos usuarios no podrán distinguir entre el contenido de primer plano y el de fondo.

Mientras diseña, debe comprender que alguna sección particular de su usuario puede tener defectos oculares, incluidos los daltónicos o los ciegos que usan braille o asistencia de audio (lo que implica el uso de texto alternativo en las imágenes).

Por lo tanto, el tema de la accesibilidad es importante para el diseño, ya que todo lo que diseñe debe ser lo suficientemente inclusivo para acomodar a todos los que tienen un defecto. Ya que sería grosero/muy injusto crear una aplicación o un sitio solo para personas con una visión perfecta.

El daltonismo no solo significa que las personas solo ven en blanco y negro, más del 99% de las personas daltónicas pueden ver el color. Hay diferentes tipos de daltonismo;

• deuteromalia; hace que todo parezca descolorido
• protanopía; que hacen que las cosas se vean verdes
• Verdoso; hacer que las cosas tengan tonos rosados
• Monocromacia; sufren de daltonismo total, las cosas son monocromáticas

https://www.boredpanda.com/different-types-color-blindness-photos/?utm_source=uxdesign&utm_medium=referral&utm_campaign=organic

¿Qué es la accesibilidad del color?

WCAG {pauta de accesibilidad de color del sitio web} se considera el punto de referencia para la accesibilidad del sitio web creado por el consorcio de la red mundial (w3c). Este es esencialmente el estándar de oro para las mejores prácticas de accesibilidad web.

Los estándares WCAG tienen 12–13 pautas. Las pautas están organizadas bajo 4 principios: perceptible, operable, comprensible y sólida .

Para cada directriz, hay criterios de éxito comprobables . Los criterios de éxito se encuentran en tres niveles: A, AA y AAA .

Los criterios de éxito son los que determinan la “conformidad” con las WCAG. En otras palabras, para cumplir con las WCAG, el contenido debe cumplir con los criterios de éxito. Los detalles se encuentran en la sección de Conformidad de las WCAG .

Consulte la descripción general de las Pautas de accesibilidad al contenido web (WCAG)

Además de ser una buena práctica ética, el incumplimiento de los requisitos normativos de accesibilidad puede tener consecuencias legales.

En 2017, los demandantes presentaron al menos 814 demandas federales relacionadas con sitios web supuestamente inaccesibles, incluidas varias acciones colectivas.

Sección 508 de la Ley de Rehabilitación de 1973;

Establece que cuando las agencias desarrollen, adquieran o mantengan tecnología de la información y la comunicación (TIC), que sea accesible para las personas con discapacidad. .

El W3C describe sus pautas para la accesibilidad web dentro de las WCAG 2.1 .

Cómo mejorar la accesibilidad del color

1. Agregue suficiente contraste:

2. Usar las herramientas adecuadas:

¿Cómo se verifica esto? Puede preguntar, las siguientes herramientas pueden ser de gran ayuda tanto para acceder como para ajustar el contraste de color del fondo y el contenido principal.

• De colores
• A11y para los usuarios del software de código abierto Figma; a11y es un complemento excelente para el complemento de accesibilidad de color de Figma.
• Lighthouse, que es una extensión de Chrome para detectar qué está mal con el contraste de color del sitio.
• https://colourcontrast.cc/tiene en cuenta el tamaño y el color del texto

No confíe en los colores solo para transmitir mensajes efectivos, use los íconos correctos también para indicar claramente lo que está sucediendo como en los estados de error.

La imagen a continuación es una representación de imagen que explica la combinación de colores y la buena iconografía para transmitir un mensaje.

3. Documentar y socializar el sistema de colores.

Un sistema de diseño ayudará a crear referencias cuando sea necesario para que todos tengan claro el uso, lo que reduce la confusión.

https://www.w3.org/TR/WCAG21/para darle excat y más detalles sobre la accesibilidad del color.

Para obtener detalles completos Pautas de accesibilidad al contenido web (WCAG) 2.1 (w3.org)