Calculadora APCA (WCAG 3.0)

Calcula el contraste usando el algoritmo APCA, el nuevo estándar propuesto para WCAG 3.0

APCA - Contraste WCAG 3.0

Algoritmo Avanzado de Contraste Perceptual. Más preciso que WCAG 2.1 para pantallas modernas y considera tamaño/peso de fuente.

Configuración de Fuente

Vista Previa de Texto

Texto secundario a menor tamaño

APCA LcWCAG 3.0
+106.0
Pasa para la fuente seleccionada
Comparación WCAG 2.1Legacy
21.00:1
AA ✓AAA ✓

Recomendaciones de Uso

✓ Lc ≥ 90
Texto de Cuerpo (14-16px)
✓ Lc ≥ 70
Texto Grande (24px+)
✓ Lc ≥ 55
Titulares (36px+)
✓ Lc ≥ 60
Componentes UI
✓ Lc ≥ 45
Elementos No Textuales
✓ Lc ≥ 30
Placeholder/Deshabilitado

Acerca de APCA

APCA es el nuevo algoritmo de contraste propuesto para WCAG 3.0. A diferencia de WCAG 2.1, considera la polaridad del texto (claro/oscuro), tamaño y peso de fuente para una evaluación de accesibilidad más precisa.

Cómo funciona

APCA (Advanced Perceptual Contrast Algorithm) es el nuevo algoritmo de contraste propuesto para WCAG 3.0. Representa una mejora significativa sobre el método de contraste de WCAG 2.1.

¿Por qué APCA es mejor?

  • Más preciso: Considera cómo percibimos realmente el contraste en pantallas modernas
  • Contexto tipográfico: Tiene en cuenta el tamaño y peso de la fuente
  • Polaridad: Diferencia entre texto claro sobre fondo oscuro y viceversa
  • Casos de uso: Proporciona umbrales específicos para diferentes elementos UI

¿Qué es el valor Lc?

El valor Lc (Lightness Contrast) es la métrica de APCA. A diferencia del ratio de WCAG 2.1, Lc puede ser positivo o negativo dependiendo de la polaridad (texto claro/oscuro sobre fondo oscuro/claro).

Umbrales recomendados

  • Lc 90+: Texto de cuerpo (14-16px)
  • Lc 75+: Texto mediano (18px)
  • Lc 60+: Texto grande (24px+) y componentes UI
  • Lc 45+: Titulares grandes (36px+) y elementos no textuales

Adopción de APCA

APCA está siendo adoptado por grandes empresas como Google, Microsoft y Adobe. Herramientas como Figma y Adobe XD ya incluyen soporte para APCA.

💡 Ejemplos de uso prácticos

Caso 1: Texto de cuerpo en modo oscuro

Tienes texto gris claro #B0B0B0 sobre fondo oscuro #1A1A2E.

→ WCAG 2.1: 7.2:1 ✅ Pasa AAA
→ APCA Lc: 68 ⚠️ Solo válido para texto de 18px+
→ Para texto de 14px, necesitas Lc 90+ → Usa #E0E0E0 → Lc: 85

Caso 2: Botón primario

Botón azul #2563EB con texto blanco #FFFFFF.

→ APCA Lc: 72 ✅ Perfecto para texto de 16px en negrita
→ WCAG 2.1: 4.5:1 ✅ Pasa AA

Caso 3: Placeholder en input

Input con fondo blanco y placeholder #9CA3AF.

→ APCA Lc: 52 ⚠️ Válido solo para texto auxiliar grande
→ Para placeholder legible usa #6B7280 → Lc: 63

Preguntas Frecuentes

¿Cuál es la diferencia entre APCA y WCAG 2.1?
APCA es más preciso porque considera cómo percibimos realmente el contraste en pantallas modernas. WCAG 2.1 usa una fórmula simplificada que puede dar falsos positivos (colores que "pasan" pero son difíciles de leer) y falsos negativos (colores rechazados que en realidad son legibles).
¿Qué valor Lc necesito para mi texto?
Depende del tamaño: Lc 90+ para texto de cuerpo (14-16px), Lc 75+ para texto mediano (18px), Lc 60+ para texto grande (24px+) y componentes UI, Lc 45+ para titulares muy grandes (36px+).
¿Por qué el valor Lc puede ser negativo?
APCA considera la polaridad del contraste. Un valor positivo indica texto claro sobre fondo oscuro, mientras que un valor negativo indica texto oscuro sobre fondo claro. Lo importante es el valor absoluto |Lc|.
¿Debo usar APCA o WCAG 2.1?
Si necesitas cumplir con regulaciones legales actuales, usa WCAG 2.1. Si quieres optimizar la legibilidad real de tu diseño, usa APCA. Muchos diseñadores usan ambos: WCAG 2.1 para cumplimiento y APCA para optimización.
¿Cuándo se adoptará oficialmente APCA?
APCA está en desarrollo activo para WCAG 3.0. Aunque aún no es un estándar oficial, empresas como Google, Microsoft y Adobe ya lo están implementando en sus herramientas y guías de diseño.