доступная цветовая палитра · WCAG 2.2 · контраст · дополнительные сигналы
Как создать доступную цветовую палитру
Превратите фирменные цвета в роли интерфейса, измерьте пары, которые действительно соприкасаются, сохраните заметный фокус и состояния, а симуляцию используйте как вспомогательную проверку.
доступная цветовая палитра
Что делает цветовую палитру доступной?
Доступная цветовая палитра — это набор цветов с назначенными ролями, где реальные сочетания текста, фона, элементов управления, фокуса и графики проверены для конкретного использования. На уровне AA WCAG 2.2 обычному тексту, как правило, нужен контраст не ниже 4,5:1, крупному тексту — 3:1, а визуальной информации, необходимой для распознавания активных элементов и значимой графики, — 3:1 относительно соседних цветов. Цвет не должен быть единственным сигналом. У каждого токена должна быть задача, каждая пара проходит порог без округления, а ошибки, ссылки, выбор и диаграммы получают также текст, форму, узор или положение.
Четыре правила доступной цветовой палитры
- доступная цветовая палитра: сначала назначьте смысловые роли: холст, поверхность, основной текст, акцент, граница, фокус, успех, предупреждение и ошибка
- доступная цветовая палитра: измеряйте каждый передний план на фактическом фоне, включая наведение, фокус, выбор, наложение и тёмную тему
- доступная цветовая палитра: считайте 4,5:1 и 3:1 минимальными порогами без округления и оставляйте запас для тонких шрифтов и реальных экранов
- доступная цветовая палитра: дублируйте смысл подписью, значком, подчёркиванием, формой, узором или положением, чтобы оттенок не был единственной инструкцией
доступная цветовая палитра: Проверки WCAG 2.2 по роли в интерфейсе
| Применение | Что измерять | Цель уровня AA | Практическое замечание |
|---|---|---|---|
| Обычный текст · доступная цветовая палитра | текст и фактически отрисованный фон | не менее 4,5:1 | 4,499:1 нельзя округлить до успешного результата |
| Крупный текст · доступная цветовая палитра | крупный текст и его фон | не менее 3:1 | минимум 18 pt обычного или 14 pt полужирного текста, с эквивалентом для CJK |
| Активные элементы и значимая графика · доступная цветовая палитра | необходимый визуальный сигнал и соседние цвета | не менее 3:1 | проверяйте границы, значки, фокус, выбор и элементы данных, если они несут смысл |
| Информация, закодированная цветом · доступная цветовая палитра | смысл помимо различия оттенков | видимый нецветовой сигнал | добавьте текст, форму, узор, подчёркивание, значок или положение |
доступная цветовая палитра: Начните с ролей, а не с любимых образцов
Фирменная палитра описывает индивидуальность, а доступная цветовая палитра — решения. Сначала перечислите холст страницы, приподнятую поверхность, основной и вторичный текст, ссылку, акцент, границу, кольцо фокуса, неактивное состояние, успех, предупреждение и ошибку. Дайте каждой функции стабильный токен вместо разбросанных по компонентам HEX-значений. Затем отметьте, какие роли соприкасаются. Основной текст может находиться и на странице, и на карточке; рамка ошибки может граничить с полем и фоном страницы. Такая карта не позволит проверить всё только на белом, когда в продукте используются тонированные панели, прозрачность, изображения, градиенты и тёмная тема. Фирменный цвет не обязательно удалять: если он небезопасен для текста или управления, его можно оставить только для декора.
доступная цветовая палитра: Постройте матрицу пар для текста, элементов и состояний
Проверяйте сочетания, а не изолированные цвета. Для текста фиксируйте передний план, отрисованный фон, размер, насыщенность и состояние. Для элементов учитывайте визуальную информацию, необходимую для обнаружения компонента и понимания фокуса, отметки, выбора, раскрытия, ошибки и наведения. WCAG исключает неактивные компоненты из требования к нетекстовому контрасту, но продукт всё равно может сохранять их читаемыми и узнаваемыми. Прозрачные цвета измеряйте после композиции с фоном, а для текста на изображении или градиенте берите худшую реалистичную точку. Храните результаты рядом с токенами, чтобы смена темы не разрушила доступную цветовую палитру незаметно. Матрица также показывает лишние варианты: если два серых выполняют одну роль, но только один проходит на всех поверхностях, меньшая система обычно надёжнее.
доступная цветовая палитра: Разделите яркостный контраст и смысл цветового кода
Контраст и использование цвета отвечают на разные вопросы. Зелёная метка успеха может иметь отличный текст и всё равно быть недостаточной, если только зелёный отличает её от красной ошибки. Сохраните цвет, но добавьте слово, значок, узор или структуру, которые останутся в оттенках серого и при другом цветовом восприятии. Ссылкам в тексте помогает подчёркивание. Диаграммам нужны прямые подписи, разные формы маркеров, стили линий или узоры, если важно распознавать ряды. Фокус должен быть виден без определения названия цвета. Дополнительные или далёкие на цветовом круге оттенки не становятся доступными автоматически: расстояние по тону не гарантирует разницу относительной яркости и не создаёт второй сигнал. Доступная цветовая палитра даёт основу, а содержание и компонент завершают сообщение.
Контрольный список доступной цветовой палитры
- доступная цветовая палитра: назовите каждый цвет по смысловой роли и укажите разрешённые поверхности и состояния
- доступная цветовая палитра: измерьте обычный текст на уровне 4,5:1 или выше, а крупный — 3:1 или выше на отрисованном фоне
- доступная цветовая палитра: измерьте активные границы, фокус, состояния и важную графику на уровне 3:1 к соседним цветам
- доступная цветовая палитра: проверьте обычное, наведённое, сфокусированное, активное, выбранное, ошибочное, отключённое, наложенное и тёмное состояния
- доступная цветовая палитра: добавьте подпись, форму, значок, узор, подчёркивание или положение, когда цвет сообщает статус или идентичность
- доступная цветовая палитра: сохраните матрицу, результат инструмента, версию компонента и дату, чтобы повторить проверку после изменений
доступная цветовая палитра: Создайте и проверьте палитру за четыре шага
доступная цветовая палитра: 1. Перечислить роли
доступная цветовая палитра: зафиксируйте текст, поверхности, границы, элементы, фокус, данные и обратную связь, затем отметьте соседство по темам и состояниям.
доступная цветовая палитра: 2. Получить кандидатов
доступная цветовая палитра: исследуйте согласованные варианты в генераторе гармонии, отделяя фирменные предпочтения от проверок контраста и смысла.
доступная цветовая палитра: 3. Измерить матрицу
доступная цветовая палитра: проверьте реальные пары без округления и замените или ограничьте каждый токен, который не достигает назначенного порога.
доступная цветовая палитра: 4. Проверить все состояния
доступная цветовая палитра: просмотрите типичные различия цветового зрения, серую шкалу и фокус, затем испытайте компоненты на компьютере и телефоне.
доступная цветовая палитра: Что именно устанавливает WCAG 2.2
- доступная цветовая палитра: Критерий 1.4.3 задаёт для уровня AA 4,5:1 обычному и 3:1 крупному тексту, определяет крупный размер как минимум 18 pt обычного или 14 pt полужирного и запрещает округлять пороги. Читать пояснение W3C к SC 1.4.3
- доступная цветовая палитра: Критерий 1.4.11 требует не менее 3:1 к соседним цветам для визуальной информации, необходимой для распознавания активных элементов, состояний и значимых графических объектов. Читать пояснение W3C к SC 1.4.11
- доступная цветовая палитра: Критерий 1.4.1 требует видимую альтернативу, когда цвет передаёт информацию, действие, ответ или различие; если важен точный цвет, даже пара 3:1 нуждается в другом сигнале. Читать пояснение W3C к SC 1.4.1
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
Вопросы о доступной цветовой палитре
Должен ли каждый цвет контрастировать со всеми остальными?
доступная цветовая палитра: Нет. Проверяйте пары, которые должны соприкасаться, и выполняемые ими роли. Основной текст может проходить на нескольких поверхностях, а декоративный акцент никогда не несёт текст и не обозначает элемент. Запишите ограничения, чтобы токен не попал в непроверенную связь. Матрица точнее, чем отметка соответствия на одном образце.
Дополнительные цвета автоматически доступны?
доступная цветовая палитра: Нет. Противоположные места на цветовом круге описывают оттенок, а не результат WCAG. Яркие дополнительные цвета могут иметь близкую яркость, затруднять чтение или сливаться при некоторых особенностях зрения. Получите гармоничные варианты, затем измерьте контраст и добавьте нецветовые сигналы.
Доказывает ли симулятор соответствие WCAG?
доступная цветовая палитра: Нет. Симуляция — обзорный инструмент, а не диагноз, расчёт соответствия или замена людей с инвалидностью. Измерьте обязательные пары детерминированным инструментом, проверьте дополнительные сигналы и полные состояния, а по уровню риска добавьте экспертную или пользовательскую оценку.