1.4.6 Contrast (Enhanced)
This document provides information about the related Acquia Optimize checks:
Text must have a good contrast ratio between the text color and the background color. To pass this check, the contrast ratio should be at least 7:1 for regular text or 4,5:1 for large text.
For reference, the maximum contrast ratio, between pure black and pure white, is 21:1.
Large Text is text with one of the computed font-sizes listed below:
At least 18 points
or
At least 14 points and a computed font weight CSS property of 700 or higher.
Good contrast between text and background colors ensures that people with visual impairments can read the text more easily. This is particularly important for older individuals who often experience reduced contrast sensitivity. Strong contrast also benefits many users in specific lighting conditions, such as when they read text on a screen in bright sunlight or on a screen that is dimmed due to low battery mode.
Helena Koenig, a 55-year-old art curator from Vienna, Austria, has dedicated over 30 years of her life to the world of art. She works at a national museum, where she curates exhibitions and collaborates with international artists to present art to the public in a meaningful and engaging way.
“Well, I suppose it really started when I turned 40 and noticed that reading small print was becoming more difficult. You know, at first, it was not such a big deal—I just started wearing reading glasses. It seemed like a minor inconvenience, but as the years went by, I realized it was more than just that. The thing that bothers me the most now is trying to read online content, especially when the contrast between the text and the background is poor. Even with my glasses on, it can be quite frustrating.
I spend so much of my time researching online, looking through digital archives, reading articles about art, and planning exhibitions. So, when I come across websites that are not designed with people like me in mind, it really slows me down. And it is not just about me—I think about how many others, especially older visitors, might face the same challenges.
This whole experience has made me far more aware of how digital content is presented, particularly in the online spaces I work with. It is something I now push for at the museum. We have been working on improving our digital exhibits, like making sure the text is easier to read and offering more options for how the content is displayed. My goal is to make sure everyone can engage with our work, no matter their age or how well they see things. It is important to me, both personally and professionally.”
This section provides some examples of the issue.
This example shows a web page that has a text box with important information. The text in the box is written in green, but it is hard to read because it is a green shade on a slightly lighter green background. The two greens are too similar, which makes it difficult to see the text clearly.
In this example the colors are adjusted to white text on a dark green background for sufficient contrast.
The Acquia Optimize platform will highlight elements that contain text with insufficient contrast levels, including standard text on the website as well as link text in various states. These states include:
To resolve the issue, you need to increase the contrast level between the text and its background. For light background colors, darken the text color. Conversely, for dark background colors, lighten the text color.
When you adjust the colors, you can use the Acquia Color Contrast Checker to calculate contrast ratios that comply with the requirements for contrast checks.
See the ACT Rules section below, which includes a link to a complete technical explanation of this check.
Related accessibility conformance testing rules:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Fri Feb 07 2025 14:59:45 GMT+0000 (Coordinated Universal Time)