What Color Should a Selected Table Row Be? UI Colors That Clearly Show Selection State

In an admin interface where invoices can be exported together as a CSV file, people need to know exactly which table rows they have selected. Changing the background color of a row may help, but it can also be mistaken for a mouse hover or the position of keyboard focus. Using a fictional list of four invoices with two selected, this article explains how to combine row colors, checked states, and visible borders so that the meaning of selection remains clear.

Use a subtle selected-row background with an unmistakable selection cue

A data table arranges information in rows and columns. In this example, selecting a row adds that invoice to a later bulk export. Hover means a mouse pointer is resting over a row. Focus means a control is currently ready to receive keyboard input. Neither hover nor focus automatically means that the row is selected. Selection should remain visible after the pointer moves away or keyboard focus moves to a different invoice.

One option is to give unselected rows a white background ■#FFFFFF and selected rows a pale indigo background ■#EEF2FF. However, the contrast ratio (the difference in relative luminance) between those two fills is only about 1.12:1. The subtle tint keeps a table restrained, but it cannot reliably communicate the selected state on its own. Combine it with a visible “☑ Selected” label, an actual checkmark, and a strong line at the left edge of the selected row.

WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible) requires that color not be the sole visual means of conveying information. At Level AA, normal-sized text generally needs at least 4.5:1 contrast against its background. Meaningful selection marks and visual boundaries needed to recognize interactive components or their states generally need at least 3:1 against adjacent colors. Evaluate text and these visual state indicators separately.

Example colors for selecting two of four invoices

Give the page a very pale blue-gray background ■#F8FAFC, ordinary table rows a white background ■#FFFFFF, and invoice numbers and amounts dark-gray text ■#1F2937. This lettering has approximately 14.68:1 contrast against white. It still provides about 13.13:1 on the pale-indigo selected row ■#EEF2FF. Secondary slate text ■#475569 gives about 7.58:1 against white ■#FFFFFF and 6.78:1 against the selected background ■#EEF2FF.

On a selected row, add a deep-violet left border ■#4338CA and the words “☑ Selected” in dark indigo ■#312E81. The border has approximately 7.07:1 contrast with the selected row fill ■#EEF2FF and 7.90:1 against white ■#FFFFFF. The selected label ■#312E81 provides approximately 10.22:1 contrast against the selected background ■#EEF2FF. For a filled violet checkbox ■#4338CA, a white checkmark ■#FFFFFF has approximately 7.90:1 contrast.

An unchecked checkbox can use a slate outline ■#64748B against a white surface ■#FFFFFF, giving approximately 4.76:1 contrast. The presence or absence of a checkmark, rather than a growing number of colors, should be the main indication of selection. HEX refers to the hexadecimal color codes used to specify colors on the web.

The table below is a static illustration, not a working checkbox interface. Selecting invoice INV-1041 for ¥48,000 and INV-1043 for ¥52,000 would produce the summary “2 invoices selected — total ¥100,000” above an actual invoice list.

Keep hover, keyboard focus, and bulk actions visually distinct

For an unselected row under the mouse pointer, a light-gray hover fill ■#F1F5F9 differs from the ordinary white background ■#FFFFFF by only about 1.10:1. Hover is a temporary location cue, not confirmation that a row has been selected. Keep the pale-indigo selected-row fill ■#EEF2FF visible while giving keyboard focus its own dark-teal outline ■#0F766E. This outline has approximately 4.89:1 contrast against the selected fill ■#EEF2FF, 5.47:1 against white ■#FFFFFF, and 5.00:1 against the gray hover surface ■#F1F5F9.

A “Export Selected Invoices as CSV” button could use a deep-blue background ■#1D4ED8 and white lettering ■#FFFFFF. The text contrast is approximately 6.70:1, while the button contrasts with the pale page background ■#F8FAFC by about 6.41:1. Keep a visible “2 invoices selected” count close to the bulk action so the scope of the export is clear. Explain whether “Select All” refers only to the current page or to all records matching a search; these are not equivalent operations.

In a real web interface, each row should have an actual checkbox labeled with its invoice number. A person should be able to reach it with Tab and toggle it with Space. For an advanced data grid (an interactive table whose cells have managed keyboard navigation), implement the selection state using the appropriate WAI-ARIA attributes and keyboard behavior. WAI-ARIA is a set of accessibility roles, states, and properties that help assistive technologies understand controls. Do not turn an ordinary HTML table into an ARIA grid merely to change its appearance.

If selection persists while the user sorts the list or changes pages, update the selected count and clearly identify which invoices remain selected. On smartphones, keep each checkbox, invoice number, and amount meaningfully associated. HueRoll lets you enter HEX codes, choose a color, and check its contrast against white or black. It cannot compare arbitrary pairs of custom colors or automatically determine WCAG AA or AAA compliance. The row, border, and text contrast ratios above were calculated separately.