Saltar al contenido principal
Sábado 14 de marzo - Trucos y buenas prácticas para auditar accesibilidad en Figma¡Apúntate ya!
Volver a la página del blog

APCA: el futuro del contraste en diseño accesible

Tiempo de lectura: 6 minutos
Autor
Cris Montes
Fecha de publicación
16 / 02 / 2026

Una de las primeras cosas en las que pensamos cuando hablamos de accesibilidad es en el contraste.

Y, sin embargo, en cuanto empezamos a aplicar los criterios clásicos, aparecen las paradojas: combinaciones de color que se leen perfectamente no pasan el ratio mínimo, mientras que otras que resultan incómodas o cansadas superan la prueba sin problemas.¿Por qué ocurre esto?

El contraste no es un número: hacia un enfoque perceptual.

El algoritmo de contraste de las WCAG se diseñó para compensar una pérdida de sensibilidad al contraste equivalente, aproximadamente, a una agudeza visual de 20/40, común en personas de edad avanzada. Por ese motivo, el nivel AA fija un umbral mínimo de 4.5:1 para texto normal.

En contextos de baja visión o deficiencias de percepción del color, ese umbral suele elevarse hasta 7:1 para cuerpo de texto, en conformidad con el nivel AAA. 

Como referencia inicial pueden resultar útiles, pero el problema es que estos valores no consideran el contexto real de lectura ni cómo percibimos realmente el contraste.

El primer error de base es tratar el contraste como un parámetro exacto: una cifra que, por sí sola, certifica la legibilidad y la accesibilidad de una combinación de colores. En la práctica, esta simplificación resulta claramente insuficiente, y se hace especialmente evidente en escenarios como los modos oscuros.

Comparativa de estándares de contraste de color a dos columnas.
Comparativa de estándares de contraste de color a dos columnas. La columna izquierda corresponde al estándar WCAG 2 y la columna derecha al estándar APCA. En la columna izquierda se muestran cuatro niveles: WCAG 2 AA a 3:1, donde el color #595959 pasa a 24 píxeles; WCAG 2 AA a 4,5:1, donde el color #757575 pasa a cualquier tamaño; WCAG 2 AAA a 4,5:1, donde el color #757575 pasa a 24 píxeles; y WCAG AAA a 7:1, donde el color #959595 pasa a cualquier tamaño. En la columna derecha se muestran cuatro niveles equivalentes bajo el estándar APCA: APCA menos 60 Lc, donde el color #B1B1B1 pasa a 24 píxeles; APCA menos 75 Lc, donde el color #CBCBCB pasa a 18 píxeles; APCA menos 85 Lc, donde el color #DBDBDB pasa a 16 píxeles; y APCA menos 95 Lc, donde el color #ebebeb pasa a 14 píxeles como mínimo. Cada texto está renderizado en el color exacto que describe, sobre el fondo negro, para ilustrar visualmente el nivel de contraste correspondiente.

La legibilidad no es una propiedad física inherente al color. Es un fenómeno perceptual que emerge de la interacción entre el estímulo visual, el sistema visual humano y un contexto concreto. Un modelo matemático rígido difícilmente puede describir con precisión un proceso biológico no lineal.

Además, el estándar actual se construyó en un contexto tecnológico ya superado. Su fórmula se basa en un cálculo de luminancia relativa desarrollado en la era de los monitores CRT, muy anterior a las pantallas actuales. Hoy sabemos que ese modelo no predice adecuadamente la legibilidad real.

La percepción del contraste no depende de los colores de forma aislada. Varía en función del tamaño del texto, su peso tipográfico, la distribución espacial, el contexto visual y la variabilidad en la sensibilidad del observador, influenciada, entre otros factores, por la edad. Como explica Andrew Somers, creador de APCA, ni el color ni el contraste existen como realidades físicas independientes: son interpretaciones que realiza nuestro cerebro a partir de diferencias de luminancia.

Por eso existen combinaciones “accesibles” que se leen mal y combinaciones “no válidas” que funcionan correctamente. El número no describe la experiencia.

¿Qué combinaciones son más legibles según tu percepción?

Comparativa de 6 botones WCAG y APCA
6 botones en forma distribuidos en dos columnas y tres filas, comparando resultados del estándar WCAG 2. En la columna izquierda, tres botones marcados como WCAG 2 Fail: uno naranja con texto blanco, uno lila con texto blanco, y uno blanco con texto azul claro. En la columna derecha, tres botones: uno naranja con texto negro marcado como WCAG 2 Pass, uno azul oscuro con texto lila claro marcado como WCAG 2 Pass, y uno negro con texto azul claro marcado como WCAG 2 Fail. La imagen evidencia que WCAG 2 puede aprobar combinaciones de bajo contraste perceptivo y rechazar otras que visualmente sí son legibles.

El límite del modelo WCAG

El sistema actual reduce el contraste a un valor binario: cumple o no cumple. Este enfoque presenta dos problemas fundamentales.

La percepción no es lineal.Un pequeño cambio en la luminancia no siempre genera un cambio perceptual equivalente. El ojo humano responde de forma distinta según el rango de luz, algo que la fórmula clásica no contempla.

La percepción no es uniforme.Un color puede parecer más claro u oscuro según el contexto, la saturación o el peso de la tipografía. Tampoco percibimos igual un texto claro sobre fondo oscuro que uno oscuro sobre fondo claro. Una combinación puede cumplir el ratio exigido y, aun así, provocar vibración visual o fatiga.

APCA: del ratio a la percepción

APCA (Accessible Perceptual Contrast Algorithm) no intenta ajustar el modelo existente: lo sustituye por un enfoque basado en ciencia visual, diseñado para aproximarse mejor a cómo leemos texto en pantalla.

En lugar de limitarse a la luminancia relativa, APCA tiene en cuenta:

  • Luminancia perceptual
  • Tamaño y peso tipográfico
  • Polaridad (claro sobre oscuro frente a oscuro sobre claro)
  • Efectos espaciales que influyen en la lectura

El resultado no es binario, sino una métrica continua que aporta información útil para tomar decisiones de diseño.

Cómo usar la calculadora APC

Página web calculadora APCA

Calculadora de Contraste APCA

Entrada de colores: se pueden introducir valores en HEX, RGB o mediante nombres CSS. También admite atajos de grises, que la herramienta expande automáticamente.

Conciencia de polaridad: es importante indicar correctamente qué elemento es el texto y cuál es el fondo. Si es necesario, se puede usar la opción swap para invertirlos, ya que el algoritmo trata de forma distinta el texto claro sobre fondo oscuro y viceversa.

Canal alfa: si el texto tiene transparencia, la calculadora mezcla previamente el color con el fondo para evaluar el tono resultante real.

Resultado: LC

  • Texto oscuro sobre fondo claro: 0 a 106
  • Texto claro sobre fondo oscuro: 0 a −108

Cuanto mayor es la magnitud del valor Lc, mayor es la legibilidad perceptual. El valor de LC necesario depende del tamaño, el peso y la función del texto.

Valores ortientativos por tipo de uso

Tipo de usoRecomendación LcMotivo
Cuerpo de texto (12-18 px)75-90Lectura continua sin fatiga
Contenido secundario60Visible sin estridencias
Texto grande (> 36 px)45-90El tamaño mayor compensa parte del contraste

WCAG 3.0: un cambio de paradigma

APCA es el método propuesto para el cálculo del contraste de color en las futuras WCAG 3.0. Actualmente, estas directrices se encuentran en fase de Working Draft y el algoritmo sigue considerándose experimental.

Aunque todavía no es un estándar oficial, la dirección es clara: el contraste dejará de evaluarse como un ratio universal y pasará a entenderse como una medida perceptual y contextual. Cambia el modelo, cambian los umbrales y cambia la forma de pensar el diseño accesible.

Si quieres empezar a explorar este nuevo enfoque, ya existen herramientas como el APCA Contrast Calculator y plugins para Figma. ¿Los conocías?

Escrito por:

Únete a nuestra comunidad para aprender y estar al día sobre accesibilidad digital.

Recibirás recursos y artículos semanalmente para que puedas aprender, compartir y ser parte de la comunidad de accesibilidad digital.
¿Quieres colaborar en nuestra Newsletter? Escríbenos a hola@weaaare.com