Ads and creative
Why your ad text is harder to read than you think
Contrast ratios, the amber-on-white trap, and why the person who made the ad is the last person who can tell. What to measure and what the numbers mean.
How MarketWar handles it
Contrast here is arithmetic, not opinion: the WCAG ratio is computed on the actual colours, with 3:1 the floor for large text. A common brand amber measured 1.64:1 against its own scrim in this platform's own ads — visibly fine to whoever made it, and failing by a factor of two.
Contrast is the one part of ad design that is arithmetic rather than taste, and it is where a surprising share of professionally produced work fails.
The ratio
Take the foreground colour and the background colour, compute their relative luminance, and take the ratio. 3:1 is the floor for large text under WCAG; 4.5:1 for anything body-sized.
It takes a fraction of a second to calculate and almost nobody does it, because the ad looks fine to the person who made it.
The traps
Amber and gold on white. The single most common failure in brand-driven design. A warm brand colour that looks rich on a dark screen can measure under 2:1 against a light background.
Grey on grey. Light grey copy on an off-white card is a design convention and frequently illegible in sunlight.
Text over photographs. The worst case, because the background is not one colour. A ratio measured against the average of the image tells you nothing about the part where the sky is.
The honest way to handle a photograph
Bracket the worst case: composite the text colour over both black and white, and require it to pass against both. If it cannot, the fix is a scrim behind the copy rather than a different colour.
That is more conservative than measuring against the average, and it is the only version that survives a photograph you have not seen.
What to do about it
Measure before publishing rather than after, and treat a failure as a fact rather than an opinion to argue with. This platform reports the actual number against the actual colours — "5.77:1 against #3987e5, needs 3:1" — so the discussion is about whether to change the colour, not whether there is a problem.
Related: ads from your own photos, laying an ad out for every placement.
The three numbers to know
3:1 — the floor for large text, meaning roughly 24px and above, or 19px bold.
4.5:1 — the floor for body-sized copy.
7:1 — where text stops being an effort for anybody, including in direct sunlight, which is where a large share of feed browsing actually happens.
Nothing below 3:1 belongs in an ad, whatever it looks like on the screen it was designed on.
Why the designer is the last to know
Three reasons, and all of them are about the room rather than the design. A calibrated monitor at full brightness in a dim office is the best-case rendering of any colour. The person has seen the words a hundred times, so familiarity fills in what contrast is failing to deliver. And the ad is being viewed at 400% zoom while it is made and at thumbnail size when it is seen.
Check it at the size it will run, on a phone, outdoors. Or measure it, which takes a fraction of a second and does not depend on the weather.
What this does not do
Passing the ratio makes text legible, not persuasive. It removes a reason people scroll past; it does not supply a reason to stop.
Common questions
What contrast ratio does ad text need?
3:1 against its background is the floor for large text under WCAG, and 4.5:1 for body-sized copy. Below that a meaningful share of people cannot read it comfortably, including anyone outdoors in daylight — which is where most feeds are read.
Why can I read my own ad fine?
Because you know what it says. Familiarity does the work your contrast is failing to do, which is why the person who made the ad is the last person who can judge it.
Is this only about accessibility?
It starts there and it is also a conversion issue. Text that takes effort to read gets scrolled past, and nobody reports it — they just do not stop.
Related
How do you make an ad from your own photos?
Your own photographs beat generated artwork for most small businesses, and they need one thing to work as ads: the copy has to stay readable over them. How that is handled automatically.
How do you resize one ad for Instagram, Stories and a banner without it looking stretched?
Why an ad squeezed into a story looks wrong, what each platform actually covers with its own interface, and how to lay one design out for five placements without regenerating the artwork.
What does a website audit actually check?
The twelve things worth measuring on a page, what each one costs you when it fails, and how to tell a real audit from a lead-capture form with a progress bar.