Website Colour Contrast and Font Choices for Accessible Design
Contrast ratio measures the brightness difference between text and background on a scale of 1:1 to 21:1, and WCAG AA sets the working standard most accessibility laws point to: 4.5:1 for normal text, 3:1 for large text and UI components. The calculation ignores hue entirely, so two colours can look completely different and still fail, which is why soft, calming palettes common in wellness branding often need truly dark partners to carry text. Free tools like WebAIM's Contrast Checker and Coolors return an instant pass or fail for any colour pairing against these thresholds. Colour vision deficiency affects roughly one in twelve men, so contrast alone doesn't guarantee readability; meaning also needs to be carried through wording, icons, or underlines, not colour alone. Font choice compounds or undermines all of this, since thin weights, tight spacing, and small x-heights can make a technically passing colour pair unreadable in practice.
Accessible website colour contrast comes down to one measurable thing: the ratio between your text colour and the background behind it. Get that ratio right and your site is readable for people with low vision, colour vision deficiency, and anyone squinting at their phone in bright sunlight. Get it wrong and your beautiful pale-grey-on-white heading disappears for a chunk of your audience.
This matters more for wellness and health practices than almost any other sector, because your visitors often arrive tired, stressed, or managing a condition that affects their sight. Below is a step-by-step way to check and fix contrast across a whole website, plus how font choice silently changes whether text passes or fails. I'll keep the standards accurate and the workflow practical.
Contrast ratio measures relative brightness between two colours on a 1:1 to 21:1 scale
Contrast ratio is the difference in relative luminance (perceived brightness) between two colours, expressed as a range from 1:1 to 21:1. Two identical colours score 1:1. Pure black on pure white hits the maximum of 21:1. Everything you'll deal with sits somewhere in between.
The Web Content Accessibility Guidelines (WCAG) set the thresholds most of the world treats as the baseline for accessible design. There are three conformance levels: A, AA, and AAA. AA is the practical target for a business website, and it's the level most accessibility laws point to.
Here are the numbers that matter under WCAG for AA:
Normal body text needs a ratio of at least 4.5:1 against its background.
Large text (bold text from around 19px, or regular text from around 24px) needs at least 3:1.
UI components and graphical objects (button borders, form field outlines, icons that carry meaning) need at least 3:1.
AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. You don't need to hit AAA everywhere, but it's worth aiming for on long-form reading content like blog posts and treatment descriptions, where people spend real time.
The calculation ignores hue, so similar brightness fails even if colours look different
Most guides skip this, which is a shame, because once you see how the ratio is worked out, you stop making the classic mistake of trusting your eyes over the maths. The formula ignores hue almost entirely. A saturated red and a saturated green can look wildly different to you and still fail contrast, because they sit at a similar brightness.
The calculation runs in two stages. First, each colour's relative luminance is computed from its red, green, and blue values, weighted because human eyes are far more sensitive to green than to blue. Then the two luminance values go into a simple ratio:
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
L1 is the lighter colour's luminance, L2 the darker one. The 0.05 is a small constant that accounts for ambient screen glare. You never need to run this by hand, but it explains a lot: it's why teal text on a mint background looks fine to you and still scores 1.8:1, and why brightness, not colour choice, is the lever you pull.
The takeaway for a wellness brand built around soft, calming palettes: your gentlest colours are usually your weakest performers. Sage, blush, oatmeal, and pale sky all sit high on the luminance scale, so they need truly dark partners to carry text.
Free Contrast Checkers Reveal Accessible Website Color Contrast for Brand Colour Pairs Against WCAG Thresholds
Before touching anything else, run your brand's main colour combinations through a free checker. The browser extensions I keep pinned for design work include an accessibility inspector, but for a quick pass you don't need to install a thing.
Reliable free tools include WebAIM's Contrast Checker and the checker built into Coolors. Each works the same way: you paste in a foreground hex code and a background hex code, and it returns a live pass or fail against the WCAG thresholds. A pairing that outputs 8.4:1, for example, sails past AA for both normal and large text. One that returns 3.2:1 passes for large text and buttons but fails for body copy.
Test these pairings first, because they cover most of your visible text:
- Body text colour on your main background
- Body text on any secondary or tinted section background
- Heading colour on background
- Link colour on background (and check it against surrounding body text too)
- Button text on button fill
- Any text sitting over a coloured banner or image overlay
Write down each ratio next to the pairing. You're building a short reference sheet you can hand to anyone who edits the site later.
Darkening or deepening one colour usually fixes failures without abandoning the palette
When a pair fails, resist the urge to swap in a completely different colour. You usually only need to nudge the brightness of one of them. Darkening a mid-grey heading by a few steps, or deepening a pastel accent used for links, often clears the threshold while keeping the palette recognisable.
A few practical moves that keep the design intact:
- Reserve pale brand colours for large elements, not text. That soft blush works beautifully as a section background or a large display heading. It rarely works for 16px paragraphs.
- Create a "text-safe" dark version of your brand colour. Keep your bright signature colour for logos and graphics, and derive a deeper shade purely for text and small UI. Two versions of one hue still reads as one brand.
- Add a solid overlay behind text on images. Text over photography is the most common failure on wellness sites, because the photo brightness shifts across the image. A semi-opaque dark panel behind the text fixes it predictably.
- Don't rely on colour alone to signal meaning. Links should have an underline or weight change, not just a colour, so people who can't distinguish the hue still know it's clickable.
If you build on Squarespace, most of this lives in the site styles panel, though text over images often needs a little CSS. My walkthrough on customising Squarespace with CSS covers the overlay approach if the built-in controls don't get you there.
Colour blindness affects one in twelve men, making contrast alone insufficient
Passing contrast and being truly readable aren't the same thing. Around one in twelve men and one in two hundred women have some form of colour vision deficiency, most commonly difficulty separating red and green. A red "error" message and a green "success" message can both pass contrast against white and still look identical to those users.
Two checks close this gap. First, run your key pages through a colour blindness simulator (several browser extensions and design tools include one) to see how your palette holds up under the common types. Second, apply the rule from the last step: never let colour be the only carrier of information. Pair red errors with an icon and clear wording, mark required fields with an asterisk and a label, and give charts patterns or direct labels rather than a colour-only legend.
For a hearing care or therapy practice, this is part of the same promise the rest of the site makes. The Audiology House website leaned on accessible design as a core principle rather than a bolt-on, and that mindset (readable text, clear states, no colour-only signals) is what carries trust for a health audience.
Typeface choice determines whether passing contrast really reads at small sizes
Contrast gets most of the attention, but font choice decides whether text passes in the real world. Two colours might clear 4.5:1 on paper, then read as a smudge because the letterforms are thin, tightly spaced, or set too small.
What to look for in a body typeface for accessible reading:
- Open apertures and clear letter shapes. Avoid faces where a lowercase a, c, and e start to look alike at small sizes.
- A generous x-height. Taller lowercase letters stay legible when the type is small, which is most of the time on mobile.
- Enough weight for the job. Ultra-thin weights (100 or 200) undercut contrast even when the colour technically passes, because there's less coloured pixel on screen to carry the ratio. Regular or medium is the safer floor for body text.
- Distinct characters. A lowercase l, capital I, and the numeral 1 should be tellable apart.
Serif or sans-serif is less important than legibility, though clean sans-serifs tend to be the safer default on screen. I dug into the trade-offs in my piece on serif versus sans-serif for web, and the short version is: pick a face designed for screen reading and set it at a comfortable size before you worry about style.
Many accessibility guides recommend body text around 16px minimum, a line height around 1.5, and line lengths under roughly 70 characters. Spacing is a readability lever in its own right, which is partly why whitespace does so much heavy work in a calm, health-focused layout.
Audit every page layer: hover states, buttons, captions, and text over images all fail separately
Checking a single pairing tells you almost nothing about the site as a whole. Real pages layer states and surfaces: hover colours, placeholder text in forms, disabled buttons, captions, footer links on a dark background, alerts, and text sitting over five different photos. Any one of these can fail while your main body copy passes.
Run this pass across every template and key page:
- Body text on every background colour you use (main, tinted sections, dark footer).
- All heading levels, since a lighter heading colour is a frequent culprit.
- Link colours in body copy, in the navigation, and in the footer separately.
- Button text and button borders, in default and hover states.
- Form fields: label text, placeholder text (a classic fail, it's often too pale), and the field border itself against the page.
- Error and success messages, checked for both contrast and colour-only meaning.
- Text over images and video, at the brightest point of each asset.
- Icons and graphics that carry meaning, against their background.
Work template by template rather than page by page, since most sites reuse the same handful of layouts. Once each template passes, the pages built from it inherit the fix. Keep that reference sheet of approved pairings from step 3 updated as you go, so the next person editing the site isn't guessing.
Accessibility isn't a one-off checkbox. Every time a new coloured section, campaign banner, or photo overlay gets added, it needs the same quick check before it goes live.
Calm palettes and readable text emerge from the same accessible design decisions
For a health or wellness practice, accessible website colour contrast isn't a compliance chore bolted onto the design. It's the design working properly. Soft, reassuring palettes and readable text aren't in tension once you treat contrast as a constraint from the start, in the same way you'd treat spacing or hierarchy. The calm look and the accessible build come from the same decisions.
If you're planning a new site or reworking an existing one for a health practice, this is the layer I'd lock down early rather than retrofit. Start with your two or three core colour pairs, get them clearing AA, then build outward. And if you'd rather have someone handle the palette, the typography, and the build so it's accessible without you policing every hex code, that's exactly the sort of work my branding and website design service is set up to take on, delivering an accessible website color contrast that works from the start. Run your homepage through a checker first, though. The result will tell you how much there is to do.
