logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 1.13 - Non-text Contrast

This e-shop has an issue when viewed on a dark theme that can affect people with vision deficiencies. It provides an icon in addition to color information for the availability of the products so that they are accessible for people with colorblindness. The problem is that the icons do not have enough contrast. Once again, the contrast checker tool is very helpful.

You can try the following colors:

  • #00A700
  • #FF5050

Requirements

Pending requirement:

Both of the available within 2 days icons must have a contrast of at least 3:1

Pending requirement:

Both of the available within 10 days icons must have a contrast of at least 3:1

Need help?

Show me the solution

Learning Material

logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 1.13 - Non-text Contrast

This e-shop has an issue when viewed on a dark theme that can affect people with vision deficiencies. It provides an icon in addition to color information for the availability of the products so that they are accessible for people with colorblindness. The problem is that the icons do not have enough contrast. Once again, the contrast checker tool is very helpful.

You can try the following colors:

  • #00A700
  • #FF5050

Requirements

Pending requirement:

Both of the available within 2 days icons must have a contrast of at least 3:1

Pending requirement:

Both of the available within 10 days icons must have a contrast of at least 3:1

Need help?

Show me the solution

Learning Material

Editor

Preview Page