Thin white text on a busy photo looks fine on your laptop and disappears on a phone in sunlight. The simple contrast rules, sizes and fixes that make every post readable.
Updated
Open all four studios free — no card, nothing to install.
How many could you read completely?
When people try this, the result is usually humbling. A design that looked crisp on a bright 15-inch laptop turns into a nice picture with some faint shapes on it. And that dim phone is how most of your audience sees it — on a bus, outdoors, with battery saver on, while doing something else.
Unreadable text is the most common design problem on social media, and it's the easiest to fix. You don't need taste. You need three rules.
Contrast is how different two colours are in brightness. Black on white is the maximum. Light grey on white is almost nothing.
It's measured as a ratio, from 1:1 (identical) to 21:1 (black on white). The widely used accessibility guidelines for the web, WCAG, set these minimums:
| Text | Minimum ratio |
|---|---|
| Normal-size text | 4.5:1 |
| Large text (big headings) | 3:1 |
| Stricter level, normal text | 7:1 |
Those numbers were written for websites, but they're a very good floor for posts too. For anything that will be read on a phone outdoors, we'd treat 4.5:1 as the minimum even for headings.
You don't have to calculate it. Paste your two colours into our free colour contrast checker and it gives the ratio and a pass or fail.
Some pairs feel bold but measure badly, because both colours are of similar brightness:
| Combination | Why it fails |
|---|---|
| White on yellow | Both very light |
| White on light pink, sky blue or mint | Pastels are light; white disappears |
| Red on green (or green on red) | Similar brightness, and invisible to many colour-blind viewers |
| Blue on black | Both dark |
| Orange on red | Close in both hue and brightness |
| Grey on a coloured background | Usually mid-tone on mid-tone |
And pairs that reliably work:
A simple way to think about it: one must be clearly dark and the other clearly light. Hue is decoration. Brightness does the work. If you're still choosing brand colours, our colour palette guide explains how to include a dark and a light in every palette for exactly this reason.
A photo isn't one background colour. It's thousands — bright sky, dark hair, patterned fabric. White text will sit on a dark patch for one word and a bright patch for the next.
Five fixes, from lightest touch to strongest:
Things that don't reliably work on their own: a thin drop shadow, a faint glow, or a hairline outline. They help a little at large sizes and not at all at small ones.
Tip: Blur the background photo slightly behind text-heavy designs. Detail is what makes a background "busy", and blur removes detail without changing the mood.
Contrast and size work together. Thin letters have fewer pixels to carry the colour, so a thin font needs more contrast and more size than a bold one.
For a 1080 px wide canvas:
| Use | Size |
|---|---|
| Main headline | 80–140 px |
| Sub-heading | 48–64 px |
| Body text | 36–44 px |
| Fine print | 26–30 px, and only if it must be there |
A few more habits:
Our font pairing guide covers which fonts stay readable at small sizes.
Colour blindness is common — roughly one man in twelve has some form of it, most often trouble telling red from green. If your post says "green = available, red = sold out" using colour only, a noticeable share of your audience can't use it.
Add a second signal:
Two places designs get caught out:
Before you post anything:
If you can't repeat the main message, your audience won't get it either. Fix the biggest thing — usually contrast, then size — and test again.
The efficient way to fix readability is to fix your templates. In Pixel Studio, set up your standard post with a text panel or overlay already in place, your heading and body sizes fixed, and two tested colour pairs — one dark-on-light, one light-on-dark. Check both pairs once in the contrast checker, and every post you duplicate from that template is readable by default.
Readable isn't boring. It's the difference between a post that looks good and a post that gets read.
The Web Content Accessibility Guidelines recommend at least 4.5:1 for normal text and 3:1 for large text (roughly 24 px regular or 19 px bold and above). For social posts viewed on phones outdoors, higher is better.
Put something between the text and the photo: a dark semi-transparent overlay across the image, a gradient behind the text area, or a solid panel. Then place the text over the calmest part of the picture.
No. White on yellow is one of the weakest combinations, usually under 2:1. Use black or very dark text on yellow.
On a 1080 px wide canvas, keep body text at about 36 px or more and avoid anything below roughly 26 px. Headlines should be 60 px and up.
The formal guidelines were written for websites, but the principle carries over. Good contrast helps everyone, including people with low vision, older viewers and anyone on a dim screen in bright sun.
