Beautiful but Unreadable: Run a Colour-Contrast Audit Before You Publish

Featured image: conceptual AI-generated illustration; not documentary evidence.

A graphic can be elegant, perfectly on-brand and almost impossible to read. Pale gold lettering on cream may look luxurious on a designer’s monitor. Thin purple text over a photograph may feel sophisticated at full size. Then the image reaches a small phone, bright sunlight, a compressed social feed or a reader with low vision—and the message disappears.

Colour contrast is not a final technical box to tick. It is part of communication design. If the audience must strain, zoom or guess, the visual has failed at its first job: carrying meaning.

Contrast is a relationship, not a colour

No colour is automatically accessible. Black can fail against dark purple; white can fail against pale yellow. What matters is the measurable difference in relative luminance between foreground and background. That relationship is expressed as a contrast ratio, ranging from 1:1 for identical luminance to 21:1 for black against white.

The Web Content Accessibility Guidelines (WCAG) 2.2 set widely used thresholds. Under the Level AA minimum, normal text should reach at least 4.5:1. Large text may use 3:1. WCAG defines “large” as at least 18-point regular text, or 14-point bold—roughly 24 CSS pixels or 18.5 CSS pixels respectively, though the exact display depends on the medium. Essential graphical objects and user-interface components generally need at least 3:1 contrast against adjacent colours.

These figures are standards, not a promise that every design will be comfortable for every reader. Small type, fine strokes, glare, motion, screen quality and image compression can make technically passing text difficult in practice. A sensible design treats the threshold as a floor, then tests the real asset in realistic conditions.

The six-step contrast audit

1. Inventory every information layer

List the elements that carry meaning: headline, body copy, price, date, button, icon, chart label, link, badge and legal line. Decorative shapes do not need the same treatment, but decoration must not obscure information. A common mistake is testing the headline while ignoring a faint call to action or tiny disclosure.

2. Test the actual foreground and background

Use a reputable contrast checker and enter the precise colour values. If text sits on a photograph, gradient or translucent layer, sample the lightest and darkest places behind it. One passing point does not rescue a word that crosses several failing areas. The safest repair is often a solid or sufficiently opaque panel behind the text.

3. Check size, weight and stroke

A ratio that passes for large bold text may fail when the same copy is reduced for a mobile layout. Thin fonts can appear fainter than their colour value suggests, especially after platform compression. Test the final size rather than the oversized working canvas. Avoid relying on a shadow or glow to rescue a weak foreground-background pair.

4. Remove colour and see what survives

WCAG also warns against using colour as the only visual way to communicate information. Convert the design to greyscale or use a colour-vision simulator. If “green means open” and “red means closed” become indistinguishable, add words, icons, patterns or shapes. In a chart, combine colour with direct labels or different line styles. Redundancy is not clutter when it prevents ambiguity.

5. Shrink, brighten and compress

View the graphic at the size it will occupy in a phone feed. Lower and raise screen brightness. Stand near a window. Export the final JPEG or video frame rather than judging the pristine design file. Social platforms may resize and compress uploads, softening fine text and edges. If a crucial word only works when enlarged, redesign it.

6. Test without the image

For web content, an image of text is less flexible than real text: it does not reflow cleanly, may blur when enlarged and can be harder for assistive technology to interpret. Keep important copy in the page, caption or post description as well. Provide useful alternative text for informative images, describing their purpose rather than stuffing in keywords.

How to repair a failing design

• Darken or lighten one side of the pair. A small visual adjustment can create a substantial ratio change.
• Add a solid text panel. This separates copy from unpredictable photography without abandoning the image.
• Increase size and weight. This may improve legibility, although it does not turn a failing normal-text ratio into a pass unless the text genuinely meets the large-text definition.
• Simplify the palette. Reserve delicate brand shades for decoration and use a tested dark or light colour for information.
• Move the words. A clean area of the composition may work better than another filter, outline or glow.

Brand consistency does not require using every brand colour for text. A practical brand system can include “display colours” for expressive backgrounds and “communication colours” that are approved for small copy, buttons and data. Document the combinations that pass so creators do not have to rediscover them for every post.

Three traps that look like solutions

“Everyone can zoom.” Zoom is useful, but it should not be the admission price for ordinary content. Some social interfaces also make zoom awkward or inconsistent.

“The accessibility tool gave it a pass.” Automated measurement is valuable, but it cannot judge every photographic transition, export artefact, font treatment or viewing condition. Passing a tool is evidence—not the whole review.

“The caption repeats it.” A caption can provide a vital alternative, but the image should not invite one group of readers in and quietly exclude another. Improve both the visual and the accompanying text.

A 60-second pre-publication check

• Does every text-background pair meet the relevant contrast threshold?
• Is information understandable without colour alone?
• Does the smallest copy remain readable on a phone?
• Does text over photography remain clear across every letter?
• Is essential information also available as real text?
• Does the exported file—not only the design canvas—still work?

Accessible contrast rarely makes a design less beautiful. It forces hierarchy, clarity and discipline. The strongest brand is not the one that whispers so elegantly that half the audience misses it. It is the one people can recognise, read and act on.

Primary sources

• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.3: Contrast (Minimum).
• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.11: Non-text Contrast.
• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.1: Use of Colour.