Comprobador de contraste
Comprueba la relación WCAG 2.1 y el moderno APCA Lc (borrador WCAG 3) para un par de primer plano/fondo, o cambia al modo paleta para obtener una matriz de contraste completa entre cada color de tu paleta. Simula cuatro tipos de daltonismo, aplica sugerencias automáticas y exporta la paleta como variables CSS o JSON.
Colors are processed entirely in your browser. Nothing is sent to a server.
Cómo usar este comprobador de contraste
- Comprobación de par: elige el primer plano (texto) y el fondo, y consulta la relación WCAG + el APCA Lc con las insignias Aprobado/No aprobado.
- Modo paleta: añade colores (o carga un preajuste) para obtener la matriz de contraste completa entre cada par.
- Activa la simulación de visión (protanopia, deuteranopia, tritanopia, acromatopsia) para probar el daltonismo.
- Si una comprobación falla, haz clic en una sugerencia automática para aplicar el color aprobado más cercano.
- Exporta la paleta como variables CSS o JSON, o envía el par actual a la matriz.
Preguntas frecuentes
¿Qué es APCA y en qué se diferencia de WCAG 2.1?
APCA (Advanced Perceptual Contrast Algorithm) es un modelo de contraste perceptualmente uniforme propuesto para WCAG 3. Modela mejor la legibilidad que la antigua relación 4,5:1 — Lc 75 es el mínimo para texto normal, Lc 90+ es óptimo.
¿Qué niveles de WCAG 2.1 se comprueban?
AA requiere 4,5:1 para texto normal, 3:1 para texto grande (≥18 pt o 14 pt negrita) y componentes de interfaz. AAA eleva el texto normal a 7:1 y el texto grande a 4,5:1.
¿Cómo funciona la matriz de paleta?
Cada color se comprueba frente a todos los demás como texto y como fondo. El número es la relación WCAG; la insignia muestra AA/AAA/grande/no aprobado. Pasa el cursor para ver el valor APCA Lc.
¿Cómo funciona la corrección automática?
Aclara u oscurece el texto de forma lineal hasta que la relación alcanza el objetivo, eligiendo el cambio más pequeño posible. También puedes ajustar el fondo.