TOP 7 Aplicaciones de Accesibilidad y Usabilidad para Diseño Web

By | abril 25, 2016

Un punto importante y fundamental dentro del diseño de páginas web es el de la accesibilidad y usabilidad. Este tema no sólo está relacionado a las formas y disposición de los elementos que conforman nuestro diseño web como el título, el área de contenido o el menú de navegación. Los colores y el contraste entre los diversos elementos de nuestros diseños también juegan un rol de suma importancia. Cuando tengamos que definir el color de las letras y el color de fondo de los distintos elementos gráficos, debemos asegurarnos de que el contraste sea suficiente como para que todas las personas que  visiten la página puedan leer y disfrutar de su contenido sin ningún problema.

Si necesitas algunas herramientas que te permitan tomar una decisión acertada en cuanto a la accesibilidad y usabilidad de los colores empleados en tu diseño web, a continuación te presento algunas que me parecen bastante útiles para esta labor:

CheckMyColours

checkmycolours

Esta herramienta evaluará los elementos DOM de tu página web, y buscará aquellos cuyos colores de primer plano y fondo que no tengan suficiente contraste como para que alguien con una visión deficiente pueda diferenciarlos. Las pruebas realizadas por esta aplicación están basadas en los algoritmos sugeridos por la W3C. Puedes acceder a la herramienta en este enlace

 

GrayBit

graybit

GrayBit convierte tu página web a escala de grises (hasta las imágenes). De este modo puedes revisar visualmente aquellas partes difíciles de leer. Solo pon la dirección de tu web y presiona el botón Make it Gray. Puedes probar la herramienta en este enlace.

 

Colour Contrast Visualiser

colour-contrast-visualiser

Con esta herramienta podrás elegir buenas combinaciones de colores para las letras y fondo de los elementos de tus diseños web. Los colores disponibles se van acotando de acuerdo a la elección del color que le hará contraste. Si la combinación no logra suficiente contraste, aparecerá una X en la parte superior derecha. Además cuentas con la ayuda visual del campo de colores que puedes combinar, por ejemplo la zona de color que tiene rayas no logrará suficiente contraste. Otra ventaja de esta herramienta es que podrás obtener los valores RGB, HSB y hexadecimal del color para que lo puedas utilizar en la elaboración de tu diseño web. Descarga la aplicación en este enlace.

 

Color Oracle

color-oracle

La herramienta Color Oracle nos pone en el lugar de aquellos que sufren algún tipo de problema de percepción de colores. De este modo podremos visualizar el mundo, bueno, en realidad sólo nuestra pantalla, tal y como ellos la verían. Así podremos tomar mejores decisiones de diseño a la hora de escoger las combinaciones de colores. Puedes descargar la herramienta en este enlace.

 

AccessColor

accesscolor

AccessColor analizará tu página web y te entregará un reporte con aquellos elementos cuyo contraste y brillo no sean adecuados. Solo tienes que poner el enlace a tu web, presionar el botón check y revisar la tabla de resultados con los errores de diseño. Accede a la herramienta siguiendo este enlace.

 

Accessibility Color Wheel

accessibility-color-wheel

Con esta rueda de colores podrás experimentar diversas combinaciones y ver los resultados al instante. Además en la parte inferior nos muestran cómo es que lo verían aquellos que tienen problemas de visión. Puedes acceder a la herramienta siguiendo este enlace.

 

Color Contrast Verification Tool

color-contrast-verification-tool

HP nos ofrece una simple herramienta para analizar el contraste entre dos colores. El resultado que nos entrega es la proporción de contraste entre ambos colores y el nivel de conformidad con los estándares WCAG. Puedes acceder a esta herramienta en este enlace.

 

foto de freefotouk