Colour is often the first thing people talk about when a new website is planned. Brand colours, a mood, a feeling. But the colours you pick also decide whether people can read your pages at all. Pale grey text on a white background might look soft and modern, yet many visitors will struggle with it.
The good news is that readable colour is not guesswork. There is a published international standard with clear numbers you can check in a few minutes. This article covers what those numbers mean and how to apply them to text, buttons, forms and links.
Why contrast matters more than the colours themselves
Contrast is the difference in brightness between text and the background behind it. The Web Content Accessibility Guidelines, known as WCAG, are published by the World Wide Web Consortium (W3C). Its guidance explains that some people with low vision cannot read text that lacks enough contrast. It also points out that colour vision deficiency can reduce contrast further, so brightness matters more than hue.
Age plays a part too. The W3C says its main contrast ratio allows for reduced sharpness of vision, colour deficiencies and the loss of contrast sensitivity that typically comes with ageing. That means plenty of your customers are affected, not just a small group. A parent reading your site on a phone in bright sun benefits as well.
The numbers to aim for
WCAG expresses contrast as a ratio between two colours. Success criterion 1.4.3, called Contrast (Minimum), sits at Level AA. It asks for a ratio of at least 4.5:1 between normal text and its background. Larger text gets a little more room, with a minimum of 3:1.
Large text has a specific meaning here. It is text at 18 point or larger, or 14 point and bold. The W3C notes that these sizes work out to roughly 24 pixels and 18.5 pixels in CSS. So a typical body font at 16 pixels counts as normal text and needs the full 4.5:1.
These ratios are hard limits. The W3C says computed values must not be rounded up, so a result of 4.499:1 fails. If a checking tool shows a borderline result, darken the text a touch rather than arguing with the maths. Very thin or decorative fonts may need more contrast than the minimum, because their strokes are harder to see.
What the rules leave out
Not everything on a page has to meet the text ratio. Text inside a logo or brand name has no contrast requirement. Neither does purely decorative text, or text that sits inside a photo with lots of other visual content. Inactive controls, such as a disabled button, are also exempt.
That logo exemption is useful when brand rules are strict. Your logo can keep its exact colours even if they are light. The headings and body text around it still need to be readable, though. If your brand palette is mostly pale, plan a darker shade for text early. Some practical ideas on improving your logo can help with that brand work.
Buttons, form fields and icons
Contrast covers more than words. A second criterion, 1.4.11 Non-text Contrast, deals with controls and graphics. It asks for a ratio of at least 3:1 against adjacent colours. This applies to the visual parts needed to identify a control and its state, and to the parts of graphics needed to understand the content.
In practice this touches many everyday design choices. The W3C gives the example of a text input with a complete border, where that border must meet 3:1. Focus indicators, the outline that shows where a keyboard user is on the page, must also stand out against the background. Status icons without text and the lines on a chart are covered too.
A button whose label is plain text does not need a contrasting outline. The text itself identifies it. Light grey form borders on white are a common problem, though, and they can make fields almost invisible. Before launch, tab through each form with a keyboard and check that you can always tell where you are.
Do not rely on colour alone
A separate WCAG criterion, 1.4.1 Use of Color, covers cases where only the hue of something changes. The W3C uses the example of a star rating where filled and empty stars differ only by a yellow or white fill, which fails this rule. A second example with pale yellow stars on white fails the Non-text Contrast criterion, with a ratio of about 1.2:1. The fix is to add a second clue, such as a change in shape, an icon or written text.
Links inside paragraphs are a common case. If the only difference between a link and normal text is colour, some readers will miss it. An underline solves this simply and costs nothing. The same thinking applies to error messages on forms, which should explain the problem in words and not just turn a field red.
A simple way to check your colours
You do not need special software to start. Free contrast checkers let you enter two colour codes and read the ratio straight away. Many browsers also include colour tools inside their developer panels. A short routine helps keep things consistent.
- Write down every text and background pairing in your design, including header and footer colours.
- Check body text against 4.5:1 and large headings against 3:1.
- Check form borders, focus outlines and icons against 3:1.
- Look at links and error messages and confirm colour is not the only signal.
- Repeat the check whenever a new colour is added.
Do this before the design is signed off. Changing a colour in the style guide is far quicker than fixing hundreds of pages later. It also stops the problem coming back when someone adds a new page or banner. These checks sit well alongside the other elements of effective web design, such as clear layout and readable type.
Contrast on long pages and around ads
Long scrolling pages often use coloured bands to break up sections. Each band changes the background, so the text on it needs its own check. White text on a mid blue band might pass, while the same white on a light teal band might fail. If you are weighing up whether a single page website suits your business, plan these bands with contrast in mind from the start.
Content from other providers needs care too. Ads, embedded widgets and cookie banners bring their own colours, and they can clash with your design. Check each one against your background colours before it goes live. Readers should always be able to tell your words from paid placements.
Building contrast into a WordPress site
Most themes let you set text, link and button colours in one place. Set them once with tested values and your whole site follows. That central control is one practical benefit, and there are other reasons your small business needs a WordPress website as well. Whatever platform you use, keep a short note of your approved colour pairings so anyone editing the site can stay consistent.
Frequently asked questions
What contrast ratio should body text have?
Under WCAG success criterion 1.4.3, normal text needs a ratio of at least 4.5:1 against its background. Large text needs at least 3:1. Large means 18 point or 14 point bold, roughly 24 or 18.5 CSS pixels.
Does my logo have to meet contrast rules?
No. WCAG says text that is part of a logo or brand name has no contrast requirement. The rest of the page still needs to meet the ratios.
Do disabled buttons need good contrast?
Inactive controls are exempt from both contrast criteria, for text and for controls. You can still keep them readable so people know what is unavailable. Just make sure active buttons look clearly different.
Is a contrast ratio of 4.49:1 close enough?
No. The W3C says the ratios are thresholds and values should not be rounded. A ratio just under 4.5:1 fails for normal text. A slightly darker shade usually fixes it.