Skip to main content
WCAG 1.4.11 - LogoWCAG 1.4.11 - Logo

Success Criterion 1.4.11 - Level AA

Non-text Contrast

Ensure that content on the screen has a contrast ratio of at least 3:1. This includes graphical elements such as icons, input fields and the focus indicator. Also ensure that selected elements are clearly recognizable. Visually impaired and color blind users need to be able to distinguish content. This makes apps easier to use for everyone, for example outside in the sun.

Impact

  • For visually impaired people, sufficient contrast is important to be able to perceive all content.

  • Sufficient contrast makes an app easier for everyone to use. For example, if you want to use the phone in the sun.

Check

"Is the contrast of content at least 3:1?"

You can take a screenshot of an app to determine the color codes and calculate the contrast. This can be done, for example, with the Contrast Checker of WebAIM.

Solution

Calculate contrast

Support dark mode

Resources