I’m sure Robin Williams’ Design Book for Everyone was recommended to you when you first started designing. Complex design principles are distilled into four basic principles of intimacy, alignment, repetition and contrast.
But what I’m going to talk about today doesn’t really have much to do with this book, and it’s a reminder of how fundamental and important the concept of contrast is in design.
One of the main findings of Google Design’s usability study on text boxes is that the minimum color contrast between the bottom line of text boxes and the background should be 3:1. There is enough color contrast to make the controls more visible in the scene.
But do you really understand the concept of color contrast? Why is this value “3:1”, and how do I get “3:1”? What effect does color contrast have on our design process?
Why there is a “contrast standard”
This question is actually quite easy to answer. In a world of hardware manufacturers, there is no way that product designers can make sure that every user who uses your product sees the same interface as the designer does on the display.
There will always be users with devices with poor display performance. It’s not even just the device that you need to consider. The environment in which the product is used (outside or in a dark room), the eyesight of the mainstream audience, and so on, may require a more accessible visual experience. Otherwise, chances are your product will be almost unusable in a real-world use scenario…
But of course it’s unrealistic to judge by experience alone. So the WCAG (Web Content Accessibility Guideline) standard was established. Although this standard is designed to meet the visual experience of visually impaired users, it can also help ordinary users to use it more easily.
In fact, the WCAG also contains a number of accessibility design standards that guide product designers to make products easier to use from the perspectives of vision, hearing, movement and intelligence. But today I will mainly extract “color contrast barrier standard” this one to talk about.
Color contrast barrier standard
Hue and saturation have little or no effect on readability as measured by reading performance. What really affects reading performance is the color contrast caused by color lightness.
The purpose of the WCAG color Contrast standard definition is to provide enough contrast between text and background to make it easy for people with a wide range of vision to read. That is, text or images that meet the WCAG standard will have a high enough color contrast to be easily distinguishable from the background.
WCAG has developed two standard regulations, namely “Regulation 1.4.3: Contrast (minimum) standard” (AA standard) and “Regulation 1.4.6: Contrast (Enhanced) Standard” (AAA standard). AAA standard is more stringent than AA standard, suitable for visual requirements of more stringent product types. The two standards are defined as:
1.4.3 Contrast (minimum) : Plain text should have at least 4.5:1 contrast between visual presentation and background, and large text should have at least 3:1 contrast between presentation and background.
1.4.6 Contrast (Enhanced) : Plain text has a visual contrast of at least 7:1 against the background and large text (¹) has a contrast of at least 4.5:1 against the background.
Note: ¹ Large text: WCAG specifies that “≥18pt regular word weight” text or “≥14pt heavy bold” text is large text.
In the iOS human-computer Interaction specification and the Material Design guideline, we can see that there are many color contrast indicators that comply with the WCAG standard.
For example, “the color contrast between the bottom line of the text box and the background should be at least 3:1”, and “brightness contrast should be at least 4.5:1” in the MD specification in dark mode. These data are from the WCAG standard.
How is color contrast calculated
(Tips: Math bad friends… You can skip to the next section and use the handy tools…)
Now that we know the metrics, it’s time to explore how color contrast is calculated. This formula can be found in the WCAG standard:
Contrast = (L1 + 0.05)/(L2 + 0.05) “where: L refers to the relative brightness of color”
Relative brightness L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Where R, G, and B are as follows: if XsRGB <= 0.03928, X = XsRGB/12.92; Otherwise X = ((XsRGB+0.055)/1.055) ^ 2.4
XsRGB refers to RsRGB, GsRGB, or BsRGB. The value is XsRGB = X8bit/255. X8bit refers to the value from 0 to 255 for R, G, and B channels in 8 bits/channel respectively.
I recommend not obsess too much about the underlying logic of the formula, such as where a number like 0.2126 comes from. After all, the official formula is good enough to calculate color contrast. Through my early research, the source of these data combined with color coordinate system, matrix operation and so on a series of evolution… If you are particularly interested, you can check it out. I won’t go into too much detail here for reasons of length.
From the example above, we not only know how to calculate the contrast of two colors, but also come to the conclusion that the maximum contrast of the colors is 21:1 (pure black and pure white).
Contrast tool and example verification
With such a complicated formula, it is impossible to calculate the contrast by hand every time… The good news is that there are a number of online tools that can help with Contrast checking, such as WebAIM’s Color Contrast Checker, for monochrome Contrast. Or a color palette Contrast tool like EightShapes Contrast Grid.
With this quick tool, I quickly verified the color availability of both the iOS and MD specifications.
As you can see, the iOS specification uses plain white text directly on a plain black background, pushing the color contrast to an unexpected maximum. This may seem a little different from the conventional wisdom: when designing a light color mode, we don’t use pure black text on a white background; A plain white font will not be used on a black background.
This may be because apple’s intention when it introduced dark mode was to create a color mode that would work both day and night, rather than just “night mode” for low-light environments. It needs to be compatible with the human eye’s ability to capture light in different light conditions at the same time. In this sense, dark mode is more difficult to design than night mode, not simply reducing the contrast.
MD, on the other hand, is more conservative than iOS in color contrast and prefers dark gray in background color.
Using a light font on a dark grey background will have a lower contrast than on a black background and will help reduce eye strain. In terms of design, MD more often uses shadows to show hierarchy. When changing to dark mode, the system will retain the default shadows, and it is easier to see these grey shadows with a dark grey background. The official contrast ratio for dark surfaces and white text is at least 15.8:1.
I have to say that the details of color contrast are really difficult to grasp, but it also reflects a designer’s patience and depth from the details.
“Dark Mode,” which has been gaining popularity recently, has a particular emphasis on contrast.
I remember when wechat’s “Dark mode” was first launched, it was criticized by many netizens for being hot in the eyes… Later, a colleague immediately analyzed the reason, and came to the conclusion that it was because the color contrast control was not properly controlled, leading to users looking at the interface with low contrast for a long time, resulting in visual fatigue. Of course, now the wechat team has been gradually optimized. For more information about design materials, go to topdesign.com.
For reasons of space, I have only introduced the concept of color contrast. I will continue to share with you how the MD team worked on the “Dark Mode” color scheme and how you should use color contrast to verify your product color scheme.