Keep selected text readable

Selecting text should not make it harder to read.

The ::selection pseudo-element changes selected text appearance.

Set foreground and background colors together.

For example, try dark text on a pale yellow background.

Similar colors can obscure the text.

Select several article words with the mouse.

Also check links within the selection.

This pseudo-element does not support every CSS property.

The browser’s default selection is suitable when customization is unnecessary.

Test the result in your audience’s browsers.

Complete example code

::selection { color: #172033; background-color: #fff2a8; }

Official sources

• MDN — ::selection