Управление цветом CSS и доступность отображения

Цвет в сети проходит цепочку: CSS называет пространство, браузер преобразует, экран ограничивает, настройки меняют вид. Доступность зависит от реально видимых текста, фона, состояния и резерва.

Пространства и профили

rgb() обычно использует sRGB; CSS также знает display-p3, lab и oklch. Профиль связывает каналы с условиями просмотра, но не обещает возможности экрана. Отделяйте замысел от координат. CSS Color 5 и MDN color() описывают язык, а не каждый дисплей.

Используйте роли --surface, --text, --focus-ring с wide-gamut, sRGB и forced-colors вариантами.

Преобразование color()

color(display-p3 1 0 0) задаёт координату; браузер адаптирует её и может сжать диапазон. @supports проверяет синтаксис, а не широкую гамму экрана. Проверяйте градиенты, тени, границы и состояния focus, error и selected.

Различия гаммы

Широкий цвет выглядит иначе на разных экранах, при разном свете и управлении системой. Не кодируйте состояние только красным и зелёным: добавляйте текст, значок, узор или положение. Масштаб и размер шрифта тоже меняют читаемость.

BotBrowser поддерживает авторизованные сценарии цвета, контраста и предпочтений в документированных конвейерах, но не меняет физическую гамму экрана и не сертифицирует доступность каждого устройства. См. возможности BotBrowser и проверяйте реальные устройства и вспомогательные технологии.

Контраст и доступность

Контраст относится к паре и состоянию. Проверяйте текст, фон, изображения, overlays, focus, error, disabled и selected по вычисленным стилям. Фикстура содержит заголовок, текст, ссылку, фокус и ошибку, затем проверяется с увеличением, принудительными цветами, клавиатурой и экранным диктором. Хорошее соотношение не гарантирует удобство тонкого шрифта.

Учитывайте prefers-contrast, forced colors и prefers-reduced-motion, не создавая профиль устройства.

Доставка резерва

Начните с sRGB или системных цветов, добавьте wide-gamut и правила высокого контраста. При отказе декларации действует предыдущая. Если пара не подходит, состояние сохраняется текстом и значком. При смене палитры сохраняйте выбор, диапазон, фокус и текст ошибки.

Записывайте контекст, синтаксис, цвета, контраст, настройку и видимое ограничение без снимков и частных данных. См. проверку выпусков и руководство совместимости.

Фиксированная запись

Зафиксируйте CSS, роли, резервы, цель контраста, фикстуры и предпочтения. Сохраняйте факт, что P3 может быть принят и отображён иначе, или что нужна более тёмная альтернатива. Запись называет компоненты и восстановление, не обещая одинаковые цвета.

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

Замысел бренда остаётся ясным при снижении насыщенности.

Фокус сохраняет видимую рамку.

Ошибка содержит пояснение.

Выбор имеет дополнительный признак.

Системная настройка соблюдается.

Печать использует высокий контраст.

Webview может изменить фон.

Тест записывает контекст.

Снимок не заменяет проверку клавиатурой.

Действие сохраняется после смены цветов.

Интерфейс объясняет ограничение.

Фикстура повторяется после обновления.

Резерв сохраняет подписи.

Проверка сравнивает все состояния.

Замысел остаётся понятным при снижении насыщенности. Фокус сохраняет рамку, ошибка содержит текст, а выбор имеет дополнительный признак. Системная настройка соблюдается без профиля. Печать использует высокий контраст, webview может дать другой фон. Тест записывает контекст, сохраняет действие и повторяется после обновления.

Публичные источники

• CSS Color Module Level 5
• MDN: CSS color()
• BotBrowser: расширенные возможности