Cómo usar: Verificador de contraste APCA
- Introduce los colores del texto y del fondo (en cualquier formato CSS).
- Lee el valor Lc: cuanto más alto, más legible. Los valores negativos indican texto claro sobre fondo oscuro.
- Revisa la tabla de usos para ver si la combinación sirve para texto corrido, titulares o solo para elementos que no son texto.
- Compara con la proporción de WCAG 2 que se muestra junto a él, que sigue siendo hoy el estándar legal y de auditoría.
¿Qué es APCA?
APCA (Accessible Perceptual Contrast Algorithm), desarrollado por Andrew Somers para el W3C, es el método de contraste propuesto para las próximas pautas WCAG 3. En lugar de una proporción como 4,5:1, devuelve un valor de contraste de luminosidad Lc de aproximadamente 0 a 106 (positivo para texto oscuro sobre fondo claro, negativo para texto claro sobre fondo oscuro). Modela cómo la visión humana percibe realmente el contraste, incluido el efecto del tamaño y el grosor de la fuente.
¿Por qué APCA en lugar de la proporción de WCAG 2?
- Sensible a la polaridad: WCAG 2 trata igual el blanco sobre negro y el negro sobre blanco, pero nuestros ojos no. APCA les asigna puntuaciones distintas.
- Mejor con el modo oscuro: la fórmula de WCAG 2 sobrestima el contraste en pares de colores oscuros, así que algunas combinaciones “aprobadas” en tema oscuro son difíciles de leer. APCA detecta estos casos.
- Menos falsos suspensos: algunos pares de tonos medios legibles, como texto blanco sobre botones naranjas, no superan WCAG 2, mientras que APCA los valora de forma más realista.
Cómo leer el valor Lc
| Lc | Adecuado para |
|---|---|
| 90+ | Recomendado para texto corrido y lectura prolongada |
| 75 | Mínimo para texto corrido (~18px normal) |
| 60 | Otro texto de contenido (~24px normal o 16px negrita) |
| 45 | Titulares grandes y etiquetas de interfaz grandes |
| 30 | Texto de marcador de posición, estados deshabilitados, iconos grandes |
| 15 | Mínimo para elementos que no son texto, como separadores |
Estas son pautas simplificadas de “nivel bronce”; el enfoque completo de APCA usa tablas de consulta por tamaño y grosor de fuente.
¿Debo usar APCA hoy?
WCAG 3 sigue siendo un borrador de trabajo y la versión final de APCA puede cambiar. Las leyes y auditorías de accesibilidad (incluida la Ley Europea de Accesibilidad, que referencia WCAG 2.1 mediante EN 301 549) siguen usando la proporción de WCAG 2. El enfoque práctico: cumple WCAG 2 AA para el cumplimiento y usa APCA como segunda opinión, especialmente en temas oscuros y en textos grandes de titulares. Revisa WCAG 2 en detalle con el Verificador de contraste.
También se busca como: contraste apca, wcag 3, calculadora apca, contraste lc, contraste perceptual, accesibilidad de color, contraste de texto, verificador apca wcag 3.
Herramientas que combinan con: Verificador de contraste APCA
- Simulador de daltonismo — Sube una captura o un diseño y míralo a través de ocho tipos de deficiencia en la visión del color, uno al lado del otro.
- Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
- Conversor OKLCH — Explora el espacio de color OKLCH, perceptualmente uniforme, con deslizadores en vivo, comprueba si un color cabe en sRGB y copia los valores HEX, RGB y HSL equivalentes como fallback.
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.