Cómo comprobar el contraste de color según WCAG
Una pareja de colores que se ve bien en tu monitor puede fallar WCAG para tus usuarios. Pega los dos valores HEX, lee la relación exacta y ve de un vistazo qué umbrales supera, antes de que la paleta entre en el sistema de diseño.
Paso a paso
Abre el comprobador de contraste
Inicia el comprobador gratuito; el cálculo se ejecuta en tu navegador.
Introduce el color de primer plano
Escribe el color del texto o icono como valor HEX, por ejemplo #0F172A.
Introduce el color de fondo
Escribe la superficie sobre la que se asienta, por ejemplo #FFFFFF.
Lee la relación
La pareja se puntúa con la fórmula WCAG: #0F172A sobre #FFFFFF da 17,85:1 y supera AA y AAA para texto normal y grande.
Comprueba todos los umbrales
Ve evaluados por separado AA (4,5:1), AAA (7:1), texto grande (3:1) y el nivel 3:1 para componentes de interfaz, con una vista previa en vivo de la pareja.
Consejos para acertar a la primera
Intercambiar primer plano y fondo nunca cambia la relación (la luminancia más clara siempre va arriba), pero la vista previa puede verse distinta en contexto.
Texto grande significa al menos 18 puntos, o 14 puntos en negrita, en términos de WCAG 2; la herramienta informa de la relación pero no puede deducir el tamaño o peso de fuente renderizado.
Solo se evalúan colores HEX opacos: la composición alfa, los degradados y las imágenes de fondo quedan fuera del cálculo, y una relación aprobada por sí sola no hace accesible una interfaz.
Preguntas frecuentes
¿Qué cuenta como texto grande en las comprobaciones WCAG mostradas?
WCAG 2 define el texto a gran escala como al menos 18 puntos, o al menos 14 puntos en negrita. La herramienta informa de la relación y el umbral, pero no puede deducir el tamaño o peso de fuente renderizado de tu interfaz.
¿Intercambiar los dos colores cambia la relación de contraste?
No. La relación siempre coloca la luminancia más clara sobre la más oscura, así que el orden de primer plano y fondo no cambia el resultado numérico.