Table of Contents
The Web Content Accessibility Guidelines (WCAG) for readability, has always been a good way to ensure content on digital products is accessible. However, if you go deeper into the readability rabbit hole, you will find it’s far from perfect.
WCAG 2 is designed to be user-friendly and easily understandable for everyone. However, its simplicity is also its major drawback. It only considers the luminance contrast of colors, disregarding how humans perceive them. In other words, WCAG 2’s mathematical approach lacks perceptual accuracy and fails to align with human perception.
This method can lead to issues for readers in certain situations. It is unsurprising, considering that WCAG has been around for over 15 years. While it has served its purpose well, it’s now time to embrace a more effective approach.
How does the WCAG 2 ratio work?
WCAG 2 provides guidelines for contrast ratios to ensure sufficient visual accessibility. The contrast ratio measures the difference in luminance between text or images and their background. WCAG 2 specifies minimum contrast ratios for different levels of accessibility compliance.
For normal text and images, the minimum contrast ratio requirement is 4.5:1 against the background. This ensures that the content is easily readable for most users. However, for larger text or images, such as headings or captions, a lower contrast ratio of 3:1 is acceptable.
WCAG 2 also considers contrast for user interface components and graphical objects. These elements should have a contrast ratio of at least 3:1 against adjacent colors to ensure they stand out and are distinguishable.
To sum up, the higher the contrast point is, the easier it is to read content.
However, the contrast issue is more nuanced and complex than what can be captured by a single ratio. While WCAG 2 provides guidelines for contrast ratios, there may be situations where these ratios do not adequately address the accessibility needs of all users.
Failure of WCAG 2: The notorious orange button and others
Which button has a higher contrast point according to WCAG?
For most people, the button on the right is more readable. So if you guessed the button on the right has a higher contrast point, you are not alone. Still, in reality, the button on the left is more “accessible” according to WCAG.
This is a common issue with orange buttons or other colors that have vibrant hues.
It’s crucial to recognize that not everyone will find white text on a black background easier to read. Different individuals have varying vision abilities and preferences, influenced by factors such as age, conditions, impairments, equipment, environments, and personal perceptions of what is considered normal.
Nevertheless, studies have indicated that a significant majority of users prefer and experience less difficulty when reading white text on an orange background compared to black text.
Ericka O’Connor has conducted a throughout test on this problem. About 60% of the participants found it easier to read white text on an orange background and 40% preferred black text. While we can not confidently say that white text on orange is always better, we can say that the math in WCAG2 is flawed.
There are numerous other instances where WCAG contrast ratings appear to fall short of meeting our needs:
During an independent study conducted by a PhD researcher at Cambridge in the UK, around 5,000 colors were analyzed as part of the peer-review process.
It was discovered that approximately 47% of the colors that passed the WCAG 2 criteria should have actually been rejected due to their lack of readability.
Conversely, about 23% of the colors deemed non-compliant were found to be perfectly readable and even more suitable for individuals with color vision impairments.
How is the WCAG contrast ratio calculated?
The WCAG contrast ratio is determined by a mathematical calculation based on the relative luminance of two colors.
To calculate the WCAG contrast ratio, we use the relative luminance, which represents the light output and is typically expressed as a number between 0 and 1.0. A value of 1.0 represents the intensity of white.
The term “relative” is used because it measures the light intensity in comparison to white.
The contrast ratio is calculated using the following formula:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
In this formula:
L1 represents the relative luminance of the lighter color.
L2 represents the relative luminance of the darker color.
The relative luminance (L) of a color is determined by the following formula:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
In this formula:
R, G, and B are the red, green, and blue values of the color, respectively, normalized within a range of 0 to 1.
The resulting contrast ratio value falls within the range of 1 to 21. A higher contrast ratio indicates better distinguishability of text or content for individuals with visual impairments.
For example, if a green color has a coefficient of 0.7152, it means that the green is 71.34% as intense as white at the same level of stimulus. The same principle applies to the red and blue colors.
What’s the problem?
We don’t linearly perceive light to its intensity.
Instead, some sources refer to the human perception of light as “lightness.” This perception is not linear but rather perceptually weighted. Under low light conditions, our vision is more sensitive to small changes in light compared to higher light conditions.
WCAG is limited in its ability to take these factors into account. The suggested calculations by W3C make certain assumptions and weight red, green, and blue color values differently in terms of brightness. These weights are only approximations and represent colors at full saturation, which may not accurately represent the full range of colors encountered in practice.
Furthermore, different screens may display your orange color as brighter or darker, but the formula used by WCAG can only provide a single number for contrast calculations. For example, this formula would not be suitable for printed documents as “bright” colors like white do not have the same luminosity they do on digital screens.
Traditionally, green appears disproportionately brighter on most screens, leading to a higher weighting. Since your orange color contains a significant amount of green, reducing it slightly can help meet the AA contrast requirement without significantly altering the color. This difference may even be imperceptible to you and your users.
How we perceive color contrast
Our eyes can perceive colors thanks to light-sensitive cells in our eyes, which are called cones.
65% of the cones are sensitive to yellow/ green, but they also respond to red. Around 30% of cones are sensitive to green, while only 5% are sensitive to blue. Even though there are fewer blue-sensitive cones compared to the other types, they are highly sensitive, which helps compensate for their lower numbers.
But how do we translate color to contrast?
The key here is luminance. When it comes to reading, luminance is crucial.
Luminance refers to the lightness or darkness of a color without considering its specific hue. Interestingly, most of what we see is not focused on color. Our vision system primarily relies on luminance to capture fine details and detect edges. It’s like having a dedicated black and white channel in our brain called luminance, which processes information first.
Color, on the other hand, is processed a bit later, with a delay of about 70 milliseconds. That’s almost like a two-frame delay in a film. As a fun fact, it takes around one-fifth of a second (200 milliseconds) from the moment light reaches your eyes to the point where your brain perceives it as an image. So, what you see at this very moment actually happened a fraction of a second ago.
What is the better way?
Exciting news! WCAG 3 is on its way to replace the current guidelines. It will bring a better algorithm called the Accessible Perceptual Contrast Algorithm (APCA), created by Andrew Somers. APCA is based on research about how humans perceive visual information, so it provides more accurate recommendations. Sometimes, APCA may suggest using opposite colors for text (like white instead of black) compared to what WCAG 2 AA has recommended.
The problem with WCAG 2 guidelines is that they oversimplify things by giving pass or fail ratings. However, contrast is a complex subject, and one approach doesn’t fit everyone’s needs, especially when it comes to font size.
How is APCA different from WCAG2?
One main problem is that the numbers produced by WCAG 2’s contrast calculations don’t match how humans perceive contrast for optimal readability. On the other hand, APCA is designed to be more accurate under human perception, providing consistent contrast predictions across the entire visible range. WCAG 2 sometimes artificially inflates contrast values to compensate for these limitations. APCA, however, doesn’t require such adjustments and offers precise contrast predictions, allowing designers to choose from a wider range of colors.
APCA guidelines are better suited for different scenarios and sizes of elements. For instance, when it comes to body text, higher contrast is necessary for better readability, and APCA takes that into account. Body text has a higher spatial frequency and demands the highest contrast level.
But what about other elements like buttons? WCAG 2 enforces similar contrast requirements for all elements, which can be challenging for designers. In contrast, APCA, being perceptually accurate, recognizes that larger elements like buttons can still maintain readability with lower contrast, such as Lc45 or even as low as Lc30. This provides designers with more flexibility while ensuring that the content remains easy to read.
Another different aspect is unlike WCAG 2, when you exchange the colors of the text and background, it has an impact on the outcome.
This is logical if you consider it – since text occupies a smaller visual area, it naturally has lower contrast.
If you want to dive more into the mathematical aspect, check out this post.
How to apply APCA in your design
For starter, you can access this website to calculate contrast point.
Unlike WCAG, APCA doesn’t categorize contrast ratings as pass or fail. Instead, APCA uses a sliding scale that varies across the visual range and takes different use cases into account, as different uses have different contrast requirements.
These general levels are sufficient on their own, without the need for a lookup table. APCA measures contrast using an Lc value (lightness contrast) ranging from Lc 0 to Lc 105+. When it comes to accessibility, Lc 15 is considered the point where many users may find text invisible, especially for thin lines, and Lc 90 is the preferred contrast level for body text.
Here are some specific levels for different types of text:
Lc 90: Recommended for smooth text and columns of body text with a font size of at least 14px/weight 400 (normal).
Lc 75: The minimum level for columns of body text with a font size of at least 18px/400. Lc 75 should be considered the minimum for text where readability is important.
Lc 60: The minimum level recommended for content text that is not body, column, or block text. In other words, text that you want people to read. The minimum values are based on the reference font Helvetica: 24px normal weight (400) or 16px/700 (bold).
Lc 45: The minimum for larger, heavier text such as headlines (36px normal weight or 24px bold). This is also the minimum for pictograms with fine details.
Lc 30: The absolute minimum for any text not mentioned above. This includes placeholder text and disabled element text. This is also the minimum for large/solid non-text elements that are semantically meaningful and understandable.
Lc 15: The absolute minimum for any non-text element that needs to be discernible and distinguishable, and is at least 5px in its smallest dimension. This may include disabled large buttons. Designers should treat anything below this level as invisible, as it will not be visible to many users. This minimum level should be avoided for any items that are important for the use, understanding, or interaction of the website.
These are the basic minimum levels, similar to the A/AA levels in the old WCAG 2. To achieve the equivalent of AAA, simply increase the contrast values by Lc 15. Keep the contrast below Lc 90 for large fonts in dark mode.
In a nutshell:
15 – 🚫 Minimum for non-text elements
30 – ⚠️ Absolute minimum for any text
45 – ‼️ Minimum for large text (the old 3:1)
60 – ❗Min for body text (the old 4.5:1)
75 – ✅ Preferred level for body text
Is it essential to change?
Implementing a new standard can be challenging and complicated, especially when dealing with a complex system like APCA that has no clear pass or fail indicator.
From what I can observe, we are likely to have a lengthy transition period ahead of us. This wouldn’t be a problem if WCAG 2 was universally understood and consistently applied as a baseline, but unfortunately, that’s not the case. Most websites currently do not even meet WCAG standards, and I believe this situation will persist in the foreseeable future, even with the introduction of a new standard.
Considering this, I believe WCAG still holds its place in the design world for its simplicity and ease of application, particularly regarding contrast requirements. However, once you grasp the concept of contrast and have the opportunity to enhance the user experience further, I recommend considering a switch to APCA.
In the meantime, I suggest approaching the current WCAG contrast calculations with some caution. While it’s important to comply with them if necessary, I also encourage you to test your color combinations using APCA for a more assured level of accessibility.
