jul 21, 2023

🔗 TIL #2: Text selection color

Adding the feature of highlighting words with a custom on-brand color, different from the default one, can be a nice touch to add when polishing a new website.

It's very easy to add a ::selection highlight color to the CSS. Just add the following code to the CSS file:

::selection {
	background: yellow;
	color: black;
}

The most important thing to keep in mind when working with this feature is to make sure the color contrast is high enough, for accessibility reasons. Generally you want to use a light highlight color, but if anywhere in the website you have a light text, you should use a dark highlight color instead.