Background and Foreground Colors Have Sufficient Contrast Ratio

Why the audit is important

Low-contrast text is difficult or impossible for many users to read.

See Accessible Styles for more information.

How to pass the audit

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

  1. Install aXe.

  2. Open DevTools.

  3. Click the aXe tab.

  4. Click Analyze. aXe generates a report highlighting any accessibility issues.

  5. In the Results column, click on the field that says "Elements must have sufficient color contrast."

  6. Click the Inspect button to locate the element in the DevTools. Click the next button to see more failing elements.

    aXe, showing contrast ratio results. Figure 1: aXe, showing contrast ratio results. The next button (which is easy to overlook) is highlighted by a red rectangle. The inspect button is indicated by a red arrow.

  7. 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.