ContrastLens
Comprueba el contraste de color según WCAG 2.2 y el nuevo modelo APCA, con vista previa en vivo.
Colores
Tamaño de texto
Vista previa
El veloz murciélago hindú comía feliz cardillo y kiwi.
Aa Bb Cc — 0123456789
Ratio WCAG 2.2
21.00:1
| AA | AAA | |
|---|---|---|
| Texto normal | ||
| Texto grande |
Puntuación APCA
+106.0 Lc
Excelente: seguro para cualquier tamaño o peso de texto.
Cómo funciona la comprobación de contraste de color
La fórmula clásica de WCAG 2.x (criterio 1.4.3) convierte cada color en un valor de luminancia relativa y luego divide el más claro entre el más oscuro:
ratio = (L_más_claro + 0.05) / (L_más_oscuro + 0.05) // Negro (#000) sobre blanco (#FFF) → (1 + 0.05) / (0 + 0.05) = 21.00 : 1 (el máximo) // Blanco sobre blanco → (1 + 0.05) / (1 + 0.05) = 1.00 : 1 (el mínimo)
APCA (Accessible Perceptual Contrast Algorithm) calcula la luminancia con una curva gamma distinta, aplica un ajuste suave para los negros y trata de forma diferente la polaridad texto-claro-sobre-oscuro y oscuro-sobre-claro, generando una puntuación Lc que va aproximadamente de -108 a +106 en lugar de un ratio. Ambos cálculos se ejecutan enteramente con JavaScript nativo en tu navegador.
Preguntas frecuentes
¿Cuál es la diferencia entre el ratio WCAG y APCA?
El ratio clásico de WCAG 2.x (usado por el criterio 1.4.3) es un ratio de luminancia simple entre dos colores, de 1:1 a 21:1. APCA es un modelo más nuevo y complejo del esfuerzo de investigación W3C Silver/WCAG 3 que tiene en cuenta el tamaño de fuente, el peso y la dirección del contraste (texto claro sobre oscuro vs. oscuro sobre claro), generando una puntuación Lc ponderada perceptualmente en lugar de un ratio.
¿APCA ya es un requisito oficial de WCAG?
No. APCA es el algoritmo propuesto para el método de contraste visual del borrador de WCAG 3, pero WCAG 3 aún no se ha finalizado ni adoptado como estándar. Hoy, el criterio 1.4.3 de WCAG 2.2 (el ratio clásico) es lo que se exige formal y legalmente; trata la puntuación Lc de APCA aquí como una guía orientativa, no como una certificación de aprobado/reprobado.
¿Un ratio WCAG aprobado siempre es suficiente?
Es el estándar formal actual, pero no tiene en cuenta el peso de la fuente ni las diferencias de renderizado como intenta hacerlo APCA. Una combinación puede aprobar el ratio clásico y aun así verse más débil de lo esperado en fuentes muy finas; comprobar ambos números da una imagen más completa.
¿Esta herramienta guarda o envía mis colores a algún sitio?
No. Todo el cálculo (luminancia, ratio y la puntuación APCA) se ejecuta localmente en tu navegador con JavaScript nativo; no se sube nada.