Accessible Perceptual Contrast Algorithm (APCA) ¿Debemos comenzar a utilizar ya el algoritmo APCA para medir el contraste? ¿De qué herramientas disponemos?

Accessible Perceptual Contrast Algorithm (APCA) es una nueva forma de medir el contraste para contenido textual y no textual en pantallas autoiluminadas.

El modelo SACAM (S-Luv Accessible Color Appearance Model), anteriormente SAPC, es un modelo avanzado de medición del contraste que tiene en cuenta la percepción visual humana del contraste y los múltiples factores implicados, como el tamaño, el peso, el relleno o el espaciado de la fuente; la adaptación de la luz; así como la luminancia y los colores CSS utilizados, basándose en una pantalla sRGB con un observador estandarizado.

El código básico de APCA es una reducción de este modelo más grande. Utiliza una estimación lo suficientemente simple para automatizarse, pero que mejora la legibilidad y ofrece mayor flexibilidad en el diseño.

APCA ha sido creado por Andrew Somers, líder de investigación del subgrupo Visual Contrast del grupo de trabajo W3C Accessibility Guidelines Working Group’s Silver (WCAG 3). APCA es el método de contraste candidato para incluirse en el futuro estándar de las WCAG 3, y está siendo evaluado actualmente como beta pública.

APCA y las WCAG 3 aún están en desarrollo y todavía no son recomendaciones oficiales del W3C. ¿Debemos comenzar a utilizar ya el algoritmo APCA para medir el contraste? ¿De qué herramientas disponemos? El objetivo de este artículo es dar respuesta a estas preguntas.

Mis fuentes para elaborar este artículo han sido, por una parte, los dos magníficos artículos de Andrew Somers:

• The Realities And Myths Of Contrast And Color
• Why APCA as a New Contrast Method?

Y, por otra parte, toda la documentación del algoritmo, disponible en:

• Myndex/APCA model
• Myndex/SAPC-APCA en github.com/

El artículo ha sido elaborado sin la ayuda de herramientas IA.

Índice

• Introducción sobre la visión y el color
• Sobre el contraste y sus problemas
• Algoritmo WCAG frente al nuevo APCA
• APCA en detalle
• ¿Debemos usar ya APCA? Herramientas.
  • APCA Contrast Calculator (Myndex)
  • Bridge-PCA Contrast Calculator (compatible con las WCAG 2) (Myndex)
  • Otras herramientas

Introducción sobre la visión y el color

En el artículo “The Realities And Myths Of Contrast And Color” Andrew Somers nos da una lección magistral sobre la visión humana y la percepción del color. Resumo a continuación aquellos aspectos que me parecen relevantes para comprender el nuevo algoritmo APCA.

La corteza visual primaria, que es la primera área de la corteza cerebral que procesa la información visual, analiza los contrastes de claridad y oscuridad, detectando bordes y detalles finos, además de realizar un procesamiento inicial del color. Posteriormente, otras áreas refinan esta información y procesan de manera más especializada distintos aspectos del color, como el tono y la saturación.

Parte de la información visual se dirige al Visual Word Form Area (VWFA), donde se procesan patrones ortográficos y se facilita el reconocimiento de palabras escritas, integrándose luego con áreas del cerebro relacionadas con el lenguaje. Otra información visual sigue vías especializadas, como la detección del movimiento y el reconocimiento de objetos.

La información procesada en el VWFA depende principalmente del contraste de luminancia, por lo que el color juega un papel secundario en el reconocimiento de las palabras escritas. En cambio, el área de reconocimiento de objetos integra la información del color, junto con la forma o la textura, para la discriminación visual.

Hay que destacar que los colores son percepciones que se ven muy afectadas por el contexto. Por ejemplo, en la siguiente imagen hay dos círculos del mismo color amarillo (#D18600), pero los percibimos diferentes por el contexto:

Fuente: The Realities And Myths Of Contrast And Color, Andrew Somers

Nos referimos, por tanto, a una percepción cualitativa y dependiente del contexto.

Por otra parte, nuestra percepción no es lineal. Si tienes 100 fotones de luz y los triplicas, tienes 300 fotones de luz, pero, según Andrew Somers, nuestra visión no percibe ese cambio como una "triplicación", sino como un aumento modesto, lo cual es muy importante para comprender la percepción del contraste.

También es relevante que la percepción visual cambia con la edad. Se necesitan los primeros 20 años de vida para desarrollar la máxima sensibilidad al contraste. Y, a medida que envejecemos, el ojo pierde sensibilidad, especialmente al azul, ya que la óptica del ojo se vuelve más amarilla.

Algunos términos relevantes a tener en cuenta son:

• La agudeza visual (AV) se relaciona con la capacidad de nuestros ojos para enfocar lo que vemos, lo cual es fundamental para la lectura.
• La sensibilidad al contraste (SC) es también una medida importante de la salud y el bienestar de nuestro sistema.
• La deficiencia de la visión del color (CVD), que solemos denominar de forma genérica "daltonismo", afecta al 5% de la población mundial, que es insensible a algunos colores. En los casos más comunes, uno de los tipos de cono no está funcionando como debería o falta por completo.

Si bien la CVD afecta a la capacidad de distinguir algunos colores, la percepción de la luminancia es similar en la visión estándar y en los tipos comunes de CVD. Por lo tanto, en términos de legibilidad, requieren el mismo contraste de luminosidad que la visión estándar.

La única excepción es la combinación de rojo y negro, ya que las personas con formas protán de CVD son insensibles al rojo. Como resultado, perciben un contraste muy bajo entre estos colores, por lo que esta combinación debe evitarse.

Sobre el contraste y sus problemas

Resumo a continuación aquellos aspectos que Andrew Somers explica en sus artículos que me parecen imprescindibles para comprender el contraste y sus problemas.

Existen muchas formas de contraste, pero para la accesibilidad digital nos centramos en el «contraste de luminosidad percibido». Mientras que la luminancia es una magnitud física en el mundo real, la luminosidad es nuestra percepción de ella y está condicionada por el contexto.

La lectura y la legibilidad están muy relacionadas con las diferencias de claridad y oscuridad: los detalles finos de las fuentes requieren un buen contraste de luminancia para que el Visual Word Form Area (VWFA) contribuya al reconocimiento de palabras completas o pares de letras. En cambio, los contrastes de color son más relevantes para el reconocimiento y la categorización de objetos.

Otro aspecto muy importante de la percepción del contraste es que se basa más en la “frecuencia espacial” que en la diferencia entre dos colores. La “frecuencia espacial” se refiere al grosor y tamaño de la fuente y al grosor y separación de sus líneas:

Fuente: The Realities And Myths Of Contrast And Color, Andrew Somers

También se deben tener en cuenta los efectos del antialiasing y las técnicas de suavizado de fuentes.

Las pantallas Retina, con alta densidad de píxeles, pueden mostrar texto más nítido; y algunos sistemas o dispositivos están configurados con un antialiasing subpíxel que puede ser más nítido. Sin embargo, si se usa con -webkit-font-smoothing:antialiased;, se reemplazará con un desenfoque suave que perjudica mucho el contraste y la nitidez en las pantallas de resolución estándar con fuentes pequeñas. Por ello, Andrew Somers indica que los diseños deben probarse y visualizarse en monitores de “resolución estándar”.

Para compensar estos factores, el texto pequeño y delgado requiere una diferencia de claridad/oscuridad mucho mayor. Por ejemplo, algunas fuentes de gramaje 100 son tan delgadas que requieren un tamaño superior a 42 px, o incluso más, para poder aplicar técnicas de suavizado de forma segura.

Por último, hay que tener en cuenta las columnas del texto, pues la densidad del texto reduce aún más el contraste.

Algoritmo WCAG frente al nuevo APCA

El algoritmo de contraste de las WCAG 2 no predice el contraste del texto según la percepción humana, lo cual es especialmente evidente con pares de colores oscuros. Como resultado, el contraste WCAG 2 es poco útil para el modo oscuro y para el texto claro en colores saturados.

Fuente: APCA. Why APCA as a New Contrast Method?, Andrew Somers

Las directrices de contraste de las WCAG 2 indican una relación de 4,5:1 para fuentes menores de 24 px con grosor 400 (normal), o 18,8 px con grosor 700 (negrita), y de 3:1 para otros contrastes. Si bien esta directriz es fácil de implementar, estos mínimos pueden ser muy insuficientes en algunos casos, y paradójicamente, más de lo necesario en otros, porque se basaron en estudios de la década de los 80.

El nuevo método APCA considera directamente las diferencias perceptuales de claridad/oscuridad del texto con respecto al fondo y genera un valor de "contraste de luminosidad" denominado Lc. A partir de aquí, podemos determinar el tamaño y el grosor mínimos de una fuente para una lectura fluida, y estas predicciones calculadas, en conjunto, pueden guiar nuestras decisiones de diseño.

Esto nos lleva a la idea del «contraste de legibilidad» que hemos comentado: el contraste necesario para un caso de uso particular y el nivel de legibilidad requerido.

Para ello, se definen conceptos como «contraste crítico» y «tamaño crítico», siendo “crítico” el punto en el que aumentar el tamaño o el contraste no mejora la velocidad de lectura ni la comprensión; o «reserva de contraste», definiendo las necesidades de contraste para niveles subfluidos, donde el texto sigue siendo legible, pero no alcanza la máxima velocidad ni la máxima comprensión. Esto es importante, porque en una jerarquía de diseño no todo puede alcanzar el máximo contraste.

Por ejemplo, una columna de texto requiere el mayor contraste para garantizar una legibilidad fluida. Pero un copyright en el pie de foto no necesita tener un contraste tan alto. De hecho, dice Andrew Somers, para mantener un diseño despejado y centrar la atención en el contenido, un copyright debería tener menos contraste: lo suficientemente alto como para leerse si se enfoca, pero lo suficientemente bajo como para no distraer ni desviar la atención del tema principal.

Hay que tener en cuenta que la altura del cuerpo puede tener resultados significativamente diferentes según la familia de fuentes. Por lo tanto, se debería determinar la altura x de las fuentes utilizadas en el diseño y, después, ajustar el tamaño de la fuente con el desplazamiento necesario para lograr el tamaño renderizado deseado.

Por ejemplo, una Verdana tiene una altura X más grande que una Garamond:

Fuente: How to make type readable on the web, Michael McBain

Ya hemos comentado que también se deben tener en cuenta el tamaño y el diseño de la fuente porque el antialiasing puede crear problemas.

APCA en detalle

Accessible Perceptual Contrast Algorithm (APCA) está actualmente en evaluación en beta pública y es el método candidato para el contraste en las WCAG 3.

El nuevo modelo difiere de las WCAG 2 en que APCA considera la percepción visual humana, los casos de uso y las características espaciales (peso y tamaño) y proporciona una guía de diseño completa y útil. APCA forma parte del modelo más amplio conocido como SACAM (S-Luv), que tiene en cuenta los nuevos conocimientos de la ciencia de la visión, optimizada específicamente para la legibilidad del texto en pantallas autoiluminadas, basada en la investigación revisada por pares de Whittaker, Bailey, Lovie-Kitchin, G. Legge y otros.

Como ya he indicado, APCA ha sido creado por Andrew Somers como líder de investigación del subgrupo Visual Contrast del grupo de trabajo W3C Accessibility Guidelines Working Group’s Silver (WCAG 3) .

APCA indica el contraste como un valor Lc (contraste de luminosidad) basado en un par de colores y un peso/tamaño de fuente mínimo. Este valor está basado en la percepción, es decir, independientemente de cuán claros u oscuros sean los dos colores, un valor de contraste de Lc 60 representa el mismo contraste de legibilidad percibido en toda la gama de colores disponible.

Esto no ocurre con las WCAG 2, que exageran considerablemente el contraste para colores oscuros, hasta el punto de que una relación de 4,5:1 puede resultar ilegible cuando un color es cercano al negro. Por lo tanto, el contraste de las WCAG 2 no puede utilizarse como guía para el diseño del "modo oscuro", y también genera problemas para las personas con problemas de percepción del color.

Fuente: APCA. Why APCA as a New Contrast Method?, Andrew Somers

APCA cuenta con un conjunto de niveles relacionados con los casos de uso; por ejemplo, Lc 90 y Lc 75 es el mínimo para el cuerpo del texto.

También cuenta con una tabla de consulta para asociar el tamaño y el grosor de la fuente con el contraste de legibilidad (Lc). Estas tablas permiten una mayor precisión y, por lo tanto, mayor flexibilidad en el diseño.

Fuente: APCA Contrast Calculator

Los niveles mínimos básicos, lo que podría considerarse como A/AA en las WCAG 2, sería:

• Lc 90: el nivel preferido para texto fluido y columnas de cuerpo de texto con una fuente no menor a 14px/peso 400 (normal).
• Lc 75: el nivel mínimo para columnas de texto del cuerpo con una fuente no menor a 18px/400. Lc 75 debe considerarse un mínimo para textos donde la legibilidad es importante.
• Lc 60: el nivel mínimo recomendado para texto de contenido que no sea texto de cuerpo, columna ni bloque. En otras palabras, texto que se desea que los usuarios lean. Los mínimos son: 24 px de grosor normal (400) o 16 px/700 (negrita). Estos valores se basan en la fuente de referencia Helvética.
• Lc 45: el mínimo para texto más grande y grueso (36 px de grosor normal o 24 px en negrita), como titulares. Este también es el mínimo para pictogramas con detalles finos.
• Lc 30: el mínimo absoluto para cualquier texto no mencionado anteriormente. Esto incluye texto de marcador de posición y texto de elemento deshabilitado. Este también es el mínimo para elementos no textuales grandes, sólidos, semánticos y comprensibles.
• Lc 15: el mínimo absoluto para cualquier elemento no textual que deba ser discernible y diferenciable, y no debe ser inferior a 5 px en su dimensión más pequeña. Esto puede incluir botones grandes deshabilitados. Los diseñadores deben tratar cualquier elemento por debajo de este nivel como invisible, ya que no será visible para muchos usuarios. Este nivel mínimo debe evitarse para cualquier elemento importante para el uso, la comprensión o la interacción del sitio.

Fuente: APCA. Why APCA as a New Contrast Method?, Andrew Somers.

Andrew Somers también hace hincapié en que el peso de la fuente es relativo. Cuando hablamos del grosor de la fuente, hay que tener en cuenta que el valor de peso CSS (es decir, 300, 400, 700) no es consistente entre las diferentes familias de fuentes. Por ejemplo, "Arial Black" se indica como normal (peso 400) aunque es extra bold. Y Courier New indica peso 400, aunque es extra light.

¿Debemos usar ya APCA? Herramientas

En primer lugar, hay que insistir en que APCA y las WCAG 3 aún están en desarrollo y todavía no son recomendaciones oficiales del W3C.

APCA Contrast Calculator (Myndex)

APCA Contrast Calculator es una herramienta online de Myndex Technologies, donde Andrew Somers es investigador sénior en ciencias del color.

Se puede usar gratuitamente como beta pública y se pide a las personas que la usan que envíen sus problemas y discusiones al repositorio de GitHub de APCA.

Tras la zona inicial para incluir los colores, hay diversos acordeones que despliegan información adicional, como las tablas de referencia para las fuentes.

Ten en cuenta que APCA reconoce la polaridad, lo que significa que reconoce la diferencia entre texto oscuro sobre un fondo claro y texto claro sobre un fondo oscuro. Por lo tanto, es importante introducir el color del texto/icono y el color de fondo correctamente. No vale como en los validadores WCAG incluir el color indistintamente como background o foreground.

Bridge-PCA Contrast Calculator (compatible con las WCAG 2) (Myndex)

Si queremos compatibilidad con las WCAG 2, tenemos la herramienta "Bridge-PCA", también desarrollada por Myndex Technologies.

Esta herramienta, online y gratuita, permite mejorar la legibilidad y el cálculo del modo oscuro, pero cumpliendo con los criterios de conformidad de las WCAG 2.

Si bien Bridge-PCA corrige muchos problemas y mejora la legibilidad, se pierde la mayor flexibilidad de diseño que ofrece la implementación completa de APCA, debido al hecho de que, para mantener la compatibilidad con versiones anteriores, algunos contrastes se fuerzan a ser más altos de lo que realmente necesitan ser.

APCA Contrast Calculator nos sive para mejorar el contraste, especialmente en el "modo oscuro", y a la vez cumplir con la norma actual que nos exige la legislación.

Otras herramientas

Se han publicado muchas herramientas como APCA Contrast Calculator o Bridge-PCA Contrast Calculator, por listar algunas:

• Contrast tools – APCA
• APCA Accessible Colour Contrast Checker
• Color contrast checker. Check and suggests colors to meet the required WCAG or APCA contrast ratio.
• Contrast checker. Check WCAG 2 and APCA contrast between colors in HEX, RGB, HSL, and LCH.
• Color Contrast Tool
• The Dataviz Contrast Tool

También hay otras herramientas que se centran en crear paletas accesible. En ellas, seleccionas los colores de la paleta que vas a usar y te permite visualizar sus combinaciones, indicándote el contraste WCAG y APCA. Por ejemplo:

• Color Easily
• Accessible Palette