Keep button text readable in hover and focus states

What to change

Ask the supplier to check the full set of interactive states against their actual backgrounds.

A worked example

Illustrative example

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

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.

Your action checklist

Use these checks to prepare a discussion with your team or supplier. Tick a check when you have recorded the decision or evidence, rather than when a feature has simply been promised.

Decisions to recordFor each button style, compare default, hover, keyboard focus and pressed appearances. Note any state in which the wording blends into the fill or surrounding page.Request measured contrast checks for the text and meaningful visual indicators. Include buttons over images and inside coloured announcement panels.Test a device without hover. Ask the supplier to demonstrate that a stuck or simulated hover state does not leave the label unreadable after tapping.

Evidence, open questions and decisionsNext action and responsible role

Entries stay in this page and are not submitted to Kay & Co. Download your notes before leaving; the page does not save them.