A palette can look beautiful as a collection of swatches and become difficult to use once a headline, price or booking instruction sits on it. Those are two different tests: whether colours feel right for a brand, and whether people can read the message.
Give your colours roles. Decide which pair is for everyday text, which is for larger headlines, and which is only for decoration. You do not need to abandon a soft palette to make it useful. You may simply need a darker text colour or a quieter surface behind it.
Try your colours together.
Change the text and background colours below. The ratio describes this solid-colour pair. It does not measure an entire design, the legibility of a particular font, or text placed over a photograph.
TRY IT · TEXT AND BACKGROUND
A clearer point of view.
Small details deserve to be readable too.
Know what the numbers mean.
For web text, WCAG AA calls for at least 4.5:1 for normal text and 3:1 for large text. Large means at least 24 CSS pixels for regular text, or about 18.67 CSS pixels when bold. These are contrast thresholds, not a guarantee that any typeface at that size will be comfortable to read. See W3C’s contrast guidance.
The checker uses the unrounded ratio to decide pass or fail, even though the displayed number has two decimal places. If you are right on the boundary, choose a pair with a little more separation.
Apply the check to a real post.
Begin with the smallest important text: the address, date, price or action. It is easy to admire a large headline and miss the faint instruction underneath. Preview the exported image at normal phone size, without pinching to zoom.
Next, test the actual background. A colour that works on a plain canvas might disappear over a pale part of a photograph. A solid panel behind text is often a more dependable starting point than a subtle shadow. If you use a gradient or translucent overlay, check the lightest and darkest areas behind the letters.
Finally, look at the font. Very fine strokes and tightly spaced lettering can still feel fragile even when the colour pair passes. Try a slightly sturdier weight, a shorter line, or more room around the text. Contrast and typography need to support one another.
Don’t make colour carry the whole message.
If green means “available” and red means “sold out”, write those labels too. Use text, shape or another visible cue alongside colour. The same idea applies to selected states, errors and chart categories. W3C’s use-of-colour guidance explains this distinction.
Turn the palette into a usable system.
- Save one reliable pair for body copy and small labels.
- Document which combinations are suitable only for larger text.
- Set a separate treatment for text over photography.
- Check a real post, story and website section, not only isolated swatches.
- Keep decorative colours available without forcing them into every text role.
A strong palette gives the brand character and gives the message enough clarity to be useful.
For a repeatable way to apply those choices, read how to build a consistent social-media design system.