Web Governance
Text color must provide high contrast with its background
1.4.6 Contrast (Enhanced)
This document gives information about the related accessibility checks:
Text color must provide high contrast with its background.
Text should have good contrast ratio between the foreground color of the text and the background color. The contrast ratio must be at least 7:1 for regular text and at least 4.5:1 for large text. That is, large text requires slightly lower contrast than regular text for satisfying this check.
Large text is defined as; 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above.
For comparison, the maximum contrast ratio, for example black text on a white background, would be 21:1.
Text is easier to read when there is a good contrast ratio between the text and the background. People with low vision often have difficulty reading text that does not contrast enough with the background. Some types of color deficiencies can lower the contrast ratio even further, which makes the problem worse.
Low Vision: including many elderly due to natural age related vision loss.
Color Blindness: Individuals who are color blind 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.
Emily, 63 years:
“When I forget to bring my glasses, there are many websites that are hard for me to read. – When they use light gray text color it is also hard to see anything on my smartphone when I am outside in sunlight”.
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 written 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 next example, the colors are adjusted to white text on dark green background for better contrast.
This section gives information on how to fix this type of error.
Click Accessibility (icon of a human with arms outstretched) on the menu bar.
Click Checklist from the from the menu on the left.
Select the AAA compliance level to filter for on the Accessibility Checklist page. The filters are located directly above the list.
Find the check in the list called, “Text colour must provide high contrast with its background” (you can use the search bar to assist with this.)
Click on the number of pages on the same row as the check on the far right. The pages with errors pane opens.
Choose a page to open with the browser extension (magnifying glass icon.)
Web team: (Visual Design and front-end developer) for changes in your CMS/website template.
Content Authoring; when special styling is applied via the content.
This section contains useful resources for this subject.
On the page in the web browser extension view, highlight one of the errors using the magnifying glass button. After you do so, click “Cancel” so the yellow box disappears.
Calculate the luminosity contrast ratio between the text and the background color. To do this:
Open the free Acquia Color Contrast Checker.
Use a color picker like ColorZilla (Google Chrome extension) to “pick” the text color from the issued text.
Paste the color code into the “Foreground color picker” on the Contrast Checker. (If you are using ColorZilla, the color code automatically copies to your clipboard.)
Repeat the process for the background color.
In your CMS, adjust the contrast so that it is at least 7:1 for regular text and at least 4.5:1 for large text. Large text is defined as; 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above.
Tip! You can use the Acquia Color Contrast Checker to identify a color that increases the contrast!
If this content did not answer your questions, try searching or contacting our support team for further assistance.
On the page in the web browser extension view, highlight one of the errors using the magnifying glass button. After you do so, click “Cancel” so the yellow box disappears.
Calculate the luminosity contrast ratio between the text and the background color. To do this:
Open the free Acquia Color Contrast Checker.
Use a color picker like ColorZilla (Google Chrome extension) to “pick” the text color from the issued text.
Paste the color code into the “Foreground color picker” on the Contrast Checker. (If you are using ColorZilla, the color code automatically copies to your clipboard.)
Repeat the process for the background color.
In your CMS, adjust the contrast so that it is at least 7:1 for regular text and at least 4.5:1 for large text. Large text is defined as; 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above.
Tip! You can use the Acquia Color Contrast Checker to identify a color that increases the contrast!
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance