Por qué importa el contraste de color para la accesibilidad web
Descubre cómo tu elección de color puede impedir que las personas con discapacidades visuales puedan leer o navegar fácilmente por tu sitio web.
Autor: Missy Jensen, Senior SEO Copywriter
Publicado: 13/10/2023
)
Hay muchas consideraciones de diseño que intervienen en la accesibilidad web, desde la disposición del contenido hasta el uso de imágenes y tipografía.
Sin embargo, la elección de color es una de las primeras cosas que la gente nota al visitar tu sitio. Y si te equivocas, puede afectar la experiencia de usuario de todos los visitantes, no solo de quienes tienen discapacidades visuales.
De hecho, tus elecciones de color —y las relaciones entre esos tonos— pueden tener un gran impacto en la experiencia de usuario. Si eliges colores que no tienen suficiente contraste, partes de tu sitio pueden ser difíciles de leer y navegar para personas con discapacidades visuales.
)
¿Qué es el contraste de color?
Técnicamente, el contraste de color es la relación entre la luminancia de dos colores. En términos más sencillos, puedes pensar en la luminancia como el brillo de un color: el blanco puro tiene la luminancia más alta y el negro puro la más baja.
El contraste se expresa normalmente como una proporción, donde un número más alto significa un mayor grado de contraste entre los dos colores. Por ejemplo, el blanco y el negro tienen una proporción de contraste de 21:1 (la más alta posible), mientras que el blanco y el amarillo tienen una proporción de solo 1.07:1.
Cuando dos colores se superponen —por ejemplo, cuando tienes texto de un color sobre un fondo de otro tono— los beneficios de una alta proporción de contraste se hacen evidentes. Leer texto blanco sobre fondo negro es mucho más fácil que leer texto blanco sobre fondo amarillo.
Comprueba el contraste de color
)
Utiliza un comprobador de contraste de color para ver si tus colores cumplen los requisitos de las Pautas de Accesibilidad para el Contenido Web (WCAG).
)
¿Por qué importa el contraste de color?
Para muchas personas con discapacidades visuales, el contraste de color puede ser la diferencia entre un sitio fácil de leer y navegar, y uno completamente ilegible. Muchos tipos de discapacidad visual —desde miopía e hipermetropía hasta retinopatía diabética y degeneración macular— pueden dificultar la lectura del texto cuando el contraste de color es bajo.
El bajo contraste también puede causar problemas a las personas con daltonismo, incluso si su vista es por lo demás perfecta. Si dos colores bastante diferentes tienen una luminancia casi idéntica, pueden ser casi imposibles de distinguir.
)
El contraste de color también juega un papel importante en la experiencia de usuario de la población envejecida. La agudeza visual normalmente empieza a disminuir cuando las personas cumplen 70 años(opens in a new tab), incluso si sus ojos siempre han estado sanos.
Uno de los problemas visuales más comunes que experimentan las personas mayores es la baja sensibilidad al contraste(opens in a new tab). Si tu sitio web no está diseñado pensando en un contraste de color accesible, corres el riesgo de excluir a un gran porcentaje de visitantes de utilizar tus servicios en línea o comprar tus productos online.
)
Contraste de color y leyes de accesibilidad
La Ley de Estadounidenses con Discapacidades(opens in a new tab) (ADA) es una de las legislaciones clave que prohíbe la discriminación por motivos de discapacidad. Como la ADA se promulgó en 1990, no incluye lenguaje directo sobre internet ni criterios legales específicos para implementar la accesibilidad digital.
En su lugar, los tribunales y el Departamento de Justicia (DOJ) se basan en las Pautas de Accesibilidad para el Contenido Web(opens in a new tab) (WCAG), el estándar internacional de facto para la accesibilidad digital.
Según la ADA, las WCAG se citan casi universalmente en demandas y acuerdos legales, y los precedentes legales muestran que cumplir con las WCAG es clave para la conformidad con la ADA.
Además de la ADA, la Ley Europea de Accesibilidad(opens in a new tab) (EAA) y la Ley de Accesibilidad para los Ontarianos con Discapacidades(opens in a new tab) (AODA) también se basan en los estándares WCAG para la accesibilidad.
)
¿Qué dicen las WCAG sobre el contraste de color?
Según el Criterio de Éxito (SC) 1.4.3 de las WCAG: Contraste (Mínimo)(opens in a new tab), la presentación visual del texto y de las imágenes de texto debe tener una proporción de contraste de al menos 4.5:1.
Hay tres excepciones al requisito de contraste de 4.5:1: texto grande, texto incidental y logotipos.
Texto grande: El texto grande es más fácil de leer, por lo que el requisito de contraste se reduce a 3:1. Las WCAG definen texto grande como texto de 18pt o mayor, o de 14pt o mayor si es en negrita.
Incidental: El texto o las imágenes de texto que forman parte de un componente de interfaz de usuario inactivo, que son pura decoración, que no son visibles para nadie o que forman parte de una imagen que contiene otro contenido visual significativo, no tienen requisito de contraste.
Logotipos: El texto que forma parte de un logotipo o nombre de marca no tiene requisito de contraste.
Es importante probar activamente tus proporciones de contraste, porque no siempre es obvio qué combinaciones de colores tienen bajo contraste. Por ejemplo, el texto blanco sobre fondo rojo liso (que usan muchas marcas en muchos sitios web) tiene una proporción de contraste de solo 3.99:1. Eso significa que solo cumple con las WCAG si se usa con fuentes grandes o en negrita.
)
¿Cómo puedo hacer mi sitio web más accesible?
Aquí tienes dos consejos rápidos para asegurarte de que tus colores sean accesibles:
No uses el color como el único método para transmitir información: Los sitios web suelen usar texto verde y rojo para indicar mensajes de éxito o error. Sin embargo, el daltonismo rojo-verde es la forma más común de deficiencia de la visión del color (CVD). Y recuerda: cualquier persona ciega también es daltónica, así que asegúrate de que cualquier alerta de aprobado/error (como un campo de formulario faltante) también se comunique de forma programática.
Subraya los enlaces en línea: El estilo de tus enlaces en línea debe tener un subrayado: el color no es suficiente. La mayoría de los usuarios esperan ver los enlaces subrayados, y los subrayados ayudan a que las personas con discapacidades visuales puedan identificar los enlaces.
¿Quieres asegurarte de que tus colores sean accesibles? Prueba cualquier combinación de colores en tu sitio usando el Comprobador de Contraste de Color gratuito de AudioEye.
O haz un análisis gratuito de cualquier URL para identificar problemas de accesibilidad en tu sitio web.
Compartir artículo
)
)
)