Color
Contrast

Verifica al instante el contraste de colores según los estándares WCAG AA y AAA — para textos, botones y componentes UI.

Estándar WCAG 2.14 criterios verificadosVista previa en vivo

① Ingresa el color de primer plano ② Ingresa el color de fondo ③ Verifica el contraste WCAG

Primer plano (texto)

Fondo

Presets:

WCAG AA

4.5:1 normal · 3:1 large

WCAG AAA

7:1 normal · 4.5:1 large

Non-text

3:1 UI components (1.4.11)

¿Qué es el contraste de colores WCAG y por qué importa?

Las WCAG (Web Content Accessibility Guidelines) definen relaciones mínimas de contraste entre el texto y el fondo para garantizar legibilidad a usuarios con discapacidades visuales, incluyendo daltonismo y baja visión. WCAG 2.1 Nivel AA requiere al menos 4,5:1 para texto normal y 3:1 para texto grande. El Nivel AAA requiere 7:1 y 4,5:1. La relación se calcula con luminancia relativa — medida perceptual derivada de la linealización RGB (0,2126R + 0,7152G + 0,0722B). Verificar el contraste temprano asegura la accesibilidad legal (ADA, EN 301 549, AODA).

Preguntas frecuentes

El contraste de colores WCAG es un estándar que define la relación mínima de contraste entre el texto y su fondo para garantizar legibilidad a usuarios con discapacidades visuales. Es publicado por el W3C como parte de las WCAG 2.1.

Se calcula usando valores de luminancia relativa derivados de los componentes RGB de cada color. La fórmula es (L1 + 0,05) / (L2 + 0,05) donde L1 es el color más claro y L2 el más oscuro.

WCAG AA es el nivel estándar requerido legalmente: 4,5:1 para texto normal y 3:1 para texto grande. WCAG AAA es el nivel mejorado: 7:1 para texto normal y 4,5:1 para texto grande.

El texto grande es al menos 18 puntos (aprox. 24px) normal o 14 puntos (aprox. 18,67px) en negrita. En esos tamaños se aceptan relaciones de contraste ligeramente menores.

No necesariamente. El contraste aborda la legibilidad, pero el diseño accesible también incluye tamaño de fuente, legibilidad tipográfica, espaciado y contexto.

Pega los códigos HEX de tus colores de marca o UI en ambos campos. Apunta al menos al nivel AA para todo el texto del cuerpo. Usa el botón de intercambio para probar combinaciones invertidas.

El criterio WCAG 2.1 1.4.11 (Contraste no textual) requiere al menos 3:1 para componentes UI frente a colores adyacentes. El texto del botón sigue la regla estándar de 4,5:1.

¿Qué es el contraste de colores WCAG y por qué importa?

Preguntas frecuentes

Explora nuestra red