WCAG2 Are You Still Using It? UI Contrast Visibility Standard (Readability Contrast)
The orange background with white text on the button often fails to meet WCAG2 standards. Can it still be used, or is it solely based on the designer’s intuition?
I believe ordinary people cannot effectively represent the perspectives of color-blind individuals. If choices are based solely on experience and do not meet WCAG standards, further exploration may be necessary.
Have you ever considered this? The widely used WCAG standard in UI design can sometimes result in a ‘Fail’ rating under certain circumstances, even when it doesn’t appear to be a significant issue to us.
This discrepancy arises from the inherent calculation methods used by WCAG. Below, I will explain these methods and discuss how the new APCA standard can address existing problems while continuing to excel in the future of UI design.
What is WCAG?
The WCAG (Web Content Accessibility Guidelines) is not just a guide for Color Contrast; it is a comprehensive resource for web accessibility. We acknowledge the importance of WCAG in addressing Color Contrast, as well as its contributions in other areas.
The WCAG 2.x version uses a binary system—Pass or Fail—to indicate whether the colors meet visibility contrast standards. However, the way the human eye perceives contrast is non-linear. This means that the guidelines do not account for the high dynamic range of human vision, which can be considered an unfair limitation.
High Dynamic Range
Let’s use photography as an example. Many people have experienced the challenge of taking photos against the sun. In bright sunlight, objects that appear pitch black to the camera may still be visible to our eyes. This is due to the remarkable ability of our eyes to adjust automatically to varying light conditions. The pupil controls the amount of light entering the eye, allowing us to see objects clearly even in backlit environments.
On the other hand, if a camera has a larger photosensitive component—such as Hasselblad’s medium format film sensor—it performs significantly better in these challenging lighting situations. When the frame size is limited in cameras like smartphones, manufacturers often utilize HDR (High Dynamic Range) photography. This technique combines multiple frames to emulate the way our eyes perceive light and detail.
Thanks to the advancements in Micro LED and OLED technology, the media we use to interact with digital content will increasingly lean towards HDR content. This evolution marks a significant shift in how we experience visual media.High Dynamic Range
Issue with WCAG 2: Formula
The problem has gradually emerged: WCAG calculates using the relative brightness value of colors, known as luminance. This refers to the brightness of a color itself.
- R, G, and B represent the red, green, and blue components of the color, respectively.
Color Relative Luminance Calculator
This website can calculate luminance. Afterward, you can process the text with the background color ratio:
- L1 is the luminance of the foreground color.
- L2 is the luminance of the background color.
In simple terms, WCAG relies on the relative brightness of colors as a basis for its calculations, which does not account for the adaptive nature of the human eye.
Relative brightness remains constant, but the adaptability of the human eye is dynamic. How can this be correct?
Let me illustrate with a favorite example: Imagine a completely dark room with 100 lit candles. Does it become brighter? Yes. If you then add another 100 candles on top of the initial 100, does it get even brighter? Again, yes.
However, which transition feels brighter: going from 0 to 100 candles, or from 100 to 200? From a perceptual standpoint, the change from 0 to 100 should feel more noticeable. Interestingly, even though the brightness difference between 100 and 200 candles is the same as that between 0 and 100, the perceived intensity feels different. The explanation lies in the adaptability of the human eye.
Where WCAG 2.X Missed the Mark
The formula used in WCAG 2.X has some shortcomings. When both the text and background colors are light, the calculated contrast value tends to be low because of the high relative luminance of the colors. On the other hand, when colors with low relative luminance are used, applying the same formula often results in a high contrast value.
WCAG original author’s words
As of the 19th of June, 2019 edit: I will reiterate a bit because “accurately modeling lighting displays (luminous screens) under real-world environmental conditions” is not possible. WCAG fails miserably with mid-range colors because it cannot adapt to human non-linear perception. Therefore, it is not suitable for systematic viewing of digital product readability, especially in the mid and dark ranges.
APCA
Advantages of APCA
The Accessible Perceptual Contrast Algorithm (APCA) is a new model that calculates lightness contrast (Lc) results. We will not delve into the standard Lc values for icons and text since there is ample information available online. The most noticeable advantage of APCA is its ability to reference both positive and negative values at the same numerical level for light and dark backgrounds. This feature allows for the design of a color system that offers more consistent contrast.
Difference from WCAG 2.X: Formula
The shortcomings of WCAG 2.X arise from issues with its formula. APCA has significantly improved upon this with a new formula:
- Lc(foreground) refers to the lightness of the foreground color.
- Lc(background) refers to the lightness of the background color.
Lc is calculated based on the CIE Lab Color Space, which is a perceptually uniform color space that considers the human visual system’s response to different wavelengths of light.
ACTTR Technology — CIELAB Color Space and Coordinate Exchange
This tool can calculate the coordinates of a color in the CIELAB color space. To determine the Lc value, you can use the known RGB values in the formula to obtain f(L). The function f(L) maps RGB values to the CIE Lab space. The relevant formula is as follows:
*L represents the brightness of color (luminance), ranging from 0 to 1. Next, calculate Lc using f(L) as follows:
The Lc of colors is a number between 0 and 100. A higher Lc value means the color is lighter (brighter), common Lc values for colors can be referenced:
Common Lc Values Reference
Sharp-eyed readers may have noticed that the foundation of the APCA formula, f(L), is based on the calculation of the CIE Lab color space. This model is rooted in the wavelength response of the human eye to light. Therefore, the results of the APCA color standard can serve as a more user-friendly method for UI designers to assess color readability when creating digital content.
Conclusion
The WCAG 2.X standards have been in the industry for many years. However, the media devices prevalent at the time WCAG 2.X was developed (such as CRT screens) are vastly different from today’s LCDs and LEDs. While the contributions of WCAG 2.X standards to the design industry are undeniable, it may be time to upgrade to newer standards that better align with current needs.
So far, there seem to be few designers or teams in Taiwan discussing or utilizing the APCA standard. It’s possible that certain specific service targets necessitate adherence to the WCAG 2 standards for broad applicability. Given that the APCA standard is still in development and not widely adopted, there are many plugins in Figma that support contrast detection using APCA. Therefore, we might consider gradually incorporating APCA into our workflow moving forward.