color theoryApril 13, 202610 min read

Доступный цветовой контраст: WCAG без серой каши

Как разработать дизайн с учетом контраста WCAG 2.2, не превращая ваш бренд в серый цвет. Соотношения сторон, APCA, реальные примеры дизайн-систем и токенизированный рабочий процесс тестирования.

By Boone

X LinkedIn

Доступность и индивидуальность дизайна не противоречат друг другу. Это миф, который распространяет большинство бренд-команд, избегая обсуждения контраста, и именно поэтому многие «доступные» ребрендинги в итоге выглядят как вывески в аэропортах.

Доступный цветовой контраст — это проблема измерения. Современные дизайн-системы уже решили её на уровне токен, а это значит, что вам не нужно выбирать между попаданием в WCAG и сохранением интереса к бренду. Вам просто нужно знать правила, знать, где эти правила неверны, и знать, где на самом деле происходит работа.

Почему контраст — это единственное правило, которое нельзя игнорировать

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

Низкий контраст — это самая распространённая ошибка доступности в интернете. И её проще всего исправить. Слепые зоны, цветовая неравномерность, блики, возрастные изменения зрения, дешевые мониторы, прямой солнечный свет на экране телефона. Все это сводится к одному решению: достаточный контраст между текстом и фоном, чтобы сообщение выдержало самые сложные испытания, а не только проверку дисплея Retina дизайнера.

Панель вокселей, сравнивающая четыре пары цветов, соответствующих требованиям, с аннотациями с соотношением сторон 4,5:1 слева и четыре пары, не соответствующие требованиям, справа, иллюстрирующая разницу между доступным и недоступным контрастом.

Цена ошибки заключается не только в исключении из процесса. Это риск нарушения требований. Европейский закон о доступности (European Accessibility Act), Раздел 508 в США, Закон об обеспечении доступности для людей с ограниченными возможностями (AODA) в Онтарио и растущий список национальных законов используют WCAG в качестве юридического ориентира. Контраст — один из первых параметров, проверяемых при аудите, потому что именно он чаще всего выходит с ошибками.

Правила контраста WCAG 2.2 простым языком

WCAG предлагает три значения: 4,5:1, 3:1 и 3:1, и каждое из них применяется к определенному типу элементов пользовательского интерфейса.

|---------|-----------|-------------|-------|

| Основной текст | 4,5:1 | 7:1 | Любой текст меньше 18 пунктов обычного или 14 пунктов жирного шрифта |

| Крупный текст | 3:1 | 4,5:1 | 18 пунктов и более обычного или 14 пунктов и более жирного шрифта |

AA — это уровень, к которому стремится большинство коммерческих продуктов, и который требуется большинством законов о доступности. AAA — более строгий целевой уровень, в основном используемый в государственных учреждениях, здравоохранении и образовании. Если вам не предъявят документ о соответствии, подтверждающий AAA, то AA — это минимальный уровень.

Большинство дизайнеров попадают в ловушку, забывая о правиле 3:1 для нетекстовых элементов. Граница поля формы с соотношением сторон 2:1 на фоне страницы считается недопустимой, даже если текст внутри неё соответствует требованиям.

Кольцо фокусировки с недостаточным контрастом считается недопустимым. Значок, значение которого зависит от цвета, с соотношением сторон 2,5:1 считается недопустимым. Контраст нетекстовых элементов не является необязательным.

Почему математические расчёты WCAG часто неверны

WCAG коэффициенты контрастности — это формула 30-летней давности, которая игнорирует восприятие, поэтому иногда она допускает цвета, которые выглядят ужасно, и не допускает цвета, которые выглядят нормально.

Формула WCAG 2 основана только на яркости. Она рассматривает текст на фоне как линейную зависимость между относительной яркостью двух цветов. Человеческая зрительная система на самом деле воспринимает контраст не так.

Реальный перцептивный контраст зависит от толщины шрифта, размера шрифта, цветовой температуры и того, на что глаз смотрел секунду назад. WCAG 2 не учитывает ничего из этого. В результате получается соотношение, которое рассматривает светло-серый текст на белом фоне так же, как и черный текст на светло-сером, хотя один текст читабелен, а другой вызывает дискомфорт.

Как APCA решает проблему перцептивного восприятия

APCA, алгоритм доступного перцептивного контраста, измеряет контраст так, как работает человеческое зрение, поэтому в проекте WCAG 3 он предлагается в качестве замены.

Значения APCA варьируются от 0 (отсутствие контраста) до примерно 108 (экстремальный контраст). В отличие от WCAG 2, он учитывает толщину текста, размер текста и полярность (светлый текст на темном фоне и темный текст на светлом фоне ведут себя по-разному для глаза).

Примерные пороговые значения APCA для обычного текста:

Основной текст (16 пикселей, стандартный): 75+ (обязательно), 90+ (идеально)
Малый основной текст (14 пикселей, стандартный): 90+ (обязательно)
Крупный текст (24 пикселя и более): 60+ (обязательно)
Нетекстовый пользовательский интерфейс: минимум 45+

APCA пока нигде не является юридически обязательным. Но в разрабатываемых продуктах он уже используется в качестве внутреннего стандарта, поскольку лучше коррелирует с тем, что действительно хорошо читается. Разумнее всего соответствовать WCAG 2 AA для обеспечения соответствия требованиям и APCA для обеспечения фактического качества. Достичь обеих целей одновременно несложно, если ваши цветовые жетоны разработаны соответствующим образом.

Четыре системы дизайна: токенизация и контраст

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

Radix Colors

Смотрите трансляцию в прямом эфире на radix-ui.com

Radix Colors предлагает 12-ступенчатую шкалу, каждая ступень предварительно назначена определенной роли. Шаги 11 и 12 — это шаги для высококонтрастного текста, гарантированно соответствующие более низким шагам стандарта WCAG AA. Токены ролей (text, textContrast, solid, solidHover) означают, что дизайнеры никогда не вычисляют соотношение. Они выбирают роль.

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

Material Design 3

Смотрите трансляцию в прямом эфире на m3.material.io

Material 3 сопоставляет каждую цветовую роль с соответствующим on- (on-primary, on-surface, on-error), который гарантированно соответствует соотношению 4,5:1 по отношению к своему родительскому элементу. Парные токены представляют собой уровень доступности, встроенный непосредственно в систему.

Что стоит позаимствовать: шаблон on-. Когда дизайнер использует on-primary для текста, доступность обеспечивается автоматически. Нет возможности ошибиться.

Еще два: Соотношения и системы восприятия

Radix и Material решают проблему контраста за счет сопоставления ролей. Следующие два решают ее за счет документированных соотношений и перцептивно равномерных шкал. Оба подхода работают. Оба заслуживают заимствования.

GitHub Primer

GitHub Обзор системы основных цветов с отображением многоуровневых элементов дизайна и рекомендаций по доступности, встроенных в структуру палитры.

Смотрите прямую трансляцию на primer.style

Primer разделяет токены переднего плана, фона и границы на явные уровни с документированными коэффициентами контрастности. Их fg.default и bg.default публикуются с точными коэффициентами, и каждый семантический токен, основанный на роли, обрабатывается одинаково.

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

Adobe Spectrum

Adobe Страница, посвященная основам цветового спектра, демонстрирует перцептивную систему цвета и ее подход к проектированию для обеспечения доступного контраста в различных темах.

Смотрите прямую трансляцию на spectrum.adobe.com

Spectrum использует перцептивно равномерные цветовые шкалы, так что два токена с одинаковым номером шага имеют одинаковый визуальный вес по оттенкам. Это означает, что смена оттенков внутри одной темы сохраняет контрастность. Больше никаких «пройдено синим, но провалено оранжевым».

Что стоит позаимствовать: перцептивную однородность. Шкалы, построенные на перцептивных моделях (например, HSLuv, OKLCH или собственный подход Spectrum), делают доступность переносимой между различными темами бренда.

Нужна цветовая система, соответствующая стандартам WCAG, но не нарушающая целостность бренда? Brainy внедряет доступность на уровне токенов в каждую цветовую палитру.

Как оставаться доступным, не теряя индивидуальности

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

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

Три приема позволяют сохранить индивидуальность и доступность в одном помещении:

Разделите акцентный слой на фирменный цвет и цвет для доступных действий. Linear использует определенный фиолетовый цвет для фирменных моментов и немного другой фиолетовый для интерактивных элементов. Оба цвета являются узнаваемыми для бренда. Только один гарантированно подходит для любой поверхности.
Используйте перцептивно равномерные шкалы. OKLCH и HSLuv сопоставляют значения цвета с воспринимаемой яркостью, поэтому вы можете переключаться между оттенками, не нарушая контраст. Radix, Spectrum и Material 3 используют различные варианты этого подхода.
Предоставляйте темный режим как параллельный набор токенов, а не как дополнительную функцию. Токен, который не работает в темном режиме, не готов к его использованию. Если ваша система определяет text-default как один цвет в светлом режиме и другой цвет в темном, оба значения должны соответствовать соответствующей поверхности.

Худший результат — это компромисс, которого никто не просил: приглушенный фирменный стиль, который всё ещё недоступен. Это происходит, когда команды реагируют на отзывы о контрасте, обесцвечивая все цвета вместо того, чтобы исправить сочетания. Обесцвечивание — это не то же самое, что доступность. Взаимосвязи — это то же самое.

Рабочий процесс тестирования доступности

Проверка контраста — это дешево, автоматизировано и совершенно бессмысленно, если вы откладываете её до этапа проверки дизайна.

Рабочий процесс, который работает, выполняет проверку контраста в четырех точках, а не в одной.

Диаграмма рабочего процесса в вокселях, показывающая три соединенных станции с обозначениями DESIGN, TOKEN LAYER и CI CHECK, со стрелками и небольшими воксельными значками, представляющими палитру, токены и галочку.

При определении токена. При создании токена определяются и разрешенные для него поверхности. text-default допускается только для bg-default, bg-subtle и bg-raised. Контраст токена с каждым из них проверяется один раз и блокируется.
При фиксации компонента. Storybook в сочетании с интеграцией axe-core или pa11y выполняет проверки доступности для каждого варианта компонента в рамках CI. Любой новый вариант, не прошедший проверку, блокируется перед слиянием.
При передаче файла дизайна. Плагины Figma, такие как Stark или встроенный инструмент проверки WCAG, отмечают проблемы внутри инструмента проектирования. Выявляйте их на этапе проектирования, а не на этапе проверки.
На уровне страницы. Lighthouse, axe DevTools или pa11y запускаются на работающих страницах в тестовой или производственной среде. Это позволяет выявлять реальные ошибки (встраивание сторонних элементов, пользовательский контент, динамические темы), которые пропускают компонентные тесты.

Интерфейс проверки контрастности WebAIM отображает входные данные для цвета переднего и заднего плана с индикаторами соответствия и несоответствия уровням WCAG AA и AAA.

Суть не в том, чтобы запускать больше инструментов. Суть в том, чтобы перенести проверку на более ранний этап. Ошибка контраста, обнаруженная конвейером CI, исправляется за пять минут. Та же ошибка, обнаруженная при предварительном аудите перед запуском, обходится команде в неделю.

Что касается структурных причин, по которым работает этот многоуровневый подход, в руководство по системам проектирования объясняется, почему мышление на уровне токенов выигрывает. А в Правило 60-30-10 нарушено. объясняется, почему цветовая модель, основанная на ролях (от которой зависит доступность), заменила мышление, основанное на пропорциях.

Часто задаваемые вопросы

Достаточно ли WCAG AA или мне нужен AAA?

AA — это стандарт для большинства коммерческих продуктов и большинства законов о доступности. AAA юридически требуется только в определенных контекстах (государственный сектор, здравоохранение, образование) и его достижение обходится дорого без сглаживания палитры. В качестве минимального значения стремитесь к AA, а в качестве максимального — к идеальному значению APCA.

Должен ли каждый нетекстовый элемент соответствовать коэффициенту контрастности?

Нетекстовые компоненты пользовательского интерфейса, передающие смысл, должны иметь минимальное значение 3:1 в соответствии с WCAG 2.2. Это включает кнопки, границы форм, кольца фокусировки, значки со смыслом и графические элементы. Чистое оформление (фоновые узоры, градиенты) освобождается от этого требования. Незначительный текст (например, логотип, наложение подписи к фотографии) также освобождается от этого требования.

В чем разница между WCAG и APCA?

WCAG 2 — это действующий юридический стандарт, основанный на формуле яркости 30-летней давности. APCA — это предлагаемая замена в проекте WCAG 3, основанная на том, как на самом деле работает человеческое восприятие. Показатели APCA лучше коррелируют с реальной читаемостью, но пока не являются юридически обязательными. При разработке продуктов используются оба стандарта: WCAG 2 для соответствия требованиям, APCA для качества.

Внедрение доступности в токены

Доступный цветовой контраст — это не выбор стиля. Это свойство системы.

Команды, выпускающие наиболее инклюзивные и ориентированные на бренд продукты, перестали рассматривать доступность как второстепенный аспект и начали рассматривать её как свойство самого цветовая палитра.

Токены кодируют соотношения. Шкалы кодируют пары. Тестирование происходит на четырёх этапах рабочего процесса. Никто не подносит инструмент проверки контраста к экрану перед запуском.

Если ваш текущий процесс включает в себя визуальную оценку палитры на предмет «читабельности», вы провалите аудит. Если ваш процесс включает в себя инструмент проверки плюс ручные проверки, вы провалите масштабный проект. Если ваш процесс включает в себя токены на основе ролей, которые кодируют доступность на уровне определения, вы выпустите продукт.

Создайте токены. Опубликуйте соотношения. Автоматизируйте проверки. Бренд остается ярким, интерфейс — понятным, а аудит превращается из перестройки в формальность.