Cómo elegir colores accesibles para tu web

Prueba primero el color de tu marca

Comprueba tu color principal sobre blanco y sobre negro antes de diseñar con él. El azul de ejemplo #3366CC alcanza 5,36:1 sobre blanco, lo que cumple AA para texto normal, pero solo 3,91:1 sobre negro, suficiente únicamente para texto grande.

Prueba las dos direcciones: el color como texto sobre un fondo claro, y texto blanco o negro encima del color, por ejemplo en los botones.

Corrige el contraste cambiando la luminosidad

Casi nunca necesitas otro color. Suele bastar con hacerlo algo más oscuro o más claro manteniendo el tono. Eso es justo lo que hace la corrección sugerida de la herramienta:

Crea una paleta con tonos y sombras

Un solo color de marca no basta para toda una interfaz. Los tonos claros (mezcla con blanco) y las sombras (mezcla con negro) del mismo color te dan fondos, bordes y estados de hover que combinan. Para #3366CC, el tono al 50 % es #99B3E6 y la sombra al 50 % es #1A3366.

Usa tonos claros para fondos y sombras oscuras para texto, y comprueba cada combinación de texto y fondo que uses de verdad.

No dependas solo del color

El criterio 1.4.1 de las WCAG, Uso del color (nivel A), dice que el color no debe ser la única forma de transmitir información. Muchas personas con alteraciones de la visión del color no distinguen algunos colores, sobre todo el rojo y el verde.

Subraya los enlaces dentro del texto, añade un icono o una palabra a los mensajes de error y etiqueta directamente las líneas de los gráficos en lugar de usar solo una leyenda de colores.

Lista de comprobación

Antes de publicar, revisa estos puntos:

• El texto principal alcanza al menos 4,5:1 sobre su fondo.
• Los títulos grandes alcanzan al menos 3:1.
• Los bordes de los campos, los indicadores de foco y los iconos alcanzan al menos 3:1.
• Los enlaces, los errores y los campos obligatorios se marcan con algo más que color.
• El texto sobre imágenes o degradados se comprueba contra la parte más clara que hay detrás.