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:
Y, por otra parte, toda la documentación del algoritmo, disponible en:
El artículo ha sido elaborado sin la ayuda de herramientas IA.
Índice
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
Niveles relacionados con los casos de uso
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. Preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal).
- Lc 75. The minimum level for columns of body text with a font no smaller than 18px/400. Lc 75 should be considered a minimum for text where readability is important.
- Lc 60. The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: 24px normal weight (400) or 16px/700 (bold). These values based on the reference font Helvetica.
- Lc 45. The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines. This is also the minimum for pictograms with fine details.
- Lc 30. The absolute minimum for any text not listed above. This includes placeholder text and disabled element text. This is also the minimum for large/solid semantic & understandable non-text elements.
- Lc 15. The absolute minimum for any non-text that needs to be discernible and differentiable, and is no less than 5px in its smallest dimension. This may include disabled large buttons. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.
Fuente: APCA. Why APCA as a New Contrast Method?, Andrew Somers.
Notas sobre el tamaño y el peso de la fuente
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.
En las notas del validador APCA se especifica que el peso de la fuente se basa en fuentes de referencia altamente estandarizadas: Helvetica o Arial grosor 400. De modo que debes probar tu fuente con diferentes grosores hasta encontrar la coincidencia más cercana.
Por otra parte, se indica que los tamaños de fuente asumen una relación x-height de al menos 0,5 (es preferible utilizar una altura x de 0,52 a 0,57). En función de ello hay que calcular la cantidad que debe aumentarse la fuente.
Fuente: Estimating the x-height of a font
Por ejemplo, Times New Roman tiene una relación de altura x de 0,45, por lo que debe aumentarse aproximadamente un 16 % en tamaño con respecto a la fuente de referencia. Por lo tanto, si la fuente de referencia se establece en 1 em, Times debe establecerse en 1,16 em para que sea equivalente (18.6px):
html { font-size: 1,16em }
Sobre el diseño de la fuente y su impacto en la legilidad se recomienda en documento: "Evaluating Fonts" (PDF)
¿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.
Nota: si esta herramienta no está disponible dispones de otras muchas que listo en el siguiente apartado.
Otras herramientas
Se han publicado muchas herramientas como APCA Contrast Calculator o Bridge-PCA Contrast Calculator, por listar algunas:
Si trabajas con Figma, también tienes plugins de contraste que revisan con ambos algoritmos, como Contraste:
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:
