Цвет

Доступный цвет

Не используйте только цвет, чтобы указать на наличие компонента пользовательского интерфейса или его состояние. Для этого лучше использовать значки и/или форму. Не обозначайте успех или ошибки ТОЛЬКО цветом. Используйте значки или текст.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Контрастность

• Минимальные стандарты контрастности. Поддерживайте соотношение 4,5:1 для обычного текста и 3:1 для крупного текста или значков.
• Обеспечьте достаточный контраст нетекстовых элементов. Коэффициент контрастности границ и состояний компонентов пользовательского интерфейса должен быть не менее 3:1.
  • К ним относятся визуальные элементы (границы, фоны, тени, подчеркивания), которые образуют границу или указывают на наличие компонента пользовательского интерфейса (например, границы поля ввода).
  • Это также относится к визуальным элементам, указывающим на активное состояние компонента (например, флажкам или переключателям).
  • Предостережение. Соблюдение коэффициента контрастности 3:1 для нетекстовых элементов может быть сложной задачей при минималистичном дизайне. Мягкие градиенты или едва заметные внутренние и внешние тени могут смягчить визуальные границы, не нарушая требований к специальным возможностям.
• Используйте prefers-contrast только при необходимости. @media (prefers-contrast: more) подходит для дизайнов с низкоконтрастными акцентами (например, тонкими границами или приглушенным второстепенным текстом), которые нужно усилить. Большинству сайтов, которые уже соответствуют базовому уровню контрастности, это не нужно.

Светлая и тёмная цветовые схемы

• Поддержка светлой и темной цветовых схем. Используйте медиазапрос @media (prefers-color-scheme: dark) и свойство CSS color-scheme, чтобы элементы управления формами, полосы прокрутки и другие элементы интерфейса, отрисовываемые агентом пользователя, соответствовали выбранной теме. Подробнее о тёмной теме…

Режим принудительных цветов

• Поддержка режима принудительного использования цветов. В режиме принудительного использования цветов (высокая контрастность в Windows) браузер заменяет цвета, заданные автором, системными ключевыми словами и удаляет background-image, box-shadow и border-image. Определите резервные системные цвета для токенов цвета с помощью @media (forced-colors: active).
• Используйте forced-color-adjust: none, только если цвет является важной информацией (например, для подсветки синтаксиса или в палитре). НЕ используйте forced-color-adjust: none только для сохранения эстетики.
• Не полагайтесь на background-image, box-shadow или border-image для передачи границ, разделителей или состояния. Они исчезают в принудительных цветах (и часто при печати тоже). Если это необходимо, убедитесь, что в режиме принудительных цветов есть альтернатива, например outline или border с ключевыми словами системных цветов (CanvasText, LinkText, ButtonText, Highlight, GrayText и т. д.).

Создание оттенков

Прежде чем генерировать оттенки динамически, проверьте, можно ли использовать существующий, предопределенный токен дизайна. Это позволяет дизайнерам лучше контролировать внешний вид и обеспечивает единообразие.

Если вам нужно динамически генерировать более светлые или темные цвета:

• НЕ настраивайте только канал яркости в oklch/oklab или lch/lab, например oklab(from var(--primary) 0.9 a b). Теоретически это правильный способ, но браузеры пока не поддерживают сопоставление цветовой гаммы, поэтому результат может быть непредсказуемым.
• Вы можете использовать color-mix(), чтобы смешивать цвета с белым или черным (желательно в oklab). Это позволяет сохранить цвет в гамме, но может привести к чрезмерной десатурации и получению размытых оттенков.
• Вы МОЖЕТЕ комбинировать настройку яркости с любым другим методом (например, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)), чтобы найти баланс между ними, но не увеличивайте яркость более чем на 30 %.