Accesibilidad y Elección de Colores: 11 herramientas

Introducción

Accesibilidad y elección de colores están profundamente relacionados: debe existir un buen contraste entre los elementos que deban ser diferenciados como, por ejemplo, el texto y su color de fondo. Esto, que es evidente, no siempre es tan obvio de evaluar.

Sobre todo si tenemos en cuenta que existen deficiencias en la percepción del color, colores que para una persona no podrían ser más contrastantes, para otra se vuelven casi indistinguibles.

Accesibilidad y elección de colores: ¿por qué es importante?

Entendemos por contraste a la propiedad que nos permite distinguir unos objetos de otros, o partes de una misma escena como diferentes.

En el ámbito del diseño web, el contraste es importante por varios motivos. Se utiliza para ofrecer una buena legibilidad entre el texto y el fondo, pero también para diferenciar visualmente diferentes regiones de una página.

Pero aproximadamente el 8 % de los hombres y el 1 % de las mujeres tienen algún tipo de ceguera del color, por eso no podemos ignorar la accesibilidad y elección de colores.

Herramientas de Verificación

Color Contrast Analizer.

Color Contrast Analizer (CCA) es una herramienta de escritorio, no es en línea. Podemos cuantificar el contraste de textos y otros elementos visuales. Tiene un cuentagotas, para tomar muestras de color de páginas web u otros diseños. Además, tiene un simulador de ceguera al color, nos simula como lo verían los que padecen los distintos tipos de cegueras de color.

Color a11y

Esta herramienta en línea chequea los contrastes de la página web que se ingresa, es útil, pero a veces se confunde especialmente si hay JavaScript haciendo sus cosas… pero puede identificar problemas reales.

En noviembre de 2022, encontramos que esta página está caída, por supuesto no tenemos forma de saber si esto es temporal o permanente. Está en línea nuevamente.

Contrast Ratio

Una herramienta simple, pero con una interfaz moderna, a pantalla completa para medir el nivel de contraste

WebAIM

Similar a CCA, pero es una herramienta en línea. Como herramienta nos resulta más cómoda CCA, pero este sitio tiene muy buenos artículos. Aquí nos muestran ejemplos de combinaciones que teóricamente pasan las pruebas, pero en los hechos no son accesibles, por ejemplo una combinación de color de texto con determinado color de fondo puede estar perfecta, pero si el texto en vez de ser del color pleno es simplemente el perfil, la accesibilidad se pierde. Para ser más claros, esta es la imagen que muestran

Accesible Color Generator

¿Qué pasa si tenemos colores elegidos que no cumplen los estándares recomendados? En esta herramienta seleccionamos los dos colores con insuficiente contraste. Uno a modificar y el otro no. La herramienta nos encuentra el color más parecido al original que sí cumple con los requisitos.

Accesible Colors

Similar a la anterior, pero mejor, ya que nos da la opción de cambiar cualquiera de los dos colores y tendrá en cuenta tamaño y grosor del texto. Altamente recomendada.

Herramientas para elegir colores

Si nos interesa la accesibilidad y elección de colores, es mejor elegirlos correctamente desde el inicio, veremos algunas herramientas que nos pueden ayudar.

Color Review

Muy interesante si queremos elegir el color y no que lo haga una aplicación. Como las anteriores puede elegirse la norma AA o la norma AAA. Tiene una interfaz muy útil.

Palette.es

Usted elige uno de los colores iniciales posibles y genera aleatoriamente una paleta de colores accesible… es gratis y eso es lo bueno…

ColorSafe

En esta herramienta se elige un color de fondo y se va armando la paleta de forma que todos los colores tengan el contraste suficiente con respecto a ese color de fondo, en las pruebas que hicimos obtuvimos resultados muy superiores a los que obtuvimos con la herramienta anterior.

Accesible Color Palette Builder

Esta herramienta puede resultar sumamente útil. Primero clasificamos los colores, por ejemplo, claros, medios y oscuros. Los vamos eligiendo con total libertad (sin ayuda tampoco) y abajo nos va indicando que combinaciones «aprueban» y cuáles no.

Adobe Color

Adobe Color cuenta con su propia paleta de accesibilidad.

Conclusión

Ya hemos hablado antes de los colores y seguimos hablando de colores en este blog. Como vimos no es un tema tan trivial como parecería, pero hay herramientas disponibles que nos pueden ayudar a hacer mejor las cosas.

Nos hemos centrado en el color y el contraste, pero no puedo terminar este artículo sin aclarar que no podemos usar solo el color para transmitir información: por ejemplo, si queremos informar que hubo un error no alcanza con poner el mensaje en rojo, agreguemos un ícono que lo indique.

Accesibilidad y elección de colores es un tema importante, para escribir esta entrada del blog nos basamos en gran medida en una serie de artículos de https://www.nachomadrid.com/, en concreto este artículo en tres partes: parte 1, parte 2, parte 3.

Si le sirvió el artículo compártalo, si no quiere hacer usted todo este trabajo, contrátenos 🙂