Background and Foreground Colors Have Sufficient Contrast Ratio

Overview

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

See Accessible Styles for more information.

Recommendations

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.

More information

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

Feedback