Lección 13¿Cómo evaluar la accesibilidad del contenido de una web?
- Noción 90 - Evaluación de la accesibilidad de tu proyecto digital con el uso de herramientas de prueba automatizadas
- Noción 91 - Herramientas para evaluar las opciones de color y contraste
- Noción 92 - Herramientas para evaluar la legibilidad de tu proyecto digital
- Noción 93 - Herramientas para inspeccionar el código de tu proyecto digital
- Noción 94 - Herramientas para probar cualquier otra infracción de accesibilidad
- Noción 95 - Herramientas para evaluar el cumplimiento general de las normas WCAG
- Noción 96 - Prueba la accesibilidad de las páginas web usted mismo con herramientas automatizadas
Noción 91
Herramientas para evaluar las opciones de color y contraste
Competencias objetivo
La importancia de las pruebas automatizadas para elegir los colores correctos
Los colores son una parte esencial de la creación de una mejor experiencia visual para los usuarios. Las combinaciones de colores inaccesibles pueden presentar problemas para los usuarios con discapacidades de aprendizaje, visuales e incluso situacionales.
Los usuarios afectados por esto podrían ser:
- aquellos que trabajan en circunstancias con bajo brillo de la pantalla,
- daltónicos (alrededor del 5% de los usuarios de la web en la actualidad),
- disléxicos, ya que tienen dificultades para procesar el contenido si los colores son demasiado similares o demasiado contrastados (como el blanco sobre el negro),
y muchos otros.
La diversidad de perfiles de estos usuarios no debe desanimarte. Tu mejor opción es seguir los criterios de éxito de la WCAG. Estos establecen que el texto estándar debe cumplir una relación de contraste mínima de al menos 4.5:1, y el texto más grande (18 puntos o más) al menos 3:1.
Enlaces externos para probar la accesibilidad de los colores elegidos
Hay varias herramientas disponibles que pueden probar automáticamente estos requisitos para obtener combinaciones de colores suficientes. Estas herramientas son descargables o están disponibles para su uso en línea.
Te permiten determinar:
- qué combinaciones de colores pueden garantizar una mejor legibilidad del texto
- la relación de contraste de color de dos colores
- cómo se ven las combinaciones de colores para los usuarios daltónicos
Muchos de ellos también ofrecen sugerencias para opciones de color más adecuadas. Todos ellos utilizan los criterios de éxito de la WCAG para los colores como punto de referencia.
Simuladores de daltonismo
Oráculo de color (Colour Oracle) : http://colororacle.org/
Visolve: https://www.ryobi.co.jp/products/visolve/en/
Echa un vistazo a cómo la herramienta Visolve muestra la diferencia entre una imagen original (a la izquierda) y cómo aparece para un usuario con daltonismo (a la derecha):
[imagen]https://thegoodmanager.eu/wordpress/wp-content/uploads/2021/12/O5-N13-G91-e1640078179775.png[/image]
Comprobadores de contraste de color (para botones de texto e interfaz de usuario)
Validador de accesibilidad de contraste de color (Color Contrast Accessibility Validator): https://color.a11y.com/?wc3
Analizador de contraste de color TPGI {TPGI Colour Contrast Analyser (CCA)} : https://www.tpgi.com/color-contrast-checker/
Comprobador de contraste de botón ADITUS (ADITUS Button Contrast Checker): https://www.aditus.io/button-contrast-checker/
La siguiente imagen muestra cómo la herramienta Validador de accesibilidad de contraste de color (Color Contrast Accessibility Validator) evalúa una página:
[imagen]https://thegoodmanager.eu/wordpress/wp-content/uploads/2021/12/O5-N13-G912-e1644584258733.png[/image]
Sugerencias de combinación de colores
Buscador de contraste (Contrast Finder): https://app.contrast-finder.org/
Buscador de contraste tanaguru (tanaguru contrast finder) : https://contrast-finder.tanaguru.com/
Aquí hay un ejemplo de cómo la herramienta Buscador de contraste (Contrast Finder) ofrece sugerencias para combinaciones de colores que cumplen con los estándares WCAG:
[imagen]https://thegoodmanager.eu/wordpress/wp-content/uploads/2021/12/O5-N13-G913-e1644584376684.png[/image]