An effective call to action tells the visitor exactly what happens next, stands out from its surroundings, and is easy to select on any device. Strong copy, sensible placement and accessible contrast all matter, and accessibility standards give you measurable targets for the last of those. Most weak calls to action fail because there are too many of them, or because the wording describes the business’s goal instead of the visitor’s.
Start with one primary action per page
Each page should have a single main thing you want visitors to do. A service page might ask for an enquiry, a product page for a purchase, a resource page for a download. Secondary actions can exist, but they should look quieter. When three buttons compete at the same visual weight, visitors hesitate or choose none.
Match the action to the visitor’s readiness. A first-time visitor on a blog post may not want “Request a quote”. They might take “See how the process works”. Offering a smaller step is not weak design, it is matching intent.
Write copy that describes the outcome
Good button text usually starts with a verb and says what the visitor gets or what happens next.
| Weaker | Stronger | Why |
|---|---|---|
| Submit | Send my enquiry | Says what the click does |
| Click here | View the pricing guide | Describes the destination |
| Learn more | See how it works | More specific about what is next |
| Sign up | Get the free checklist | Names the benefit |
Add short supporting text near the button when there is a concern to ease, such as what happens after sending a form. Do not make promises you cannot keep, such as response times you do not control, and avoid false urgency. Keep the same wording for the same action across the site so the pattern becomes familiar.
Placement: where people expect to act
- First screen. Put the primary action where it is visible without scrolling, as covered in homepage essentials.
- After the proof. Place another call to action right after the section that persuades, such as an explanation of the service or a set of examples.
- At the end of the page. Visitors who read to the bottom are ready to act, and should not have to scroll back up.
- In the navigation. A consistently styled contact link in the header means the action is always available.
Avoid repeating the same button every few lines. Repeat it where the reader has reached a decision point.
Contrast: make it visible, and make it accessible
Visibility and accessibility overlap. The Web Content Accessibility Guidelines set measurable minimums:
- Normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text needs at least 3 to 1. The W3C treats 18 point text, or 14 point bold text, as large (W3C, Understanding Contrast Minimum). That covers the label on your button.
- User interface components and their states, such as a button’s boundary where it is the only cue, need at least 3 to 1 against adjacent colours, and focus indicators must meet the same ratio (W3C, Understanding Non-text Contrast).
Ratios are not rounded, so a value just below the threshold fails. Check your actual brand colours with a contrast checker rather than judging by eye. If your brand colour fails on a white background, use a darker shade for buttons or put dark text on the colour. Your brand colour palette is the place to fix this once, so every button inherits an accessible pairing.
Contrast against the page is also what makes the button stand out. A primary button that is the strongest colour on the page, surrounded by whitespace, draws the eye without needing animation.
Size and spacing for touch
WCAG 2.2 sets a minimum pointer target size of 24 by 24 CSS pixels, with an exception for smaller targets that have enough clear space around them, and further exceptions such as inline links (W3C, Understanding Target Size Minimum). That is a floor, not a design goal. Buttons on mobile are more comfortable larger, with space between neighbouring actions so a thumb does not hit the wrong one.
A short checklist
- One clear primary action per page and per section.
- Verb-led copy that says what happens next.
- Label contrast of at least 4.5 to 1 for normal text, and visible boundaries or focus states at 3 to 1.
- Targets of at least 24 by 24 CSS pixels, preferably larger on mobile.
- Visible keyboard focus, and the same wording for the same action everywhere.
- Tested on a real phone, in sunlight if you can, and with the keyboard.
Test, but sensibly
Design principles give you a good starting point, but the right wording depends on your audience. If traffic allows, compare versions; if it does not, ask a handful of real users what they expect to happen when they press the button. Our conversion overview and landing page guide show how calls to action fit into the wider page.
Where Radiance Impact fits
Radiance Impact designs and builds websites and landing pages where calls to action, contrast and accessibility are considered together. See our Digital Technology services or contact us to discuss a redesign or an audit of your current pages.
