CSS contrast-color(): маленькая функция, которая может помочь с доступностью
Chrome 147 подсветил contrast-color(): разбираем, почему автоматический контраст полезен, но не заменяет дизайн-проверку.
В Chrome 147 среди новых возможностей появилась CSS-функция contrast-color(). Идея понятная: подобрать цвет текста, который будет контрастировать с заданным фоном. Для интерфейсов с динамическими цветами это звучит очень заманчиво.
Где это может пригодиться
Представим теги, бейджи, статусы, аватары, цветовые метки в админке. Если фон выбирается автоматически или приходит из данных, дизайнер не может вручную проверить каждую комбинацию. Автоматический выбор контрастного цвета снижает риск получить светло-серый текст на желтом фоне.
Но есть нюанс
Доступность — это не только математический контраст. Важны размер текста, толщина шрифта, состояние hover/focus, окружающий фон и то, как элемент выглядит в реальном интерфейсе. Автоматическая функция может помочь, но не должна быть единственной проверкой.
Практичный подход
- использовать ограниченную палитру, а не случайные цвета;
- проверять основные состояния;
- не кодировать смысл только цветом;
- держать fallback для браузеров без поддержки;
- тестировать на реальном контенте.
Вывод
contrast-color() — полезная кирпичина для динамического UI, но не оправдание для хаотичной палитры. Хороший интерфейс все равно начинается с нормальной системы цветов.
Источник: New in Chrome 147.