Comprobar contraste de colores con WebAIM

Para comprobar contraste con WebAIM, introduce el color del texto y su fondo real. La herramienta calcula una relación y permite contrastarla con los criterios indicados para cada tamaño.

Mide una combinación concreta

1. Inspecciona el elemento y anota el color calculado.
2. Localiza el fondo que realmente queda detrás de las letras.
3. Introduce ambos valores en Contrast Checker.
4. Si el contraste no alcanza el criterio aplicable, ajusta uno de los colores y vuelve a medir.

Interpreta 4,5:1 y 3:1

En el criterio AA de contraste de texto, la referencia habitual es 4,5:1 para texto normal y 3:1 para texto grande según su definición. No marques una etiqueta como grande solo porque destaque visualmente. Consulta las condiciones y excepciones de la norma.

Revisa colores que cambian al interactuar

Mide el texto de un botón en estado normal, hover y foco. Si el texto está sobre una imagen, comprueba los puntos más claros y oscuros que puedan quedar debajo. Una capa de color estable puede facilitar un contraste consistente.

Convierte el resultado en un cambio verificable

Anota el par de colores anterior y el nuevo. Prueba el cambio en todos los componentes que usan esa combinación. Mantén además una señal distinta del color para indicar errores, selección o enlaces cuando sea necesaria.

Consulta la documentación de referencia y la guía relacionada de MasterCodePro.