Contraste de los enlaces

Silktide encuentra enlaces dentro del texto que se distinguen de las palabras que los rodean únicamente por el color, con una diferencia de color demasiado pequeña para que las personas con deficiencia de la visión del color los detecten. Los enlaces deben ser reconocibles como enlaces, o los lectores no podrán usarlos.

Por qué es importante

Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tiene una deficiencia de la visión del color. Si lo único que identifica un enlace es un cambio sutil de color, estos lectores ven texto normal y nunca saben que el enlace existe. Eso significa navegación perdida, llamadas a la acción perdidas y un incumplimiento de nivel A de : esto está entre los requisitos de accesibilidad más básicos.

Cómo solucionarlo

Hay dos formas de hacer que un enlace en línea sea conforme:

Distinguirlo por algo más que el color: la solución más simple es un subrayado, que es lo que la mayoría de los lectores espera que tengan los enlaces. También funciona un borde, un fondo o un peso de fuente visiblemente mayor.

\/* Enlaces que dependen solo del color *\/
a { color: #4a6da7; text-decoration: none; }

\/* Corregido: el subrayado hace que el enlace sea visible para todos *\/
a { color: #4a6da7; text-decoration: underline; }

Usar un color fuertemente diferente más un estado visible al enfocar y al pasar el ratón (hover): el color del enlace debe tener una de al menos 3:1 con el texto circundante, y el enlace debe cambiar de forma visible (por ejemplo, adquirir un subrayado) al pasar el ratón y cuando reciba .

Cómo lo comprueba Silktide

Buscar enlaces visibles que estén dentro de un bloque de texto, con palabras inmediatamente antes o después. Los enlaces independientes, como los elementos de menú y los botones, no los analiza esta comprobación.
Omitir los enlaces cuyo color, el del texto circundante o el del fondo no puedan determinarse de forma fiable.
Aprobar los enlaces que sean visualmente diferenciables sin depender del color: subrayados, con borde, con fondo o con al menos 200 unidades más de font-weight que el texto circundante.
En caso contrario, medir la relación de contraste entre el color del enlace y el del texto circundante, e inspeccionar cómo cambia el enlace con el foco y al pasar el ratón. Informar del enlace salvo que la relación sea de al menos 3:1 y el estado con foco o al pasar el ratón sea visiblemente diferente.

Solución de problemas

Mis enlaces cambian al pasar el ratón (hover), ¿por qué se marcan?

Un cambio al pasar el ratón por sí solo no es suficiente: el enlace también debe tener al menos una relación de contraste de 3:1 con el texto circundante. Y, incluso juntos, este enfoque solo ayuda a quienes pueden percibir suficientemente la diferencia de color como para intentar pasar el ratón en primer lugar. El subrayado sigue siendo la solución más fiable.

Los enlaces en menús y botones no se marcan

Correcto: esta comprobación solo se aplica a los enlaces rodeados de otro texto, donde el lector tiene que distinguir el enlace de las palabras que lo rodean. Los enlaces que están solos se identifican visualmente por su posición y estilo.