Contrast that passes and still looks good

Contrast is one of those topics where design and accessibility are sometimes treated as opponents. On one side, a soft, pale grey on white looks elegant in a mock-up. On the other, the accessibility checker flags it as failing, and the "fix" seems to be harsh black text that ruins the mood.

It does not have to be a trade-off. With a little understanding of how contrast is measured and a few practical techniques, you can build pages that are easy for everyone to read and still look considered.

What the guidelines actually ask for

The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between the relative luminance of two colours, from 1:1 (no difference) to 21:1 (black on white). For the commonly targeted AA level, the key thresholds are:

• Normal body text: at least 4.5:1 against its background.
• Large text: at least 3:1. Large means roughly 24 pixels and above at regular weight, or around 19 pixels and above in bold.
• Interface components and meaningful graphics: at least 3:1 against adjacent colours. This covers things like the border of a text input, the outline of a checkbox, or an icon that conveys meaning without a text label.

There is also a stricter AAA level, which asks for 7:1 for normal text. It is worth aiming for in long reading passages, but AA is the usual baseline.

Some things are exempt, such as purely decorative elements, logos, and disabled controls. But the exemptions are narrower than people often assume, and placeholder text inside form fields, for example, still needs to be readable.

Why contrast matters beyond compliance

Low contrast affects far more people than the phrase "accessibility issue" might suggest. Anyone with reduced vision benefits from clear contrast, and so does anyone reading on a phone outdoors in bright light, on an older or cheaper screen, or with the brightness turned down to save battery. Good contrast is simply good legibility.

Where contrast usually fails

In practice, the same few culprits come up again and again.

• Light grey body text. A mid-grey on white often looks refined in a design tool and falls short of 4.5:1.
• Secondary text. Captions, dates, helper text under form fields and footer links tend to be set in the palest grey on the page.
• Text on brand colours. White text on a light or mid-tone brand colour, such as a bright yellow, a sky blue or a pastel pink, frequently fails.
• Placeholder text. Pale placeholder text in inputs is a common failure, and it is often mistaken for a value already entered.
• Text over photographs. Even when the average colour seems fine, bright patches behind individual letters can make words disappear.
• Input borders. Very light borders on form fields can fall below 3:1, making fields hard to locate.

Techniques that keep pages handsome

Darken the grey, then lighten the weight of the design elsewhere

If your body text fails, the fix is usually a darker grey, not black. A very dark grey with a slight tint from your brand colour can pass comfortably and still feel softer than pure black. If the page then feels heavier, create lightness elsewhere: more whitespace, lighter borders on decorative elements, or a softer background tint.

Separate the brand colour from the text colour

You may love a light, bright brand colour, and you can keep it. Just do not rely on it for text. Use it for backgrounds, illustrations, large shapes and decorative accents, and set text on top of it in a dark colour rather than white. A bright yellow banner with near-black text can pass easily, while the same banner with white text almost certainly will not.

Create a darker shade for text and buttons

When the brand colour must carry text or form a button, create a deeper shade of the same hue that passes. A florist with a soft rose brand colour might keep the pale rose for backgrounds and introduce a deep raspberry shade for buttons and links. It still feels on-brand, and the white button label now reads clearly.

Use size and weight

Larger, bolder text has a lower threshold (3:1), and it is also more legible in practice. If a headline in a mid-tone colour is important to the design, making it large enough to qualify can be a legitimate solution. This is not a loophole for body text, though: paragraphs should meet 4.5:1.

Give text on images a reliable background

For text over photographs, do not trust the photo. Options include:

• A semi-transparent dark overlay across the whole image.
• A gradient behind the text area only, fading out across the rest of the photo.
• Placing the text in a solid panel beside or overlapping the image.
• Choosing or cropping photos so the text sits over a calm, even area.

Check the result over the brightest part behind your text, not the average.

Do not let hierarchy depend on faintness

Designers often use very pale text to signal "less important". Instead, use size, weight, position and spacing to show hierarchy, and keep secondary text readable. A caption can be smaller and a mid-dark grey without dropping below 4.5:1.

Checking contrast in practice

You do not need to calculate luminance by hand. Many free contrast checkers let you enter two colours and see the ratio immediately, and most browsers' developer tools show contrast information when you inspect a text element. Design tools increasingly include plug-ins or built-in checks as well.

A useful habit is to check your palette once, at the start, and record which combinations pass. For example: darkest neutral on white passes for all text; primary shade 700 on white passes for all text; accent on white passes for large text only; white on accent shade 600 passes for all text. With that list, everyday decisions become simple.

Then do a final pass on real pages, paying special attention to small text, form fields, text over images and hover or focus states, which are easy to forget.

Do not forget focus states

People who navigate with a keyboard rely on a visible focus indicator to know where they are on the page. If you remove the browser's default focus outline for aesthetic reasons, replace it with something clearly visible that contrasts with the surrounding colours. A two-pixel outline in your accent or a dark neutral, offset slightly from the element, is a tidy and reliable choice.

Contrast checklist

• Body text meets at least 4.5:1 against its background.
• Large headings meet at least 3:1.
• Input borders, checkboxes and meaningful icons meet 3:1.
• Secondary text, captions and placeholders are checked, not assumed.
• Light brand colours are used for backgrounds and shapes, with dark text on top.
• Darker shades exist for brand-coloured buttons and links.
• Text over images has an overlay, gradient or solid panel.
• Focus states are clearly visible.
• You have a recorded list of passing colour combinations.

Readable text is not the enemy of good looks. When contrast is planned rather than patched, a page can be calm, characterful and clear to everyone at the same time.