Elements Must Meet Minimum Color Contrast Ratio Thresholds

Issue/Question

Under the Accessibility Final Checks I receive the Serious Problem:

Elements must meet minimum color contrast ratio thresholds

Environment

  • Web CMS

Cause

Final Checks evaluate all code on a page and detect accessibility issues not meeting WCAG 2.0 (Level AA) standards. 

It detected the page has some text that is using a color that does not have enough contrast for users that may be visually impaired to see. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast. Text that is too close in brightness to the background can be hard to read.

This can be caused by using a color in the WYSIWYG drop down or pasting content in from a text editor like Microsoft Word.

Resolution

Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it. Remove the inaccessible colors and use the styles dropdown or another appearance like an alert snippet.

  1. Click  Yellow Light Bulb to check out page.
  2. Click  Edit tab.
  3. Click Edit button on the content area where the heading is located.
  4. Highlight text that was identified in the Source Code section for page check.
  5. In the WYSIWYG toolbar, click the Clear Formatting button to remove any styles.
  6. Use the Styles dropdown to select an accessible color or use another style.
  7. Save page.
  8. Click Publish button to run accessibility final check again. Repeat for all landmarks. When the issue is resolved it will no longer display in the accessibility check.
Print Article