Update your color contrast checks

When you think of web accessibility, you probably think of color contrast. Although this is just one aspect of accessible design, it is also one of the most discussed. And for good reason! Contrast testing is one of several tools we use to ensure that digital content can be easily read and understood by users with visual impairments.

The second release of the Web Content Accessibility Guidelines (WCAG 2.0) introduced a standard for measuring color contrast ratios. However, the upcoming release of WCAG 3.0 will likely incorporate a new method, the Advanced Perceptual Contrast Algorithm (APCA), which more comprehensively measures visual perception.

In this post, I'll show how these methods differ from one another and provide a few steps for you to begin integrating this new method into your org.

Understanding the Contrast Ratio Method

WCAG 2.0's Contrast Ratio Method calculates the difference in luminance (brightness) between the color of text and the color of its background. The output is expressed as a ratio, with higher values indicating better contrast. While it is a valuable tool, it comes with certain limitations:

Limited accuracy

The Contrast Ratio Method is a purely mathematical model. This means that while precise, it is not adjusted to fit empirical evidence. As a result, this method not always predict how users actually perceive visual contrast. By looking solely on luminance, it remains agnostic to other typographic factors like size, weight, visual area, or the idiosyncrasies of hue-value combinations.

Diversity of impairments

Colorblindness is often the poster child for discussions of color contrast because it can be broadly addressed by adjusting luminance. In reality, it is only one form of visual impairment that can impact contrast perceptions. Take for instance, users with blurred vision, near- and far-sightedness, occlusions, and more. Simple measurements of luminance encompass a limited scope of these experiences.

Introducing the Lightness Contrast Method

The APCA standards, which are currently in development, present an alternative approach to evaluating color contrast known as the Lightness Contrast Method. The tl;dr is that this takes into account a broader range of visual factors, which more closely reflect the visual experience of reading text and icons.

Font weight & size

WCAG 2.0 ratios did not consider the thinness or thickness of text, only its color. This was problematic (as you are likely aware) as copy could go into production with a sufficient contrast ratio, only for user feedback to indicate readability issues! The APCA accounts for this, with thinner fonts receiving lower scores. This is supplemented by measurements of a font size as well.

Reverse text gets its due

Another peculiar effect of the Contrast Ratio Method is its indifference to foreground/background relationships, despite the vast differences in readability they can cause.

This is not due to order effects, but rather, the relationship between lightness and surface area itself. Reverse text—meaning, light text on a comparatively darker background—tends to have greater contrast than normal text because the darker color surrounds the lighter text, providing greater visual definition. APCA aims to fix this by evaluating the hierarchy of color. So you'll probably be able to use that reverse orange-white CTA after all.

Human vision is quirky

Several well-documented visual illusions reveal that humans don't perceive contrast smoothly across hue and value. For example, some colors inherently appear lighter for greater values ranges (yellow). In other cases, relationships between values can create unique contrast effects, with the same color appearing darker or lighter according to its background. APCA calculates contrast scores with these factors in mind. The end result is fewer scenarios for you to mock up.

How it works

A text/background pairing will receive an Lc score that ranges from 0-106. Higher numbers mean higher contrast.

• 0: No contrast.
• 15: Minimum for elements that are not text, such as icons.
• 30: Absolute minimum for any text
• 45: The minimum for large text (the old 3:1)
• 60: The minimum for body text (the old 4.5:1)
• 75: The preferred contrast for body text
• 100-106: Max contrast achieved

A positive Lc score, such as +80, indicates how a dark foreground contrasts against a light background. Conversely, a negative Lc score, like -80, indicates a light foreground contrasting with a dark background. So, yes I can confirm... dark mode is here.

You can check out this calculator to get a feel for how the new rubric works.

Transitioning to APCA

Moving from the Contrast Ratio Method to the Lightness Contrast Method can improve how you measure legibility and readibility in your web products. Here are a few steps to help you make this transition:

• Update design tools: Check if your design tools (e.g., Figma, Sketch, Adobe XD) offer support or plugins for the APCA Lightness Contrast Method. If available, integrate these tools into your design workflow. I have personally enjoyed using the Polychrom plugin on Figma, which can even handle calculations on transparent layers.

• Help out your devs: Encourage your developers to npm i apca-w3! This package makes it easy to slot in contrast checks into the dev workflows.

• Reevaluate existing designs: Just because an existing product passed ratio contrast checks doesn't mean that it will pass lightness contrast checks. Audits of existing products can identify elements that require adjustment based on the APCA method. This may involve modifying color relationships, font weights, or both.

• Document new standards: Create and maintain design guidelines or accessibility standards within your organization that incorporate the APCA Lightness Contrast Method. Ensure that all team members are aware of these guides.

• Stay informed: APCA is not yet officially adopted, pending the release of WCAG 3.0. Consequently, clients that are formally concerned with accessibility will use WCAG 2.0 until the new standards are published. This most likely impacts your contract obligations around accessibility thresholds. It is worth noting that APCA is a more comprehensive, and thus stricter, set of contrast benchmarks.

Takeaways

Incorporating the APCA Lightness Contrast Method into your design workflow can make your digital products more inclusive. By recognizing the limitations of contrast ratios and embracing the more descriptive APCA standards, you'll be better equipped to create user-centered designs that cater to a wider range of visual abilities.

Out of 100 people over the age of 40 in the United States, 8 have a visual impairment, including 1 million Americans who experience blindness. Globally, 2.2. billion people have a vision impairment. The diverse range of visual experiences represented in these huge numbers demonstrate the pressing need for a more inclusive test of visual contrast on the web and in your design process.