¿Qué es Verificador de Contraste WCAG?

Un verificador de contraste de color WCAG que calcula la proporción de contraste entre los colores de primer plano y fondo, e indica si la combinación cumple con los estándares de accesibilidad WCAG 2.1 Nivel AA y AAA para texto normal y grande.

El verificador calcula la relación de luminancia relativa según WCAG 2.1 entre dos colores —escritos como hex, rgb(), hsl() o un nombre CSS— y la evalúa contra AA (4,5:1 para texto normal, 3:1 para texto grande) y AAA (7:1 y 4,5:1). También revisa el mínimo 3:1 para componentes de UI como bordes de formulario e iconos. Si la combinación falla, el panel de sugerencias acerca el primer plano a un valor que pase, ofreciendo objetivos AA y AAA.

Cómo usar

1. Introduce o elige un color de primer plano (texto) y uno de fondo: pega hex, rgb(), hsl() o un nombre de color CSS, o usa los selectores de color.
2. Consulta la proporción de contraste y los resultados de aprobado/reprobado para el cumplimiento de WCAG AA y AAA en texto normal, texto grande y componentes de interfaz.
3. Si el contraste no cumple, usa las sugerencias de ajuste de color para encontrar la combinación accesible más cercana.

Cuándo usar

• Auditar colores de marca contra fondo blanco o oscuro antes de publicar una landing.
• Definir estados de botón (normal, hover, deshabilitado) que respeten contraste.
• Revisar placeholders y campos deshabilitados, que suelen caer por debajo de 4,5:1.

Resultado

Un diseñador de interfaces comprueba su azul de marca #3B82F6 sobre blanco #FFFFFF: la proporción 4,5:1 supera el nivel AA para texto grande, pero no el AAA para texto normal. Oscurece el color a #2563EB (5,3:1) para aprobar ambos niveles.

Preguntas frecuentes

¿Qué ratio necesito para que el texto cumpla WCAG AA?

4,5:1 contra su fondo. El texto grande (18pt regular o 14pt en negrita en adelante) baja a 3:1. AAA lo sube a 7:1 y 4,5:1 respectivamente. Componentes de UI, como bordes de input, sólo necesitan 3:1.

¿Por qué mi gris oscuro sobre blanco falla si a mí se ve bien?

La sensación personal y la medición se separan rápido. Un 4:1 luce nítido en pantalla calibrada con buena luz, pero se cae con baja visión, reflejos o monitores antiguos. WCAG fija el listón para el peor caso, no para el mejor.

¿Los iconos y bordes deben tener el mismo contraste que el texto?

No. WCAG 2.1 añadió la regla 3:1 para componentes no textuales: bordes, iconos, indicadores de foco, elementos de gráficos. Las imágenes decorativas están exentas, pero cualquier cosa que comunique información debe alcanzar 3:1 contra los colores adyacentes.

¿Cómo arreglo una combinación que falla sin tocar la marca?

Si el color de marca es intocable, ajusta el fondo. Oscurécelo o aclaralo hasta pasar el ratio. El panel de sugerencias mueve el primer plano en pequeños pasos; aplica la misma idea al fondo si lo necesitas.

¿Hay reglas WCAG para texto translúcido o sobre fotos?

WCAG pide evaluar el peor píxel bajo el texto. Sobre fotografías eso suele significar añadir un velo tintado o una capa sólida detrás. Mide el color realmente renderizado, no sólo el hex de partida.

Herramientas relacionadas