Wed Oct 30 2024 08:49:00 GMT+0000 (Coordinated Universal Time)
1.4.3 Contrast (Minimum)
This document gives information about the related Optimize checks:
Text has minimum contrast.
Text must have good contrast ratio between the text color and the background color. To pass this check, the contrast ratio should be at least 4.5:1 for regular text or 3:1 for large text.
For reference, the maximum contrast ratio, between pure black and pure white, is 21:1.
Large Text is text with a computed font-size of:
at least 18 points, or;
at least 14 points and a computed font weight CSS property of 700 or higher.
Good contrast ratios between text and background colors ensure 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 a screen in bright sunlight or when the screen is dimmed due to a power-saving mode.
This check affects the following users who have:
Low vision: including many elderly due to natural age-related vision loss.
Color blindness: Colorblind individuals have a better ability to distinguish text when there is good contrast.
No impairments: All users will benefit from good contrast when they view content under special lighting conditions, such as 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 gives some examples of the issue.
A web page that has a text box with important information. The text in the box is in green, but 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 Optimize platform highlights elements that contain text with insufficient contrast levels.
To resolve the issue, you need to increase the contrast level. If you have a light background color, this means you should make the text in a color that is darker. Conversely, if you have a dark background color, you should lighten the text color.
This is typically adjusted through the website's CSS style sheets.
Tip: You can use the Optimize Color Contrast Checker to calculate the color contrast ratios.
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.