Color System

Do not rely on WCAG 2 contrast calculation, try APCA

How to scientifically evaluate whether the color combination of text and background can be seen clearly?

Author Gu Wei Publish Update

How to scientifically evaluate whether the color combination of text and background can be seen clearly?

Summary

Background

Best Practices

Gu Wei, Product Designer.

WCAG 2 Status

1.4.3 Contrast (Minimum) (AA)

The visual presentation of text and text images has at least a contrast ratio of 4.5:1, except for the following:

  • Large text Large text and large text image contrast ratio of at least 3:1…
  • --- WCAG 2.1

When building a color system, we usually check the contrast based on WCAG 2, and the larger the contrast value, the better. We generally select color combinations that are greater than 4.5:1 for body text and greater than 3:1 for titles.

For example, we selected a color scheme that is slightly green:

WCAG 2 example with 3.12:1 and 5.29:1

It’s great, #51A24F is used for the large title, the contrast ratio is 3.12:1; #067C1F is used for the body text, the contrast ratio is 5.29:1. Both have met the AA level requirements of WCAG 2. However, when we wanted to pair a button’s main background color, we found that the original green #00AD16 was below 3:1 and did not meet the requirements of WCAG 2.

WCAG 2 example with 2.96:1

However, this blue background, pink text scheme has a contrast ratio greater than 4.5:1, which has achieved AAA for the large title and AA for the body text. This makes us wonder if WCAG 2’s contrast calculation is universally applicable.

WCAG 2 example with 4.5:1

The problem is that WCAG 2.x uses a completely brightness-based calculation method, essentially the relative brightness of the lighter color (L1) divided by the relative brightness of the darker color (L2):

Contrast = (L1 + 0.05)/(L2 + 0.05)

When there are 20 lights illuminating a room, physically the luminous flux from 20 lights is indeed twice that of 10 lights, but the human eye will only perceive it as slightly brighter. This is because human brightness perception is not linear and is highly susceptible to the influence of surrounding environmental colors.

The brightness-based WCAG 2 will excessively exaggerate the contrast weight of dark colors. On one hand, it will reject some color combinations that are actually relatively easy to identify (left column examples), and on the other hand, it will pass some that are more difficult to identify (right column examples)*:

Some WCAG 2 fail and pass example

  • Depending on the individual’s eye condition, the device you are reading on, and the ambient light situation, the demo may have some controversy.

So we conclude:

The accessibility represented by the contrast ratio of WCAG 2 is not uniform, and the difference in perception under certain conditions is huge.

It is more serious that this leads to poor color performance in many products in dark mode, such as the WCAG 2 contrast ratio of the “link” blue and background provided by Apple in the system color palette of iOS, which exceeds 4.5:1, but the actual contrast ratio is much lower than in light mode.

A problem with apple color

Introduction to APCA

Many people have found the problem with WCAG 2’s contrast calculation, but many designers also believe that the contrast AA/AAA requirements are just a post-output checker, and more in the design process is still “to have enough confidence in your own intuition”.

For a mature design process:

Obviously, WCAG 2 has flaws in both aspects, so some big shots couldn’t hold back anymore.

Andrew Somers works in the film and television industry in Hollywood, mainly in charge of editing, color correction, visual effects, etc., and is visually impaired. He proposed a challenge to WCAG 2 in April 2019 on GitHub of W3C:

Later, he became one of the co-authors of WCAG 3 as a W3 invited expert, and currently proposed the APCA algorithm, which is a candidate solution in the visual contrast part of WCAG 3.0.

Accessible Perceptual Contrast Algorithm (APCA), based on font attributes, perceptual brightness differences between text and background, environmental and contextual factors, etc., aims to be closer to the actual perception of the human eye. The technical details are not discussed here, please refer to GitHub - Myndex/SAPC-APCA.

As a designer, you can directly use the related tools of APCA, usually selecting the foreground text color and background color, returning a perceptual brightness contrast value Lc, ranging from -108 ~ +106, positive for light background, negative for dark background.

APCA Reference Chart

The approximate corresponding relationship recommended in practice:

If your product has a legal or other policy constraint on WCAG 2, consider forward-compatible WCAG 2 on the basis of APCA:

APCA Tools

Recommended: Figma Plugin - Visual Contrast

Recommended: Web - Contrast tools

Similar tools

Web - APCA author’s tool

Web - BPCA

Chrome 89+ DevTools

How to set Apca on chrome

Let’s compare WCAG 2 and APCA

Next, let’s use the official color palette of Ant Design to compare the two in practice.

In the functional color part, Ant provides eight pairs of color values for Link, Success, Warning, and Error in Dark and Light modes, let’s see their contrast:

Ant Design Color

Based on WCAG 2, we found:

It seems there is something worth changing, which can improve color accessibility.

Let’s try to meet the minimum requirements of AA based on WCAG 2, let’s see the performance of the modified version:

Ant Design Color with WCAG 2

We can see that the contrast reflected by WCAG 2 is still relatively consistent in the same background environment. The main problem lies in the two modes of Dark and Light, the brightness feeling difference caused by the same contrast value is too large.

In addition, WCAG 2 is also difficult to cope with the challenges of complex scenes, such as different gray levels, or with color backgrounds.

Here we introduce the APCA algorithm for adjustment, first try the contrast set to 45, meet the minimum requirements:

Ant Design Color with APCA 45

Or hope to meet the higher accessibility, and also compatible with WCAG 2 requirements, set the contrast to 60:

Ant Design Color with APCA 60

We can see that APCA performs more consistently in more scenarios, and the contrast values of WCAG 2 are significantly different.

Next

Currently, WCAG 3.0 has not been released, and since APCA is only one of the candidate methods, this will lead to certain uncertainty.

Considering that the standard will take a very long time to be widely applied, I urge各位 designers to try using APCA to solve practical color scene application problems, especially in dark scenes.

Whether it is WCAG 2 or APCA, these are not the only standards for choosing colors. As a designer, we should explore color schemes better on the basis of accessibility.

Thank you for reading.

Question

If you don’t plan to use APCA to evaluate color accessibility, what is the reason?

Resources

Reference Articles

Recommended APCA Tools

Recommended WCAG 2 Tools

Update History