Websites & patient experience · Practical guide

Keep button words readable when people point to or select them

A button may pass a visual review in its default state but change to a pale combination on hover or focus. Interaction makes the action harder to read.

Healthcare website and appointment calendar displayed on devices at an empty clinic reception.
Make the website useful for the people who use your practice.

What to change

Ask your supplier to check every button appearance against its real background, including pointer, keyboard and pressed states.

A worked example

Illustrative example

An outlined action fills with the brand colour on hover while its text changes to a readable contrasting colour and its focus remains visible.

Healthcare website design showing connected desktop and mobile service and enquiry layouts.
Make the service and next step clear on every screen.
Healthcare website accessibility illustrated by a focus outline, keyboard key, contrast samples and form.
Review keyboard access, contrast and understandable form fields.

Why this matters to your practice

A button changes appearance as people point to it, select it or reach it by keyboard. Its label must remain readable in every state. Ask your supplier to demonstrate those changes against the backgrounds used on the finished site, including photographs or coloured panels. A design sample on a white page may miss the problem. Review secondary actions as well as the main booking button, because people need to read Cancel, Back and Change just as confidently.

A practical review example

An outlined contact button may fill with a brand colour when selected but keep text designed for its original pale background. Ask your supplier to demonstrate that transition rather than review only a static colour palette. Include buttons on photographs and coloured panels, then try a touch device where hover behaviour differs. The wording and current keyboard marker should remain clear. Approval should cover secondary actions such as Back and Cancel too, because those are part of a visitor's ability to correct or leave a task.

How to check the result

Accept when interaction never reduces a usable control to an unreadable label and all supported states remain distinguishable.

A mistake to avoid

Reviewing only the colour palette swatches misses combinations introduced by state transitions in the actual interface.

Turn reading into a next step

Your action checklist

Work through these checks with your team or supplier. Tick the ones you have resolved and leave unknowns open.

Checks to discuss

Record what you know, what is still missing and the answer you need from your team or supplier.

Use project decisions only, without personal, patient or confidential details. Entries stay in this page and are not submitted to Kay & Co. Copy or download before leaving; this page does not save your notes.

Further reading

These sources provide background for the topic. The practice examples and checklist are illustrative planning suggestions from Kay & Co.

Related guides

Need help with this?

Tell us what is getting in the way. Kay & Co. can help you understand the options and turn the next step into something that works for your practice.

Explore websites & patient experience services or discuss your project.

Try the free Healthcare Digital Planner to find your starting priority.