This document provides information about the related accessibility checks:
Text has minimum contrast
Link text color must contrast sufficiently with its background color.
Visited link text color must contrast sufficiently with its background color.
When hovered on link text color must contrast sufficiently with its background color.
Active link text color must contrast sufficiently with its background color.
What
Text must have a good contrast 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.
Why
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.
Affected users
Low Vision: This includes many elderly due to natural age-related vision loss.
Color Blindness: Color-blind individuals have a better ability to distinguish text when there is good contrast.
No impairments: All users 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.
User story
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.”
Examples
This section provides some examples of the issue.
Example: Low text contrast
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.
Example: Good text contrast
In this example, the colors are adjusted to white text on a dark green background for sufficient contrast.
How
How to fix it
How to fix it.
The Web Governance platform highlights 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:
Default link text color
Visited link text color
Hovered link text color
Active link text color.
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.
While adjusting the colors, you can use the Acquia Color Contrast Checker to calculate contrast ratios that comply with the requirements for contrast checks.
Refer to the ACT rules section below for a link to a complete technical explanation of this check.
This document provides information about the related accessibility checks:
Text has minimum contrast
Link text color must contrast sufficiently with its background color.
Visited link text color must contrast sufficiently with its background color.
When hovered on link text color must contrast sufficiently with its background color.
Active link text color must contrast sufficiently with its background color.
What
Text must have a good contrast 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.
Why
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.
Affected users
Low Vision: This includes many elderly due to natural age-related vision loss.
Color Blindness: Color-blind individuals have a better ability to distinguish text when there is good contrast.
No impairments: All users 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.
User story
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.”
Examples
This section provides some examples of the issue.
Example: Low text contrast
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.
Example: Good text contrast
In this example, the colors are adjusted to white text on a dark green background for sufficient contrast.
How
How to fix it
How to fix it.
The Web Governance platform highlights 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:
Default link text color
Visited link text color
Hovered link text color
Active link text color.
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.
While adjusting the colors, you can use the Acquia Color Contrast Checker to calculate contrast ratios that comply with the requirements for contrast checks.
Refer to the ACT rules section below for a link to a complete technical explanation of this check.
Web Governance