Background and Foreground Colors Have Sufficient Contrast Ratio

Why the audit is important

Some users with low vision have a difficult time sensing contrast. They don't see many areas that are very bright or very dark. Everything looks about the same brightness. If text doesn't have a high contrast ratio, these users literally have trouble seeing it at all.

How to pass the audit

To find and fix each of element that does not have a sufficient contrast ratio:

  1. Install ChromeLens.

  2. Open DevTools.

  3. Click the ChromeLens tab.

  4. Click Run Accessibility Checks. ChromeLens outlines each element that fails a test.

  5. Hover over the outlined elements to find the ones with insufficient contrast ratios.

    ChromeLens, after running accessibility checks. An element is
     being hovered over in order to view its issues. Figure 1: ChromeLens, after running accessibility checks. An element is being hovered over in order to view its issues.

  6. Adjust the foreground or background color of the failing elements so that they have a contrast ratio of at least 4.5 to 1, which is the minimum recommended ratio. See contrast ratio to calculate ratios.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

This audit is powered by the aXe Accessibility Engine. See Text elements must have sufficient color contrast against the background for more information.