Content updated and sources checked on 19 October 2026. The original publication date has been retained.
A red button is not automatically more persuasive than a blue one. Colour in web design is about the combination of brand, context, text and function. Do not start with a list assigning one fixed emotion to every colour; start with what a visitor needs to recognise and be able to do.
1. Give colours a specific role
Distinguish between backgrounds, body text, links, primary actions and notifications. Define where the colour is used for each role. This means a visitor does not have to keep rediscovering which elements are clickable. A brand colour does not have to work in every role.
2. Measure text contrast
WCAG 2.2 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The guideline has exceptions, including logos and certain decorative or inactive content.[8] Do not just check whether two colours look good together. Measure text against its actual background, including photos and gradients.
3. Never use colour as the only cue
WCAG states that colour must not be the only visual means of conveying information, an action or a required response.[16] For example, do not just make an error message red: name the problem and explain how the user can solve it. Label charts and make the selected option recognisable in another way too.
4. Treat colour associations as a hypothesis
Do you want a brand to feel calm, energetic or businesslike? Investigate whether your audience experiences it that way too. Do not claim without evidence that a well-known brand chose a colour to cause exactly that emotion. Visible use of colour does not prove the designer’s intention. Instead, ask test participants what they recognise and where they expect to click.
5. Test the action, not just the colour
A button with good contrast can still have unclear text. Check its label, position and next step too. If you compare two variants, keep other important components the same. Measure a meaningful task, such as a completed enquiry, and avoid a general claim about higher conversion based on a few clicks.
6. Check every state
Look at links and buttons in their normal state, when focused and when unavailable. Test light and dark backgrounds separately. A colour that works well on white may not stand out sufficiently on a photo. Do not let visible focus disappear because it has the same colour as the surrounding component.
7. Going further: create a small colour register
Document the purpose and permitted combinations for each colour. Add examples of error messages, links and primary actions. Check new pages against these agreements so that meaning remains consistent. A compact set of justified combinations is more useful than a large palette without usage rules.
Frequently asked question: which button colour works best?
This article does not establish a universal winner. Choose a recognisable action with sufficient contrast and clear text, and investigate it in your own context. Want to know more about a coherent brand identity and website? Discuss your design with Digital Pandas.
