Web Governance
Provide sufficient contrast between text and background colors
1.4.3 Contrast (Minimum)
This document provides information about the related accessibility checks:
Provide sufficient contrast between text and background colors.
Text should have good contrast ratio between the foreground color of the text and the background color. The contrast ratio must be at least 4.5:1 for regular text and at least 3: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; Colorblind individuals have a better ability to distinguish text when there is good contrast.
No impairments: All users will benefit from good contrast when viewing 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”.
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.
How to fix it:
Click Accessibility (icon of a human with arms outstretched) on the menu bar. The Accessibility dashboard opens.
Click Checklist from the from the menu on the left.
Select the AA 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, “Provide sufficient contrast between text and background colors” (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.
On the same row as a page, click Inspect page with browser extension (magnifying glass icon).
Web team: Such as those with competencies in visual design or front-end development for changes in your CMS/website template.
Content authoring: When special styling is applied through the content.
This section contains useful resources for this subject.
On the page in the web browser extension, click Highlight (magnifying glass icon).
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 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 will automatically copy to your clipboard.)
Repeat the process for the background color.
In your CMS, adjust the contrast so that it is at least 4.5:1 for regular text and at least 3:1 for large text. Large text is defined as 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above.
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, click Highlight (magnifying glass icon).
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 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 will automatically copy to your clipboard.)
Repeat the process for the background color.
In your CMS, adjust the contrast so that it is at least 4.5:1 for regular text and at least 3:1 for large text. Large text is defined as 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance