How to Show Tap States with Color on Smartphones: Creating a Pressed Feel in Web UI

When a button on a smartphone looks exactly the same after a tap, a visitor may wonder whether the interaction worked. It helps to distinguish the brief feedback shown while a button is being pressed from the status displayed after the action begins. This example uses a library catalog search button to show how colors can communicate a press without confusing it with a selection or an ongoing search.

Make the pressed appearance temporary and keep it separate from loading

One way to give a button a pressed feel is to make its background a little darker while it is held down and reduce its shadow. After the press ends, the button should return to its ordinary appearance rather than looking permanently pressed. A temporary pressed state and a selected state that remains visible are different things, and should be designed separately.

In CSS (the styling rules that determine how a web page looks), the :active pseudo-class can change a button’s appearance while the user activates it. By contrast, :hover mainly describes a pointing device resting over an element. On touchscreens, hover may not appear, may appear briefly, or may persist after a tap. Do not depend on hover alone for mobile press feedback; test the actual interaction on devices.

If the search continues after the user releases the button, do not simply keep the pressed color on screen. Provide a separate status such as “Searching…” while results are being retrieved. A color change alone cannot explain whether the tap was accepted or whether the site is still working.

Compare normal and pressed colors for a library search button

Imagine a library catalog search page. Give the page a pale blue-gray ■#F4F6F8 background, place the search field on a white ■#FFFFFF panel, and use dark slate ■#263647 for instructions. The instructions contrast at approximately 12.35:1 against the white panel ■#FFFFFF and 11.40:1 against the page background ■#F4F6F8. Both surfaces stay light so that the button remains an obvious action.

For the ordinary “Find books” button, use deep teal ■#176B6F with white ■#FFFFFF text. The text-to-button contrast ratio is approximately 6.23:1, above the 4.5:1 minimum for normal-sized text. The button also contrasts at approximately 6.23:1 with the white panel ■#FFFFFF, helping its shape stand apart from the surrounding form.

While the button is being pressed, change its background to darker teal ■#104E52 but keep the text white ■#FFFFFF. The pressed label contrasts at approximately 9.40:1 against its background, and the pressed button has the same 9.40:1 ratio against the white panel ■#FFFFFF. The contrast between the normal teal ■#176B6F and the pressed teal ■#104E52 is only about 1.51:1, so a change in shadow or a slight visual shift can help communicate the press instead of depending entirely on the darker color.

Keyboard focus should have its own visible cue, separate from the pressed appearance. For example, an ochre ■#8A6519 outline placed outside the button against the white panel ■#FFFFFF has a contrast ratio of approximately 5.31:1 with that panel. Give the outline enough thickness and separation from the button so it remains easy to locate.

Check quick taps, readability, and what happens after activation

Try a quick tap, a longer press, and lifting a finger from the button. Check when the pressed style appears and when it goes away. If the search takes time, show “Searching…” and then communicate completion through the results or a count. When preventing accidental repeated submissions, explain that the request is still being processed instead of leaving visitors with an unexplained disabled-looking control.

WCAG 2.2 (Web Content Accessibility Guidelines) generally specifies at least 4.5:1 contrast for normal-sized text against its background. Visual information necessary to identify a user interface control generally needs at least 3:1 against adjacent colors. This does not impose a universal 3:1 contrast requirement between a button’s normal color and its temporary pressed color. Check that the button and its text can be identified in both appearances, and separately test whether the interaction feedback is understandable.

HueRoll can display lighter or darker variations of a chosen color and compare it against white or black. It cannot directly compare two arbitrary colors or automatically determine WCAG compliance. For a pair such as the normal teal ■#176B6F and pressed teal ■#104E52, verify the difference using a separate contrast calculation.