Accesibilidad por contraste y legibilidad

Brand designer, visual concept designer, diseñadores de estrategia de comunicación, diseñadores de service design,… eso es para ustedes.

La elección de una paleta de colores para nuestros productos digitales es una de las cosas que en lo particular me emociona más que otra cosa: con 3 colores y sus variantes un diseño toma vida, una identidad se materializa: la mágia opera.

Ok, pero luego de estar satisfecho de nuestra elección, la realidad nos enfretan a problemas de lectura por falta de contraste entre el color aplicado a la fuente y el color del fondo en el cual se encuentra. Un efecto de vibración.

Una herramienta de Material Design, el Color Tool,  no ayuda al momento de comprobar la accesibilidad de nuestra selección de colores cuando esas se superpone, y actuar en consecuencia: cambiarla o tomarlo en cuenta para definir las reglas de nuestro sistema de diseño (carta gráfica para los principiantes).

Muestra de Color Tool de Material Design
La herramienta Color Tool de Material Design para comprobar el nivel de accesibilidad de nuestra paleta de los colores. © Material Design.

Una buena práctica que les ahorrará dolores de cabeza para resolver en parte este problema de legibilidad.

Resolución del problema de vibración causado por la falta de contraste entre dos elementos gracias a la aplicación de opacidad.
© Material Design.

Podemos aplicar los ajustes siguientes para resolver el  problema:


ajustes de opacidad para evitar el efecto de vibración provocado por la falta de contraste
Observamos una mejor legibilidad del texto al cual se aplico una opacidad (izquierda), mientras que el problema de vibración persiste en el texto sin ajuste de opacidad. © Material Design.

Deja un comentario

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