Особенности функции contrast-color()

Энди Кларк делится своим мнением о функции CSS contrast-color() и её ограничениях, которые мешают ей раскрыть весь потенциал. Автор отмечает, что для своего сайта он использует тёмно-синий фон (#212E45) и слегка приглушённый светлый текст (#d3d5da). Целью такого выбора является смягчение контраста между фоном и текстом, при этом сохраняя достаточный уровень для обеспечения доступности.

Основная проблема функции contrast-color() заключается в том, что она автоматически выбирает либо чисто белый, либо чисто чёрный цвет для текста. Для автора такой высокий контраст часто кажется слишком резким и, по его мнению, делает чтение менее комфортным. Например, при использовании тёмно-синего фона (hsl(238.2 53.1% 12.5%)) и чисто белого текста (#fff) контраст был излишне броским.

Вместо абсолютного белого, он предпочитает немного менее непрозрачный цвет, такой как hsl(100 100% 100% / .8), что примерно на 20% светлее белого. Однако функция contrast-color() не предоставляет такой гибкости для настройки оттенков и всегда возвращает чистый чёрный или белый. Именно поэтому автор вместо неё использует функцию light-dark(), которая позволяет задать разные цвета для светлого и тёмного режимов и добиться желаемого эффекта.

Пример использования light-dark():

body {
  color: light-dark(hsl(238.2 53.1% 12.5%), hsl(100 100% 100% / .8));
}

Согласно спецификации, будущие версии contrast-color() предположительно будут предоставлять больше контроля над используемыми алгоритмами контраста и возвращаемыми цветами. Тем не менее, определение "правильного" уровня контраста значительно сложнее, чем простое соотношение 4.5:1. Это связано с необходимостью учёта пользовательских предпочтений и продолжающейся работой над WCAG 3.0, что делает этот вопрос гораздо более нюансированным.

Оригинал статьи