Color and Design

Color Contrast

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.

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