¿Son los colores de mi web accesibles?

¿A qué nos referimos cuando decimos que unos colores son accesibles?

Según la WCAG los colores que tengan relación entre sí, como un texto sobre un fondo, deben de tener un contraste suficiente para que personas con visión reducida puedan leerlos.

¿Nunca te ha pasado que estás en una web y tienes que hacer esfuerzos por leer un texto? Pues lo más seguro es que estabas ante una web que no ha tenido la accesibilidad en cuenta. Y es que tener una web con colores accesibles no solo mejora la experiencia de usuario a personas con discapacidad visual, sino que también ayudara a mejorar la legibilidad cuando estemos en un entorno mal iluminado, nos pega el sol en la pantalla o nos sintamos cansados.

Como comprobar si los colores de una web son accesibles

Lo primero que has de saber, es que hay varios niveles de accesibilidad. En cuanto al contraste tenemos el AA y el AAA. Con pasar el AA es más que suficiente. Lo comprobaremos mediante el uso de un contrast checker.

Hay que pasar el test a:

• Textos pequeños, que son de 24px o menos en regular o menores de 18px si están en negrita.
• Textos grandes, que son los de entre 18 y 24 píxeles en negrita o superiores a 24px en regular.
• Componentes gráficos, como botones, iconos, formularios ...

Para textos pequeños se exige una relación de 4.5:1.

Para textos grandes y componentes de al menos 3:1.

No es una tarea difícil, pero consume mucho tiempo y se puede volver compleja si tienes que buscar nuevas combinaciones de color. Ten en cuenta que hay que comprobar todas las posibles combinaciones con las que cuente la página web.

Una vez que nuestros colores cumplen con el estándar de nivel AA, podemos decir que nuestra página web es accesible en cuanto a contraste entre colores de las fuentes y el fondo.

Un último consejo: no te pases con el contraste.

Normalmente, miramos los móviles y tablets desde muy cerca y un contraste demasiado alto, sumado al brillo intenso de la pantalla, puede resultar incómodo para la vista.

Así que, aunque siempre hay que diseñar pensando en la accesibilidad, hay que tener cuidado cuando usamos contrastes demasiado elevados, como por ejemplo al usar negro puro (#000000) junto a blanco puro (#ffffff).