// Landing pages
CTA Button Colour: Contrast and Position Beat the Colour
No single button colour wins on every page. Read the WCAG contrast rules, button position, and how to test a colour change correctly.
No single button colour wins on every page. What decides the result is contrast against the background, position within the content, and the clarity of the words inside the button.
Contrast matters more than colour
WCAG 2.2 asks for a text contrast ratio of at least 4.5 to 1 for normal text, and 3 to 1 for large text. A button that uses a low-contrast brand colour will be hard to read for part of your audience.
| Check | Threshold | Reason |
|---|---|---|
| Button text contrast | 4.5 to 1 | Text stays readable on a bright screen. |
| Button against background | 3 to 1 | The button reads as a button. |
| Touch target size | 24 pixels or more | A finger can press without missing. |
Colour works as a separator, not as a spell
Scroll the diagram sideways
How to test a colour change
Scroll the diagram sideways
Questions and answers
Does a red button win on every page? No. Colour test results differ by page, because the background, content, and reader differ. What repeats is the win for high contrast.
How many buttons are sensible? One main action per page. A second action may exist in a lighter style, such as a text link.
What should I fix first? Fix the words on the button and its position first. Both change results more than colour does.
// references
Official sources
We checked every claim on this page against the documents below on 11 September 2026. Open the source before you change a live system.
// read next
