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
- Inspecciona el elemento y anota el color calculado.
- Localiza el fondo que realmente queda detrƔs de las letras.
- Introduce ambos valores en Contrast Checker.
- 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.
