How do I choose accessible website colours?

Choose website colours by function, then test the combinations people will actually see. A palette can look attractive as swatches and still fail when a small button label sits on an accent surface. Brand preference and accessibility are separate checks; both matter.

Give every colour a role

Start with surface, main text, supporting text, action, border, success and error. Write the pairings rather than just the hex codes: action text on action background, muted text on a card, focus ring against the surrounding surface. Keep action styling consistent so readers learn what is clickable. Links need a cue beyond colour when necessary, such as an underline.

Check contrast with free tools

WCAG AA minimum text contrast is 4.5:1 for ordinary text and 3:1 for qualifying large text; large means at least 24 CSS pixels, or about 18.7 pixels when bold. Those thresholds do not mean all other accessibility requirements are satisfied. Use WebAIM Contrast Checker with the actual foreground and background, including transparency.

1. Measure body, secondary and placeholder text.
2. Check button labels in default, hover and disabled states; do not assume white text works on every brand accent.
3. Inspect links and keyboard focus, then errors and success messages.
4. Repeat on light and dark surfaces and any image or gradient behind text.
5. Use browser colour-vision emulation as a diagnostic, followed by keyboard and reader testing.

Does colour psychology tell me which button sells best?

No universal button colour establishes that result. Meaning depends on context, contrast, audience, prior brand associations and the offer itself. An accent can guide attention because it is used consistently and sparingly. To evaluate a campaign, keep the offer and layout fixed and define a useful outcome before testing a colour variant.

What should the palette handoff contain?

Provide approved pairs and roles, not an unlabelled mood board. Include examples for text, cards, forms, chart labels and media. Record failures and restrictions, such as an accent allowed for large decoration but not small text. Pair this with the multilingual typography checklist; changing font size or weight can change which contrast criterion applies.