Как изменить цвет выделения текста

Короткий ответ

::selection задаёт цвета текста, который выделил пользователь. Выделите строки ниже:

<style>
  .brand::selection { background: gold; color: black; }
</style>
 
<p class="brand">Select this text to see the gold highlight.</p>
<p>This paragraph keeps the default selection color.</p>

Для всей страницы

Без селектора перед двоеточием правило действует на всю страницу:

::selection { background: rgb(255 215 0 / 60%); }

Полупрозрачный фон хорошо смотрится на любых цветах страницы.

Что можно менять

Внутри ::selection работают только несколько свойств: color, background-color, text-decoration и text-shadow. Шрифт, отступы и рамки там не действуют.

Запретить выделение

Если текст не должен выделяться, например на кнопке, есть user-select: none. Не используйте его для обычного текста — люди копируют цитаты, адреса и номера.

Частая ошибка

Выбирают цвет выделения, на котором текст плохо читается, например светлый текст на светло-жёлтом. Задавайте пару background и color вместе и проверяйте контраст.