CSS-функция `contrast-color()`

contrast-color() — это CSS-функция, которая принимает значение color и возвращает контрастный цвет. Обычно функция обеспечивает минимальный контраст WCAG AA. Браузеры могут использовать другие, более совершенные алгоритмы.

Функция contrast-color() позволяет задать цвет текста и автоматически подобрать контрастный цвет фона или наоборот. Это избавляет от необходимости поддерживать пары цветов текста и фона.

Синтаксис

contrast-color(red)
contrast-color(var(--backgroundColor))

Параметры

color

Любое допустимое значение color.

Возвращаемое значение

<named-color>: white или black.

Описание

Функция contrast-color() возвращает значение white или black — в зависимости от того, какое из них обеспечивает наибольший контраст с входным цветом. Если white и black обеспечивают одинаковый контраст с входным цветом, возвращается white.

Примеры

Контрастный текст для кнопки

В следующем примере браузер автоматически применяет выбранный цвет к фону элемента <button> «Button», а контрастный цвет (чёрный или белый) — к его тексту.

<label>
  Select background color of the button:
  <input type="color" id="colorPicker" value="#660066" />
</label>
<br />
<button>Button</button>

:root {
  --button-color: lightblue;
}

button {
  background-color: var(--button-color);

  /* Set contrasting text color automatically */
  color: contrast-color(var(--button-color));
}

body {
  padding: 1rem;
}

button {
  margin: 3rem;
  padding: 1rem;
  width: 150px;
  font-size: 2rem;
  border-radius: 1rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Your browser doesn't support the contrast-color() function.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

const colorPicker = document.getElementById("colorPicker");
const root = document.documentElement;

function updateColor(color) {
  root.style.setProperty("--button-color", colorPicker.value);
}

colorPicker.addEventListener("input", updateColor);
updateColor();

Использование в светлом и тёмном режимах

В следующем примере prefers-color-scheme используется в медиазапросе, чтобы задать цвет фона в соответствии с настройками цветовой схемы операционной системы или браузера. Функция contrast-color() автоматически задаёт цвет текста.

Измените настройку тёмного режима в браузере или ОС, чтобы увидеть результат.

<pre>
    Q: How does CSS transform light into energy?
  Ans: Using <a href="/en-US/docs/Web/CSS/Reference/Properties/font-synthesis">font-synthesis</a>.
</pre>

:root {
  --background-color: navy;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: wheat;
  }
}

body,
a {
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

body {
  padding: 2rem;
  font-size: 1.2rem;
}

pre {
  margin-top: 3rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Your browser doesn't support the contrast-color() function.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Спецификации

Совместимость с браузерами

См. также

• contrast()
• Модуль CSS colors
• Пользовательские свойства CSS и var()
• Функции prefers-contrast и prefers-color-scheme @media
• WCAG: контрастность цветов
• Как заставить браузер выбирать контрастный цвет в CSS на webkit.org (2025)
• Проверка контрастности WebAIM на webaim.org (2025)