Actualizado: .
WCAG es un conjunto de requisitos de accesibilidad. APCA es un modelo de evaluación del contraste. Lo correcto es comparar APCA con el método de contraste de WCAG 2, no contraponerlo al estándar completo. Hoy APCA puede complementar el diseño, pero no sustituye la evaluación de conformidad con WCAG 2.2.
Qué mide WCAG 2
La relación de contraste se calcula a partir de la luminancia relativa del color más claro y del más oscuro: (Lclaro + 0,05) / (Loscuro + 0,05). Su rango va de 1:1 a 21:1. Si intercambiamos los colores del texto y del fondo, el número no cambia.
El criterio 1.4.3 de nivel AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande. Se considera grande el texto de al menos 18 pt, o de 14 pt en negrita: aproximadamente 24 y 18,67 CSS px, respectivamente. No redondee un resultado para darlo por válido: 4,499:1 no se convierte en 4,5:1. Para AAA, el criterio 1.4.6 fija 7:1 y 4,5:1, respectivamente. Existen excepciones para logotipos, texto decorativo y otros casos.
El borde de un control y su etiqueta requieren comprobaciones diferentes. A la información visual necesaria para identificar un componente, su estado o gráficos significativos se le aplica el criterio 1.4.11, con un umbral de 3:1 respecto a los colores adyacentes y sus propias excepciones. Esto no obliga a dibujar un borde contrastado alrededor de cada botón.
Qué cambia APCA
APCA, Accessible Perceptual Contrast Algorithm, calcula un contraste de claridad denominado Lc. Tiene en cuenta la polaridad: el texto oscuro sobre fondo claro suele producir un resultado positivo; el texto claro sobre fondo oscuro, uno negativo. Un valor negativo no implica mal contraste. Para interpretarlo importan su magnitud y las condiciones de uso.
Separe el cálculo de las recomendaciones tipográficas. La función principal de APCA recibe las luminancias del texto y del fondo. El tamaño y el peso de la fuente intervienen en la interpretación mediante recomendaciones y tablas; no son argumentos de ese cálculo básico.
En las recomendaciones del autor de APCA, por ejemplo, Lc 75 se asocia al texto de lectura con determinados tamaños y pesos, mientras que Lc 60 corresponde a otras condiciones. Esto no establece una regla universal según la cual «cualquier valor superior a 60 cumple». Tampoco se puede tratar Lc como un porcentaje ni convertirlo exactamente en 4,5:1.
¿APCA se convertirá en WCAG 3?
A fecha de 5 de noviembre de 2026, el Working Draft publicado de WCAG 3, del 10 de septiembre de 2026, deja pendiente la elección del algoritmo de contraste. En la sección Text contrast sufficient se indica expresamente que todavía debe determinarse. El propio documento es un borrador de trabajo, no una W3C Recommendation vigente.
Por tanto, decir que «APCA es el futuro que WCAG adoptará necesariamente» convierte una expectativa en una decisión tomada. Es más preciso decir que APCA se desarrolló como candidato a un nuevo enfoque del contraste y resulta útil para una evaluación adicional, pero W3C aún no ha tomado una decisión definitiva. El nombre del paquete npm apca-w3 no le otorga por sí solo carácter normativo.
Ejemplos propios en lugar de una marca de «percepción real»
Los siguientes son nuestros pares de colores, no valores extraídos de una captura ajena. Todos son colores sRGB opacos, sin degradados ni mezclas. El cálculo APCA se realizó con apca-w3 0.1.9, algoritmo 0.0.98G-4g. La ilustración utiliza Arial de 24 px y peso 700; una columna independiente de la tabla evalúa el umbral de 4,5:1 para texto normal.
| Texto / fondo, sRGB | WCAG 2 | APCA | Texto normal AA, 4,5:1 |
|---|---|---|---|
| #FFFFFF / #F26722 | 3,12:1 | -62,70 Lc | No |
| #000000 / #F26722 | 6,74:1 | +46,73 Lc | Sí |
| #428FCC / #FFFFFF | 3,48:1 | +62,10 Lc | No |
| #428FCC / #000000 | 6,03:1 | -39,59 Lc | Sí |
| #FFFFFF / #B54500 | 5,50:1 | -81,88 Lc | Sí |
| #767676 / #FFFFFF | 4,54:1 | +71,57 Lc | Sí |
| #FFFFFF / #767676 | 4,54:1 | -77,04 Lc | Sí |
El blanco sobre #F26722 tiene un contraste WCAG de 3,12:1: insuficiente para texto normal, pero suficiente para el umbral de 3:1 del texto grande. El negro sobre el mismo fondo alcanza 6,74:1, aunque su valor absoluto de Lc es menor. Los modelos evalúan estos pares de forma distinta. Esto no demuestra que nadie pueda leer la etiqueta negra ni que la blanca sea adecuada para todo el mundo.
Observe también #767676 con blanco: al invertirlos, WCAG permanece en 4,54:1 y APCA cambia de +71,57 a −77,04 Lc. Así se ve la diferencia entre modelos matemáticos sin convertirla en una discusión de gustos personales.
La línea «Real perception: ✓» de algunas comparativas populares transmite una certeza injustificada. Una conclusión así requiere participantes, características visuales documentadas, dispositivos, iluminación, tamaño y tipo de letra, una tarea de lectura y un resultado medible. Nuestros ejemplos muestran discrepancias entre evaluaciones; no constituyen ese tipo de investigación.
Los datos del cálculo en JSON incluyen colores de entrada, valores sin redondear, versión de la implementación y hash SHA-256 del archivo fuente. Para reproducirlos, utilice APCAcontrast(sRGBtoY(textRGB), sRGBtoY(backgroundRGB)) de esa implementación; WCAG se calcula con la fórmula anterior tras convertir sRGB a luminancia lineal.
Cómo decidir en una interfaz real
- Fije el objetivo de conformidad y compruébelo con el método de la versión aplicable de WCAG.
- Mida el fondo real en los estados hover, focus, deshabilitado, error y seleccionado, en los temas claro y oscuro. Para texto transparente, tenga en cuenta el color resultante de la mezcla.
- Evalúe también APCA junto con la tipografía, el tamaño, el peso y la función del texto. Anote la versión de la herramienta.
- Si el resultado es dudoso, cambie los colores o la tipografía. No sustituya una comprobación desfavorable por una métrica más conveniente.
- Compruebe la legibilidad en tareas con personas de su público.
Por ejemplo, el texto blanco sobre el naranja más oscuro #B54500 obtiene 5,50:1 y −81,88 Lc. Es un candidato para seguir evaluando que cumple el umbral WCAG AA para texto normal. Ese cambio resulta más productivo que intentar demostrar que una de las muestras anteriores es «objetivamente correcta».
El contraste no debe transmitir todo el significado
Ni siquiera un contraste excelente resuelve un error señalado solo por el color o series de un gráfico diferenciadas únicamente por su tono. Añada explicaciones de los errores, etiquetas, marcadores y patrones de línea. La simulación de deficiencias en la visión del color ayuda a detectar algunos problemas, pero no reproduce la experiencia de todas las personas.
Fuentes y estado de los estándares verificados el 5 de noviembre de 2026.
Aplicar estas prácticas con un asistente de IA
A partir de esta investigación, creamos skills abiertos para Codex y Claude Code que ayudan a analizar y mejorar sitios web y aplicaciones. Accessible UI guía la revisión de la semántica, el teclado, el foco, los formularios y el contraste; Adaptive Interfaces ayuda a adaptar la interfaz al tamaño de la ventana, la escala del texto, el teclado y los dispositivos plegables. El agente examina el proyecto real, propone mejoras fundamentadas y verifica los cambios acordados. Estos skills no sustituyen las pruebas con usuarios y tecnologías de asistencia.
Las prácticas de esta serie están reunidas en el skill Accessible UI en GitHub: semántica, teclado, foco, formularios, contraste y verificación. Las instrucciones están en inglés. Consulte las instrucciones de instalación y los ejemplos de uso en el primer artículo.