Compruebe el contraste con herramientas gratuitas

Nunca tiene que calcular el contraste a ojo. Las herramientas gratuitas calculan la proporción exacta entre dos colores y le indican al instante si cumple.

El comprobador de contraste de WebAIM es el clásico. Introduzca un color de primer plano y otro de fondo para ver la proporción y los resultados de cumplimiento AA y AAA.

Las buenas herramientas etiquetan cada resultado como Pass o Fail por separado para el texto normal y el grande, de modo que sepa exactamente qué umbral ha superado.

En el propio navegador, el selector de color de DevTools muestra una proporción de contraste en directo y una línea que marca el límite AA mientras ajusta un color.

DevTools lee el color y el fondo computed tal como se renderizan, por lo que prueba los píxeles reales, no el valor que esperaba obtener.

Ejecute axe DevTools o Lighthouse para analizar toda una página de una vez. Marcan cada elemento con bajo contraste, en lugar de analizar un par cada vez.

Muchos comprobadores incluyen un cuentagotas, por lo que puede tomar muestras de colores directamente de un sitio activo o una maqueta sin buscar códigos hexadecimales.

Figma y aplicaciones similares añaden plugins de contraste, para que pueda detectar errores durante el diseño, mucho antes de escribir el código.

Las herramientas comprueban un único par de colores sólidos. En un degradado o una imagen, compruebe manualmente el punto más desfavorable, ya que el contraste del texto puede fallar solo en una parte.

La mayoría de los verificadores le permiten ajustar un color hasta que cumpla los requisitos y le proporcionan un valor hexadecimal válido que puede pegar directamente en su CSS.

Introduzca los valores hexadecimales exactos de su hoja de estilos en un verificador para confirmar que esta combinación supera 4.5:1 antes de publicarla.

Conoció herramientas gratuitas como WebAIM, DevTools y axe, que convierten el contraste en un resultado claro de aprobado o no aprobado. Mida los colores reales y corrija los problemas antes del lanzamiento. ✅