Skip to main content
Logo Appt Light

Success Criterion 1.4.11 - Level AA

Non-text Contrast

Ensure that the content on the screen has a contrast of at least 3:1 with the surrounding colour. Think of graphic elements such as icons, buttons and input fields. By keeping this ratio, visually impaired and colour blind users can distinguish the content well. In addition, this makes an app easier for everyone to use, 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 colour codes and calculate the contrast. This can be done, for example, with the Contrast Checker of WebAIM.

Solution

Calculate contrast

On Android, you can use the Accessibility Scanner app to detect contrast issues automatically.

// No code required

Support dark mode

On Android, you can detect dark mode by checking if the uiMode configuration contains UI_MODE_NIGHT_MASK.

By adding -night resources to your project you can let Android automatically pick the right resources. For example, add a colors.xml file inside a values-night folder to specify night mode colors.

fun Context.isInNightMode(): Boolean {
    val nightModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
    return nightModeFlags == Configuration.UI_MODE_NIGHT_YES
}

Resources

Feedback?

Let us know!