Using Color

If you create custom graphics for your social media, keep color contrast in mind. Some color combinations make copy difficult or impossible to read, either because there isn’t enough contrast, or the color pairing is causing the text to appear as if it’s vibrating. Color contrast is also important to consider when creating physical marketing materials or developing webpages.

See the below chart for a breakdown of good and poor color pairings based on WCAG accessibility criteria. The X axis (rows) indicates the color of the text and the Y axis (columns) indicates the color of the background.

Please note that the chart is best viewed on a larger screen than the average mobile device.

RED
ORANGE
YELLOW
GREEN
BLUE
VIOLET
BLACK
WHITE
GRAY
RED
POOR
POOR
GOOD
POOR
POOR
POOR
GOOD
GOOD
POOR
ORANGE
POOR
POOR
POOR
POOR
POOR
POOR
GOOD
POOR
POOR
YELLOW
GOOD
POOR
POOR
POOR
GOOD
POOR
GOOD
POOR
GOOD
GREEN
POOR
POOR
POOR
POOR
GOOD
POOR
GOOD
POOR
POOR
BLUE
POOR
POOR
GOOD
GOOD
POOR
POOR
POOR
GOOD
POOR
VIOLET
POOR
POOR
POOR
POOR
POOR
POOR
GOOD
GOOD
POOR
BLACK
GOOD
GOOD
GOOD
GOOD
POOR
GOOD
POOR
GOOD
GOOD
WHITE
GOOD
POOR
POOR
POOR
GOOD
GOOD
GOOD
POOR
GOOD
GRAY
POOR
POOR
GOOD
POOR
POOR
POOR
POOR
GOOD
POOR

The Adobe Color site has a great contrast analyzer to help you create accessible color palettes that meet WCAG contrast standards as well as a color blind tool that simulates how your color scheme would look to someone who has deuteranopia, protanopia, or tritanopia. If you'd like to learn more about color blindness and accessibility, check out this great run-down of tips for designing with color.

WCAG Contrast Standards:

  • WCAG AAA Conformance for icons and actionable graphics: 4.5:1
  • WCAG AAA Conformance for 18 pt text and above, regular font-weight: 4.5:1
  • WCAG AAA Conformance for 14 pt text and above, bold font-weight: 4.5:1
  • WCAG AAA Conformance for 17 pt text and below, regular font-weight: 7:1
  • WCAG AAA Conformance for 13 pt text and below, bold font-weight: 7:1
  • WCAG AA Conformance for icons and actionable graphics: 3:1
  • WCAG AA Conformance for 18 pt text and above, regular font-weight: 3:1
  • WCAG AA Conformance for 14 pt text and above, bold font-weight: 3:1
  • WCAG AA Conformance for 17 pt text and below, regular font-weight: 4.5:1
  • WCAG AA Conformance for 13 pt text and below, bold font-weight: 4.5:1

Additional Resources and Reading

Want to learn a little more about using color? Check out the links below!

Arrows that will take visitors back to the top of the webpage.