How to Change Selected Text Colors on Websites | Choosing Colors for Text Selection

When someone drags across text on a web page, the browser or operating system changes the foreground and background colors of the selected range. CSS lets you customize those colors with the ::selection pseudo-element. Selection styling is not only decorative: the selected text still needs to remain readable. This article shows three practical patterns for light pages, dark pages, and pages that use a brand color.

Set the selected text color and selection background together with ::selection

In the CSS Pseudo-Elements specification, ::selection represents the part of a document currently selected by the user. Highlight pseudo-elements support a limited set of non-layout properties, including color and background-color. For a document-wide base style, the W3C specification recommends :root::selection so descendant elements can override the selection style cleanly when needed.

:root::selection {
  background-color: rgb(49 95 120);
  color: rgb(255 255 255);
}

In this example, the selection background is blue ■#315F78 and the selected text is white ■#FFFFFF. Their contrast ratio—the relative brightness difference between foreground and background colors—is about 6.91:1. If you change only the selection background and leave the text color unchanged, some combinations can become hard to read only while selected, so the two colors should be checked as a pair.

Three selection color schemes for different page brightness levels

1. Use white text on a deep blue selection for light pages

On a page with a white ■#FFFFFF background and charcoal ■#25272A body text, use blue ■#315F78 for the selection background and white ■#FFFFFF for selected text. The selected text has about 6.91:1 contrast against the selection background, while the normal body text has about 14.98:1 against white. The strong background change also makes the selected range easy to notice.

2. Use dark text on a bright amber selection for dark pages

On a dark navy ■#1F2937 page with light gray ■#F3F4F6 normal text, use amber ■#FFD166 for the selection background and switch selected text to dark navy ■#1F2937. The selected text has about 10.18:1 contrast against amber, while the normal text has about 13.34:1 against the dark page. Do not assume selected text should stay white just because the page itself is dark; choose the foreground color according to the selection background.

3. If you use a brand color, prioritize contrast inside the selected range

On a warm off-white ■#F7F4EE page, a restrained brand purple such as ■#6B4F7A can work as the selection background. White ■#FFFFFF selected text gives about 6.94:1 contrast against that purple. If the normal body text is charcoal ■#25272A, it has about 13.64:1 contrast against the off-white page background. Even when the selection color comes from the brand palette, selected-text readability should come first.

Selected text is still text, so check its contrast like any other reading state

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. Because selected content is still text that people may need to read, custom ::selection styles should be checked using the selected text color and selected background color as the actual pair. Links, code, quotations, and other elements with different base text colors should also be tested while selected because highlight inheritance can affect the final result.

Use :root::selection for the document-wide selection style, then add a more specific element’s ::selection only where a different color is needed. The CSS Pseudo-Elements specification notes that *::selection can interfere with highlight inheritance, so it is less convenient as a global default. In HueRoll, you can choose candidate colors with a three- or six-digit HEX code or the color picker, then compare the selected color with white or black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so the selected foreground and selection background still need to be checked separately.