Color Contrast

Ensure there is adequate contrast between the color of every single information-bearing element and its background.
There are various best practices:
  • Determine which UI elements need which levels of color contrast by categorizing them into two groups: (1) information-bearing elements, and (2) decorative and disabled elements.
  • Exceed (or meet) the minimum color contrast requirements.
    • For Decorative and Disabled Elements: there is no color contrast requirement.
    • For Information-Bearing Elements: at least 4.5:1. An exception is made for some elements, and for these the minimum drops to 3:1. They include:
      • Large Text (or images of text): 14pt bold+ or 18pt reg+
      • UI Controls: any visual information provided that is
        • necessary for a user to identify that a control is present and how to operate it. This includes (1) Non-text indicators such as the check in a checkbox, or an arrow icon indicating a dropdown menu, and (2) the control’s various states (selected, focused, etc.), except for the disabled state.
      • Graphical Objects: parts of graphics required to understand the content.
  • Avoid problematic color combinations, such as:
    • Red & Green (the biggest one to avoid)
    • Green & Brown
    • Green & Blue
    • Green & Gray
    • Green & Black
    • Blue & Gray
    • Blue & Purple
    Or, if your design truly calls for using problematic colors next to each other, really make sure there is a high contrast ratio between the two. Darken one color and lighten the other to make the contrast more pronounced, or play with the saturation, or slide the hues a little one way or another.
  • Check the contrast of your colors as you are designing, not once you’re all done.
    • Manually checking the colors as you’re picking them out will train your eye to recognize which colors pass and which don’t, just by looking at a UI design.
    • And when you’re in the habit of checking each new color you pick out, you’re less likely to miss checking a color.