Inappropriate Text-Background Contrast Check

RuleSets of AccessMonitor - the validator of web accessibility practices

Inappropriate Text-Background Contrast Check

Description

The “Inappropriate Text-Background Contrast Check” evaluates whether there is any text that has insufficient contrast against its background.

Example outcome

I located 1 color combination for which the contrast ratio is lower than the minimum contrast ratio allowed by the WCAG, which is 3 to 1 for larger font text and 4.5 to 1 for regular font text.

Impact

Fixes

To address inappropriate contrast between text and background:

  1. Locate the text that doesn’t have sufficient contrast against its background.
  2. Update the color pair (font and background) to meet or exceed the minimum contrast ratios as per WCAG.

Resources