Web Governance
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:
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.
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 Web Governance Browser Extension, click Highlight (magnifying glass icon).
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.
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.
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