Los colores se calculan en tu navegador y no se suben
WCAG AA y AAA • APCA Lc • Cálculo local
Comprobador de contraste de color
Comprueba el contraste entre texto y fondo según WCAG AA y AAA, y consulta el valor APCA Lc. Evalúa texto normal, texto grande y componentes de interfaz desde el navegador.
Comprueba el contraste de color con los criterios WCAG
Introduce un color de texto y otro de fondo para ver la relación de contraste WCAG 2.x, los resultados AA y AAA para texto normal, grande y componentes de interfaz, además del valor de referencia APCA Lc. Ajusta cualquiera de los colores hasta alcanzar el nivel que necesites.
Cómo comprobar el contraste de color
- 1.Define el color de texto y el de fondo con el selector, el campo HEX o los controles HSL
- 2.Consulta cómo se actualizan al instante la relación de contraste y los indicadores AA y AAA
- 3.Ajusta la luminosidad o usa el ajuste automático para alcanzar el nivel necesario para texto normal, grande o componentes de interfaz
- 4.Copia la URL para compartir exactamente la misma combinación de colores
Calcula la relación con la fórmula de luminancia relativa de WCAG 2.x
Muestra el valor de contraste perceptual APCA Lc como referencia adicional
La combinación de colores queda en la URL para repetir o compartir la comprobación
Preguntas frecuentes sobre el contraste de color
¿Se envían los colores a un servidor?
No. La relación de contraste se calcula en el navegador a partir de los dos colores que introduces.
¿Qué significa la relación de contraste?
Compara la luminancia relativa de dos colores en una escala de 1:1, cuando son iguales, a 21:1, para negro sobre blanco. WCAG exige al menos 4.5:1 para texto normal de nivel AA.
¿Qué significan AA y AAA?
Son niveles de conformidad de WCAG. Para texto normal, AA requiere al menos 4.5:1 y AAA 7:1; para texto grande, los umbrales son 3:1 y 4.5:1.
¿Cómo se usa el resultado para texto grande?
Esta fila usa los umbrales WCAG 2.x para texto grande: 3:1 en AA y 4.5:1 en AAA. Confirma además que el tamaño y el peso de tu diseño cumplen la definición de texto grande.
¿Qué es el valor APCA Lc?
APCA es un algoritmo de contraste perceptual considerado en el trabajo sobre WCAG 3. Esta página muestra su valor Lc como indicador complementario; la conformidad sigue basándose en AA y AAA de WCAG 2.x.
¿Cómo ajusto una combinación que no supera el nivel?
Usa el botón de ajuste automático a AA junto a cualquiera de los colores para cambiar su luminosidad hasta 4.5:1 en texto normal. Después puedes afinar tono, saturación y luminosidad con los controles HSL.