Background

While WCAG 3.0 is still under discussion and development, there is clear probability that the color contrast ratio requirements will undergo a structural update, following the Accessible Perceptual Contrast Algorithm (APCA).
The color palette is currently evaluated using WCAG 2 contrast guidelines, which may not reflect the most accurate perceptual contrast, potentially leading to less accessible color choices.

Goal

The current requirement for our design system are WCAG 2.1/2.2 level AA contrast guidelines for the colors of our palette. As WCAG 3 is under development and introduces the Advanced Perceptual Contrast Algorithm (APCA), it will be crucial to transition to APCA for more accurate and perceptually relevant color contrast assessments. However, given that WCAG 3 is not yet finalized, there are important considerations to take into account.

Rationale for Using APCA

• Perceptual Relevance: APCA considers human vision more accurately than WCAG 2, providing better results for readability and visual comfort.
• Advanced Metrics: APCA uses luminance contrast and spatial frequency, which are more aligned with how people perceive contrast in real-world scenarios.
• Improved Accessibility: Using APCA can lead to better design choices that enhance readability and reduce eye strain for users with visual impairments.

Considerations and Cautions

• Non-Finalized WCAG 3: As WCAG 3 is still under development, it is essential to stay updated with any changes or refinements to APCA. This may require regular updates to our evaluation process.
• Backward Compatibility: Ensure that the transition to APCA does not negatively impact users who rely on WCAG 2 standards. Provide dual support or clear communication about the changes. WCAG 3 is laid out to be a breaking change which
• This breaking change would mean that we would possibly consider not complying to then (outdated) laws
• Implementation Complexity: Integrating APCA might require significant changes to our current evaluation logic and user interface. Proper testing and validation are necessary to ensure accuracy and reliability. For example, Figma's Stark plugin does already include a beta feature to test APCA as well
• Ratios are quite different to current contrast ratio system, in short (taken from Dan Hollick's article):
  • 15 - 🚫 Minimum for non-text elements
  • 30 - ⚠️ Absolute min for any text
  • 45 - ‼️ Min for large text (the old 3:1)
  • 60 - ❗Min for body text (the old 4.5:1)
  • 75 - ✅ Preferred level for body text
• Community and User Feedback: Engage with the user community and gather feedback on the effectiveness of the new contrast evaluation. Adjustments may be necessary based on real-world usage.

Codex Figma spec with exploration
https://www.figma.com/design/KoDuJMadWBXtsOtzGS4134/branch/DzSA7dk3Tt4tLGiSZmYuJl/%E2%9D%96-Codex-components?node-id=19273-1832&t=Go5JdyRVeyS2mhzf-0

Acceptance Criteria

• The color palette should be evaluated using APCA to provide a more accurate assessment of perceptual contrast, improving the accessibility and usability of the system.
• Integrate APCA: Implement APCA as (the primary) method for evaluating color contrast in the web application.
• Monitor WCAG 3 Developments: Regularly check for updates to WCAG 3 and adjust the APCA implementation as needed.
• Maintain or clarify WCAG 2 Support: Provide an option for users to view contrast evaluations based on WCAG 2 for backward compatibility.
• User Education: Inform users about the benefits of APCA and how it improves accessibility.

Further reading

• https://typefully.com/DanHollick/sle13GMW2Brp
• https://designproject.io/blog/web-accessibility-wcag-apca/ The future of Web Accessibility: Unpacking WCAG 3.0, APCA, and the Role of Design Tools
• https://www.myndex.com/BPCA/ Bridge PCA reports contrast not only as the APCA Lc value (lightness contrast) but also with a WCAG 2 compatible ratio display, which can be used with WCAG 2 SCs like 1.4.3.