Verificador de contraste
Comprueba si las combinaciones de colores de texto y fondo cumplen las pautas de accesibilidad WCAG.
Relación de contraste
12.63:1
Cómo funciona el verificador de contraste
Comprueba si cualquier par de colores de texto y fondo cumple las pautas WCAG, en los niveles AA y AAA, con vista previa en vivo.
WCAG AA y AAA
Comprueba tus pares de colores con los dos niveles de conformidad de WCAG 2.1. AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA sube el listón a 7:1 y 4,5:1, respectivamente.
Texto normal y grande
La herramienta evalúa el contraste por separado para texto normal (menos de 18px) y texto grande (18px en negrita o 24px normal), ya que el texto grande se lee bien con relaciones más bajas.
Vista previa en vivo
Mira en tiempo real cómo queda exactamente tu combinación de texto y fondo. La vista previa se actualiza al instante cuando cambias los colores y muestra un resultado realista.
Sugerencias inteligentes
Si una combinación no aprueba, la herramienta te sugiere el color más cercano que sí lo hace. Basta un ajuste mínimo para cumplir los estándares de accesibilidad.
Preguntas frecuentes
Para cumplir WCAG AA (el requisito legal más habitual), el texto normal necesita una relación de contraste de al menos 4,5:1 con su fondo. El texto grande (18px en negrita o 24px normal) necesita al menos 3:1. WCAG AAA, el nivel reforzado, exige 7:1 y 4,5:1, respectivamente.
En muchos países, sí. La Directiva de accesibilidad web de la UE, la ADA de Estados Unidos y leyes similares en Canadá, Australia y el Reino Unido exigen que los sitios web públicos y comerciales cumplan WCAG 2.1 AA. Aunque no lo exija la ley, la accesibilidad mejora la usabilidad para todos.
La relación se basa en la luminancia relativa de dos colores, tal como la define la especificación WCAG 2.1. Va de 1:1 (sin contraste, el mismo color) a 21:1 (contraste máximo, negro sobre blanco). La fórmula tiene en cuenta que el ojo humano percibe el brillo de forma distinta en cada parte del espectro.
Sí. WCAG 2.1 exige una relación de contraste mínima de 3:1 para los componentes de la interfaz y los objetos gráficos: botones, bordes de formularios, iconos y elementos de gráficos. Así, los elementos interactivos son visibles para las personas con baja visión.