Web Governance
Provide sufficient contrast between text and background colors
1.4.3 Contrast (Minimum)
This document provides information about the related Acquia Web Governance accessibility check:
Provide sufficient contrast between text and background colors.
Text should have a 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, is 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.
This check affects individuals with:
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.
This section provides instructions on how to fix the issue.
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).
On the page in the Browser Extension, click (magnifying glass icon).
Web team: Who have competencies in visual design or front-end development for changes in your CMS/website template.
Content authoring: Who can update the content and adjust the styling.
This section contains useful resources for this subject.
1.4.3 Contrast (Minimum) (W3C website)
Click Cancel to remove the yellow highlight.
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.
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.
Click Cancel to remove the yellow highlight.
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.
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