Accessible Colors: From WCAG to APCA

According to WebAIM’s 1 Million report, which runs an automated accessibility analyzer across the top 1 million website homepages, color contrast is the most common accessibility failure found on the web.

Color contrast refers to the difference in color used for your text and its background. The stronger the contrast, the more easily individuals with vision-related disabilities will be able to read the text.

Even if you don't have a disability that affects your ability to see, you've likely come across some questionable color pairings online. 

There are two primary models for determining if your color selections result in legible text:

• The Web Content Accessibility Guidelines (WCAG)
• The Accessible Perceptual Contrast Algorithm (APCA)

WCAG’s Color Contrast Guidelines

The Web Content Accessibility Guidelines (WCAG) are a set of 86 widely agreed-upon standards for accessibility compliance on the web. Three of those guidelines directly relate to the color contrast of elements on your website.

WCAG uses a contrast ratio metric to determine the legibility of text. Contrast ratio is a measurement of the difference in luminance (brightness) between two colors. The higher the ratio, the more legible it is.

• Black text on a white background has a contrast ratio of 21:1
• White text on a white background has a ratio of 1:1

To meet the WCAG’s AA standard, your text and its background color must have a contrast ratio of at least 4.5:1.

You can play with WebAIM’s contrast checker to see the contrast ratio between different color pairings.

There are some exceptions throughout the WCAG guidelines. For example, text 24px or larger only has to meet a 3:1 ratio, and text in a logo doesn't have to meet any contrast ratio. 

If you want to nerd out a little bit and get into the specifics of WCAG's contrast guidelines, here are the 3 WCAG 2.2 success criteria about contrast:

• 1.4.3 Contrast (Minimum) AA
• 1.4.6 Contrast (Enhanced) AAA
• 1.4.11 Non-text Contrast AA

The New APCA Model for Color Contrast

While the WCAG color contrast guidelines serve as a great starting point for the industry, they are not without criticism. The WCAG guidelines don’t factor in the specific size or weight of text, if the text is light-on-dark or dark-on-light, and result in a few questionable outcomes (especially when it comes to orange). 

Enter the Accessible Perceptual Contrast Algorithm, a new alternative for calculating contrast thresholds for legibility.

This method is still under development, but it may replace the existing contrast guidelines in WCAG 3.0. (Don’t hold your breath, though. While there isn’t an official release date for WCAG, if I had to guess, I’d say maybe 2030.) 

The APCA model goes beyond WCAG and considers things like font size, font weight, polarity, and other factors. James Sullivan’s presentation at the 2023 AxeCon, titled "Demystifying the APCA," is a fabulous primer for understanding the details of the new model. 

While APCA is very promising, I don't recommend abandoning the existing WCAG contrast guidelines just yet. I'm closely following any issues in the WCAG 3 GitHub repo that mention contrast to see how things progress. 

For now, at Capellic, we try to meet both WCAG and APCA. And if APCA does come along with WCAG 3, you'll have future-proofed your color choices.

Do I need to worry about this if I have a color contrast widget on my site?

Yes. And according to the Overlay Fact Sheet, over 900 accessibility experts and people with disabilities agree with me.

While accessibility widgets that let users toggle to a "high-contrast mode" or adjust font sizes seem helpful, they raise a host of legal and privacy issues and are likely only providing redundant functionality that users already have access to— and prefer to use —at the device, operating system, or browser level.

It also relegates your users with disabilities to an alternative version of your website, which feels exclusionary. Especially when selecting colors that pass contrast guidelines is a very attainable design goal. 

Lastly, using colors with a high contrast will make your site more legible to all users. 

How to Check Contrast

Take a look at your website. Do you see some colors that are hard to read? 

Take these three steps to test it:

• Get the color value for both the text and the background. I like to use Google Chrome's inspector to grab the color values from the compiled CSS. To access the inspector, right-click the element you want to know the color of and select "Inspect." Then, look at the 'elements'> 'computed' tab, and you'll see a color value.
• Get the font-size and font-weight of your text. You can get this through that same 'computed' tab in Chrome's inspector.
• Test the colors. I like to use the Atmos contrast checker tool, which allows you to paste in color formats like RGB and gives you both WCAG and APCA contrast results.

Want to check color contrast at scale? Use an automated tool like WAVE or Deque’s axe DevTools to scan a full page automatically and flag potential color contrast failures.

Go Forth and Check Contrast

If you are trying to make your current site more accessible, test out some of the color pairings. If your pairings don't meet the guidelines, try making small adjustments to the color and font size in your design system. 

If a website redesign is in your future, check the colors in your organization's brand guidelines. There may be some color combinations that are foundational to your brand and that you should avoid in the new design.