How Should You Choose Hover, Active, and Focus Colors? How to Create UI That Communicates Interaction States

Should a button use the same color change when someone moves a mouse over it, presses it, or reaches it with a keyboard? In a UI (user interface, the parts of a screen people interact with), Hover, Active, and Focus are different states. Using a “Reserve this seat” button on a seat-booking website, this guide shows how to give each state a useful visual treatment and implement it with CSS.

Give Hover, Active, and Focus different jobs

Hover means that a pointing device, such as a mouse, is over an element. A subtle change can reinforce that the element is interactive. Active is a temporary state while a control is being activated, for example while a button is pressed. It does not mean that the seat has been reserved or that the button has become permanently selected.

Focus means that an element is the current target for interaction, including keyboard interaction. People need to identify the focused control even without a pointer over it. An outer outline can distinguish Focus from a button merely becoming darker. Focus may remain until the user moves to another element, whereas Active is generally brief.

Start by giving the default button a readable text/background combination. Choose related darker shades for Hover and Active, then give Focus an independently recognizable outline. You do not need a completely different hue for every state.

A color example for a seat-booking button

Imagine a white ■#FFFFFF booking card on a pale gray ■#F5F8FA page. A HEX code represents a web color in hexadecimal notation. Use progressively darker blue button fills and a purple focus outline, as shown in the following example.

The default blue ■#1B668F has a contrast ratio of approximately 6.28:1 with white ■#FFFFFF button text. Hover blue ■#135477 with the same white text reaches approximately 8.20:1. The darker Active blue ■#0D405D with white text reaches approximately 11.00:1. The fill changes, but the text color stays consistent in all three states.

The purple Focus outline ■#6A398A contrasts with white ■#FFFFFF by approximately 8.19:1 and with the pale gray page ■#F5F8FA by approximately 7.68:1. However, purple touching the default button blue ■#1B668F directly would have a ratio of only about 1.30:1. In this example, placing a 3px gap between the button and the outline lets the purple line remain distinct against the white card.

CSS (Cascading Style Sheets, the system used to style web pages) can apply these states as follows. The :hover selector matches pointer hover, :active matches the temporary activation state, and :focus-visible matches when the browser determines that focus should have a visible indicator. The rgb() values express red, green, and blue components and correspond to the HEX codes in the table.

.reserve-seat {
  background: rgb(27 102 143);
  color: rgb(255 255 255);
  border: 0;
  border-radius: 6px;
  padding: 12px 18px;
}
.reserve-seat:hover {
  background: rgb(19 84 119);
}
.reserve-seat:active {
  background: rgb(13 64 93);
}
.reserve-seat:focus-visible {
  outline: 3px solid rgb(106 57 138);
  outline-offset: 3px;
}

Keep Focus visible and test keyboard and touch interactions

Hover and Focus can apply at the same time. Make sure the focus outline does not disappear when that happens. Avoid unconditionally removing it with outline: none. Move through the controls with the Tab key to check whether it is always clear which control can receive the next action. For the booking card, dark blue-gray text ■#2B3C4E on white ■#FFFFFF has a contrast ratio of approximately 11.30:1.

On phones and other touch devices, Hover may be absent or may persist after a tap. Do not make hovering the only way to discover the action; use a clear button shape and label in the default state. Active feedback is also not proof of a completed reservation. After a successful booking, display an explicit confirmation such as “Your seat has been reserved.”

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA requires at least 4.5:1 contrast for normal text and 3:1 for qualifying large text. A keyboard-focus indicator must be visible, and visual cues necessary to identify component states, such as a custom focus outline, generally need at least 3:1 contrast against adjacent colors. This does not impose a blanket requirement that the default and Hover fill colors contrast with each other by 3:1. These figures cover opaque solid-color pairs; they do not prove that an entire page conforms to WCAG.

HueRoll can help you inspect HEX codes, tint and shade suggestions, and the contrast of a selected color against white or black. It does not directly compare arbitrary pairs of custom colors or automatically determine AA or AAA conformance. Check the button label, surfaces, and focus outline together in the actual interface, using an additional method where needed.