Colors

Siguiendo en la línea de confesiones personales, he de decir que además de gustarme las gráficas y la visualización de datos, soy de esos a los que les cuesta horrores diferenciar ciertos colores. Si, soy daltónico. Veamos qué dice la Wikipedia al respecto:

El daltonismo es un defecto genético que ocasiona dificultad para distinguir los colores. El grado de afectación es muy variable y oscila entre la falta de capacidad para discernir cualquier color (acromatopsia) y un ligero grado de dificultad para distinguir algunos matices de rojo y verde. A pesar de que la sociedad en general considera que el daltonismo pasa inadvertido en la vida diaria, supone un problema para los afectados en ámbitos tan diversos como: valorar el estado de frescura de determinados alimentos, identificar códigos de colores de planos, …

El defecto genético es hereditario y se transmite generalmente por un alelo recesivo ligado al cromosoma X. Si un varón hereda un cromosoma X con esta deficiencia será daltónico. En cambio en el caso de las mujeres, que poseen dos cromosomas X, sólo serán daltónicas si sus dos cromosomas X tienen la deficiencia. Por ello el daltonismo afecta aproximadamente al 1.5 % de los hombres y solo al 0,5 % de las mujeres.

Si no habíais oído hablar del tema anteriormente y queréis comprobar si vosotros también pertenecéis a este selecto club, sólo tenéis que hacer alguno de los muchos tests online que existen para determinar si sois daltónicos. Basta con comprobar con las típicas bolas de colores (cartas de Ishihara) que forman números en el interior si sois capaces de ver el número correctamente. Veamos un ejemplo:

Carta de Ishihara
Carta de Ishihara

Otra vez, según la Wikipedia (yo no soy capaz de ver ningún número) el número «74» debe ser claramente visible para los individuos con visión normal. Las personas con tricromacia (otro tipo de disfunción) pueden leer «21», y aquellos con acromatismo (mi caso) no distinguen ningún número.

Curioso, ¿verdad? Primero de todo me gustaría tranquilizarte si no has visto ni el 74 ni el 21. Podrás hacer vida normal y, además, ya tienes un tema de conversación interesante para tus charlas con amigos. Y ahora que hemos visto esto, te preguntarás el porqué de soltarte este rollo si la temática del blog es WordPress. Pues bien, si hay algo que nos da problemas a los daltónicos son los malos diseños gráficos de webs en los que los colores aportan significado o son difíciles de identificar.

Por ejemplo, elegir paletas de colores que combinen rojo y verde es una pésima idea. Hacer textos en color rojo encima de fondos azules es algo que me hace imposible leer nada (recuerdo cómo una plantilla por defecto de Power Point que se hizo bastante popular en su día tenía esta combinación de azul y rojo y cada vez que me encontraba en una presentación que la usaba me volvía loco intentando leer algo). Todo esto es clave para que los visitantes de nuestra web capten el mensaje que queremos transmitir, mejorando la usabilidad. Y ojo, que esto no me lo estoy inventando yo, ya existen guías de usabilidad de organismos tan reconocidos como el W3C o la BBC, entre otros.

Daltonismo y WordPress

El caso de WordPress es muy interesante. Tanto la interfaz del panel de administración como los temas por defecto que vienen con WordPress son una delicia para los daltónicos. Usan colores de alto contraste y no mezclan el significado de los elementos con el color. Y mira que podía ser tentador identificar a las entradas publicadas con el color verde y a los borradores con el rojo. Pero no, los desarrolladores de WordPress han tenido claro desde el primer momento que la usabilidad y acesibilidad son temas de suma importancia.

Por tanto, créeme cuando te digo que el diseño de WordPress es de gran calidad en cuanto a uso de colores (y te lo digo desde mi propia experiencia). Sin embargo, el problema aparece en el momento de instalar plugins de terceros y (en menor medida) temas que cambian el aspecto por defecto. En muchas situaciones, los desarrolladores y diseñadores de estos plugins y temas no tienen en cuenta la accesibilidad de personas con daltonismo en la elección de colores para sus productos.

Y no estamos hablando sólo de desarrolladores pequeños y desconocidos. Incluso podemos encontrar casos en grandes imperios dentro del mundo WordPress, como el que encontré leyendo el blog de Colourblind Nerd (la web ya no parece estar disponible).

En WPrincipiante, usamos el plugin de SEO de Yoast para WordPress. En cuanto a funcionamiento, el plugin es excelente. Sólo hay que ver que ha sido descargado casi 10 millones de veces. Sin embargo, para identificar la calidad de las entradas, utiliza una escala de colores que va del rojo al verde, pasando por el marrón, gris, azul o amarillo. Cada color nos indica un significado diferente, siendo el verde el mejor.

Mal uso de colores por plugin de Yoast
Mal uso de colores por parte del plugin de Yoast

Añadir palabras clave en la entrada y que estas aparezcan en la URL, el contenido, o el título, son aspectos que nos ayudarán a conseguir el ansiado color verde para nuestra entrada, indicando que el SEO es bueno. No obstante, me ha tocado sufrir muchas veces este código de colores. Me explico: si tienes una entrada con un SEO pobre te la marca con el color marrón, pero en mi caso soy incapaz de diferenciar la bolita marrón que el plugin de Yoast usa en la interfaz con la misma bolita de color verde. Por tanto, me es difícil saber si la entrada está perfecta, o si por lo contrario tiene un SEO pobre.

¿Cómo lo podemos mejorar? Pues de forma tremendamente sencilla. Sólo hay que subir a /wp-content/plugins/wordpress-seo/images/ de nuestra instalación WordPress la siguiente imagen para reemplazar a la existente score_buttons.png usada por Yoast:

Usa esta imagen para reemplazar los botones por defecto de Yoast.
Usa esta imagen para reemplazar los botones por defecto de Yoast.

Con esto, podemos ver un resultado de cómo quedaría la escala de colores:

Uso de colores y apoyo en formas mejora la accesibilidad
Uso de colores y apoyo en formas mejora la accesibilidad

Mucho más fácil de interpretar para daltónicos ya que además de colores usa símbolos, y sin perjudicar a otros colectivos. Es una pena que unos desarrolladores tan reconocidos en WordPress como lo son la gente de Yoast, aún no haya tenido esto en cuenta, y eso que ya se comentó en su repositorio de código hace 5 meses, pero nada ha cambiado. De momento, yo ya he reemplazado la imagen por defecto del plugin por la nueva y mejorada en la instalación de WPrincipiante.

La conclusión es clara, si queremos tener a nuestros visitantes contentos, a todos ellos, debemos tener en cuenta estas particularidades. La accesibilidad no sólo ayuda a tus visitantes con problemas, sino que incluso puede ayudar a mejorar tu web en otros aspectos, como por ejemplo, el SEO.

Imagen destacada de Eaters Collective en Unsplash.

6 respuestas a «Daltonismo y WordPress»

  1. Avatar de Víctor Mollá

    ¡Yo hace años que me dí cuenta que formo parte del grupo de los acromatistas!
    «Eres daltónico??? De que color es mi camiseta???»

    1. Avatar de Antonio Villegas

      Si, la típica pregunta. La gente es muy curiosa con el tema 🙂

  2. Avatar de SANTOS GUERRA

    Hola, tu artículo me pareció muy interesante al punto que le escribí un mensaje al autor del plugin y me respondió que lo tomarán en cuenta.
    Me pasó este link.
    https://github.com/Yoast/wordpress-seo/issues/440

    Espero sirva de algo, la verdad es que entiendo tu caso, mi primo usaba Corel Draw por que al pasar encima de las muestras de los colores ponía los nombres encima, para el era de mucha ayuda.

    1. Avatar de Antonio Villegas

      ¡Gracias Santos! Esperemos que lo tengan en cuenta para futuras versiones.

  3. Avatar de xavier
    xavier

    Existe algun plug in para cambiar los colores del sitio automaticamente a colores de alto contraste?

    1. Avatar de Antonio Villegas

      Puedes probar este plugin de accesibilidad, a ver qué tal funciona: https://wordpress.org/plugins/pojo-accessibility/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.