Skip to main content

Color and Contrast

Example of platform support icons with good color contrast

Must haves

  1. Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
  2. All other text and images of text have a contrast ratio of at least 4.5:1
  3. Other user interface elements and graphical objects that convey information or are required to identify components and states have a contrast ratio of at least 3:1.
  4. Color is not used as the sole method of conveying information
    1. Tip: layer in iconography, fill patterns, etc to provide an additional indication that does not rely on color only

Learn more about color and contrast accessibility and use the Stanford color contrast chart.

Do and Don’t

DoDon't
Example of text with good color contrastExample of social media icons with good color contrastExample of platform support icons with good color contrastExample of text with poor color contrastExample of social media icons with poor color contrastExample of platform support icons with poor color contrast
Last modified