How to choose color contrast? Check out this list of recognized standards from major manufacturers!

I guess when you entered the design circle, you must have been recommended Robin Williams's "Design Book for Everyone". The complex design principles are condensed into four basic principles: intimacy, alignment, repetition and contrast.

But actually, what I am going to talk about today has little to do with this book... I just want to introduce the concept of "contrast" and how basic and important it is in design.

One of the main findings of Google Design's usability study of text boxes is that the color contrast between the bottom line of the text box and the background should be at least 3:1. Because sufficient color contrast can make the control more visible in the scene.

But do you really understand the concept of color contrast? Why is this value "3:1" and how should we get "3:1"? What impact does color contrast have on our design process and what role can it play?

Why is there a "contrast standard"

This question is actually very easy to answer. With so many hardware device manufacturers, product designers cannot ensure that every user will see the same perfect interface as the one the designer designed on the monitor when using your product.

There will always be users who use devices with poor display performance. You need to consider more than just the device factors. The product's usage environment (outdoors or dimly lit indoors), the eyesight of the mainstream user group, etc. may require you to provide a more barrier-free visual experience. Otherwise, it is very likely that your product will be almost unusable in real usage scenarios...

But it is unrealistic to judge based on the designer's experience alone. Therefore, the industry gave birth to the WCAG (Web Content Accessibility Guideline) standard. Although this standard is designed to meet the visual experience of users with visual impairments, meeting this standard can also help ordinary users use it more conveniently.

In fact, WCAG also contains many accessible design standards and regulations, which guide product designers to make products easier to use from many aspects such as vision, hearing, movement and intelligence. But today I will mainly talk about the "color contrast accessibility standard".

Color contrast accessibility standards

Through reading performance evaluation, hue and saturation actually have little or no effect on readability. What really affects reading performance is the color contrast caused by color brightness.

The purpose of the WCAG color contrast standard is to ensure that there is enough contrast between text and background to ensure that people with a wide range of vision levels can read it easily. In other words, text or images that meet the WCAG standard will have a high enough color contrast to make it easy to distinguish from the background.

WCAG has established two standard regulations, namely "Rule 1.4.3: Contrast (minimum) standard" (i.e. AA standard) and "Rule 1.4.6: Contrast (enhanced) standard" (i.e. AAA standard). The AAA standard is more stringent than the AA standard and is suitable for product types with stricter visual requirements. The definitions of the two standards are:

• 1.4.3 Contrast (minimum): The visual presentation of normal text should have a contrast ratio of at least 4.5:1 against its background, and large text¹ should have a contrast ratio of at least 3:1 against its background.
• 1.4.6 Contrast (Enhanced): The visual presentation of normal text shall have a contrast ratio of at least 7:1 against its background, and large text¹ shall have a contrast ratio of at least 4.5:1 against its background.

Note: ¹Large text: WCAG defines text with a font weight of ≥18pt regular or ≥14pt bold as large text.

In the iOS Human-Computer Interaction Specifications and Material Design Guidelines, we can see that many color contrast indicators comply with the WCAG standards.

For example, the "color contrast between the bottom line of the text box and the background should be at least 3:1" mentioned earlier, and the "brightness contrast should be at least 4.5:1" in the dark mode in the MD specification. These data are all from the WCAG standard.

How to calculate color contrast

(Tips: For those who are not good at math, you can skip to the next section and use the handy tools...)

After understanding the data indicators, we should explore how the color contrast is calculated. The formula can be found in the WCAG standard:

• Contrast = (L1 + 0.05)/(L2 + 0.05) [where L refers to the relative brightness of the color]
• Relative brightness L = 0.2126 * R + 0.7152 * G + 0.0722 * B
• The values ​​of R, G, and B are: If XsRGB <= 0.03928, then X = XsRGB/12.92; otherwise X = ((XsRGB+0.055)/1.055) ^ 2.4
• XsRGB here refers to RsRGB, GsRGB, or BsRGB, and the value is XsRGB = X8bit/255. "X8bit refers to the values ​​of 0-255 for R, G, and B channels respectively at 8 bits/channel."

I suggest you don't dwell too much on the underlying logic of the formula, such as where the data 0.2126 comes from. After all, the official formula is sufficient for calculating color contrast. Through my previous research, the source of these data is a combination of a series of evolutions such as color coordinate system, matrix operation, etc. If you are particularly interested, you can check it out. Due to space constraints, I will not go into details here.

Based on the above example, we not only know how to calculate the contrast between two colors, but also come to the conclusion that the maximum contrast between colors is 21:1 (pure black and pure white).

Contrast tool and example verification

It is indeed impossible to calculate the contrast manually every time with such a complex formula above. Fortunately, there are many online tools that can assist us in completing the contrast verification work, such as single-color contrast tools like WebAIM's Color Contrast Checker, or color group contrast tools like EightShapes Contrast Grid.

With this quick tool, I quickly verified the color availability of both iOS and MD specifications.

As can be seen from the figure, the iOS specification directly uses pure white text on a pure black background layer, pushing the color contrast to an unexpected maximum. This seems to be a bit different from our previous common understanding: just like when we design light mode, we will not use pure black text on a white background; nor will we use pure white fonts on a black background.

This may be because when Apple first launched the dark mode, it wanted to create a color mode that can be used both during the day and at night, rather than a "night mode" designed only for low-light environments. It needs to be compatible with the human eye's capture of light under different light conditions. From this point of view, the design of the dark mode is more difficult than the night mode, and it is not enough to simply reduce the contrast.

MD's color contrast design is a bit more conservative than iOS, and it prefers dark gray as the background color.

The contrast of light fonts on a dark gray background is lower than that on a black background, which helps reduce eye fatigue. In design, MD often uses shadows to express hierarchical relationships. When switching to dark mode, the system will retain the default shadows, and it is easier to see these gray shadows using a dark gray background. The official definition for the contrast ratio between dark surfaces and white text is at least 15.8:1.

Conclusion

It has to be said that the details of color contrast are indeed difficult to grasp, but the details also reflect a designer's patience and depth.

The "dark mode" that has become increasingly popular recently pays special attention to the consideration of contrast.

I remember when WeChat's "dark mode" was first launched, it was criticized and many netizens said it was eye-irritating... Later, a colleague analyzed the reason and concluded that it was because the color contrast was not properly controlled, causing users to look at the interface with low contrast for a long time, causing visual fatigue. Of course, the WeChat team has gradually optimized it now.

Due to space constraints, I only introduce the concept of color contrast here. I will continue to share with you how the MD team completed the "dark mode" color matching and how to use color contrast to verify your product color scheme.