Comprobador de contraste de color
Comprueba las relaciones de contraste WCAG entre colores de texto y fondo — AA y AAA para texto normal, texto grande y componentes de UI.
—
Relación de contraste
—
Encabezado de ejemplo
El veloz zorro marrón salta sobre el perro perezoso.
La letra pequeña, los pies de foto y los textos de ayuda usan este tamaño.
Resultados WCAG
—AA texto normal4.5:1
—AA texto grande3:1
—AAA texto normal7:1
—AAA texto grande4.5:1
—Componentes de UI3:1
¿Necesitas colores primero? Prueba Obtener paleta del logo o Obtener paleta de imagen, luego pega los valores hex aquí.
Cómo funciona
Elige un color de texto y un color de fondo con el selector o escribiendo un código hex, valor RGB o nombre de color CSS. El comprobador calcula la relación de contraste WCAG 2.1 y muestra si la pareja cumple AA y AAA para texto normal, texto grande y componentes de UI.
Umbrales WCAG
- AA texto normal — 4.5:1 o más
- AA texto grande — 3:1 o más
- AAA texto normal — 7:1 o más
- AAA texto grande — 4.5:1 o más
- Componentes de UI — 3:1 o más
Consejos
- Enlaza directamente con parámetros URL:
?text=374151&bg=ffffff - Usa Intercambiar colores para probar la combinación inversa.
- Compara con nuestras paletas de colores.