Color and contrast

  • When choosing colors, particularly colors that have meanings as indicators, consider the needs of all users.

Use of color

  • Keep in mind that there are many colorblind users, as well as users who use grayscale or high contrast views to compensate for vision issues. For these users, differentiating information by color only is not possible. Provide additional marks as well. You can switch your UI to grayscale to check whether information is being conveyed clearly without color.

Color + additional markings

Do
Don't

Minimum contrast ratio

  • Use contrasting colors to distinguish text and icons from the background. We recommend that small text should have at least a 4.5:1 contrast with the background color. For large text (more than 18 dp for normal text or 14 dp for bold text), the contrast should be at least 3:1.
Do
Don't
Find out more on

  • Colour Contrast Analyser

    The Paciello Group Resources

  • Focus order
  • Layout and typography