How to build an accessible palette
- Type your brand color as a hex code, like #3b82f6.
- Scan the generated tints (lighter) and shades (darker). Each swatch lists its contrast against white and black.
- For text on a white background, choose a shade with at least 4.5:1 contrast on white. For white text, choose one with at least 4.5:1 too.
- Copy the hex codes you'll use for backgrounds, text, and accents into your design tool or brand kit.
WCAG contrast requirements
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background. AA is the level most organizations aim for; AAA is stricter.
| Content | AA minimum | AAA minimum |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 |
| Icons, buttons, and UI outlines | 3:1 | — |
Why does contrast matter on social media?
Social posts are read on small screens, often outdoors, often at reduced brightness, and often as tiny thumbnails in a feed or grid. Text that looks fine on a large monitor can disappear on a phone. Good contrast also helps the many people with low vision or color vision deficiency, and it makes quote graphics, carousels, and captions easier for everyone to skim.
How to use tints and shades in a brand palette
- Light tints (70–90%) make calm backgrounds for quote cards and carousel slides.
- Your base color works for buttons, highlights, and one key word in a headline — not whole paragraphs.
- Dark shades (60–90%) are for text on light backgrounds and for dark-mode graphics.
- Pair tints with shades of the same hue for a cohesive look that still passes contrast.
Need a place to use the palette? Build slides in the free carousel maker or frame screenshots with the screenshot beautifier.