CSS Contrast Color

13.05.2025, Ссылка на статью

Safari Technology Preview выкатил новую фичу – CSS-функцию contrast-color(), которая на основе переданного цвета возвращает либо черный, либо белый цвет. Данная функция может быть очень полезно для разработки специальных режимов отображения сайтов и её можно использовать в специальном медиа-запросе, который узнаёт, что пользователь предпочитает более контрастный интерфейс.

.button {
	--color: royalblue;
	--bg-color: rgb(from var(--color) r g b / 20%);
 
	color: var(--color);
	background-color: var(--bg-color);
	
	@media (prefers-contrast: more) {
		color: contrast-color(var(--color));
	}
}

Расчёт контрастного цвета

Контрастный цвет рассчитывается согласно спецификации WCAG 2.0¹, и в будущем ожидается, что в WCAG 3.0 будет добавлен улучшенный алгоритм расчёта контрастности цвета – Accessible Perceptual Contrast Algorithm (APCA).

В 2021 году в Safari Technology Preview 122 была добавлена более гибкая функция для работы с контрастными цветами, которая позволяла сравнить два цвета между собой и выбрать один из переданных цветов. Фича в итоге не была добавлена в браузеры, и её перенесли в CSS Color Module Level 6 и переименовали в contrast-color(). В будущем спецификация подразумевает, что мы сможем узнать контраст цвета с использованием определенного алгоритма и выбрать один из переданных цветов.

Footnotes

1. WCAG – Web Content Accessibility Guidelines. ↩