Контрастность цветов и доступность: руководство по WCAG

Каждый раз, когда вы щуритесь на веб-сайте из-за слишком светлого текста или с трудом разбираете подпись кнопки, сливающейся с фоном, вы сталкиваетесь с провалом контрастности. Для большинства людей это просто небольшое неудобство. Для значительной части населения — людей с нарушениями цветового зрения, слабовидящих, людей с возрастными изменениями зрения или тех, кто работает с экраном на ярком солнце, — это делает контент по-настоящему недоступным. Контрастность цветов — один из наиболее значимых и наиболее часто нарушаемых аспектов веб-доступности, и при этом один из самых простых для исправления, как только вы разберётесь в правилах. В этом руководстве объясняется стандарт, формулы расчёта, типичные ошибки и то, как использовать Проверку контрастности цветов BrowseryTools, чтобы мгновенно проверить любую пару цветов прямо в браузере.

Почему контрастность важна

Масштаб затронутой аудитории больше, чем обычно предполагают дизайнеры. По данным Всемирной организации здравоохранения, около 2,2 миллиарда человек в мире имеют те или иные нарушения зрения. Аномалии цветового зрения — широко известные как цветовая слепота — затрагивают примерно 8% мужчин и 0,5% женщин среди населения северноевропейского происхождения, что составляет около 300 миллионов человек, испытывающих трудности с различением определённых цветов.

Помимо постоянных нарушений, контрастность ситуативно влияет на всех:

• Чтение телефона на ярком уличном солнце полностью «смывает» текст с низкой контрастностью.
• Старые или бюджетные мониторы имеют сниженную яркость и худшую точность цветопередачи.
• Люди с мигренью и светочувствительностью часто используют дисплеи с уменьшенной яркостью.
• Блики от окон или верхнего освещения фактически снижают воспринимаемую контрастность.
• Пользователи в спешке — по сути, все — быстрее воспринимают контент с высокой контрастностью.

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

Что такое коэффициент контрастности?

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

Диапазон — от 1:1 (два одинаковых цвета — нулевая контрастность, полная нечитаемость) до 21:1 (чёрный на белом — максимально возможная контрастность). Чем выше коэффициент, тем заметнее различие между двумя цветами.

Как рассчитывается коэффициент контрастности

Формула, используемая WCAG (и всей экосистемой веб-стандартов), опирается на понятие относительной светимости — меры того, сколько света, по ощущениям, излучает цвет с учётом особенностей человеческого восприятия. Расчёт выполняется в два шага.

Шаг 1: вычислить относительную светимость (L) для каждого цвета.

Сначала каждый канал RGB переводится из диапазона 0–255 в линейную шкалу 0–1, затем применяется гамма-формула для компенсации способа кодирования яркости на дисплее:

// Для каждого значения канала c в [0, 1]:
if c <= 0.04045:
    c_linear = c / 12.92
else:
    c_linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

Коэффициенты 0,2126, 0,7152 и 0,0722 отражают чувствительность человеческого зрения: наш глаз наиболее чувствителен к зелёному, умеренно — к красному, и наименее — к синему.

Шаг 2: вычислить коэффициент контрастности.

Коэффициент контрастности = (L_lighter + 0.05) / (L_darker + 0.05)

Где L_lighter — относительная светимость более светлого цвета, а L_darker — относительная светимость более тёмного цвета.

Примеры расчётов

• Чёрный (#000000) на белом (#FFFFFF): L(белый) = 1,0; L(чёрный) = 0,0. Коэффициент = (1,0 + 0,05) / (0,0 + 0,05) = 1,05 / 0,05 = 21:1. Максимально возможная контрастность.
• Серый #767676 на белом (#FFFFFF): L(#767676) ≈ 0,216. Коэффициент = (1,0 + 0,05) / (0,216 + 0,05) ≈ 1,05 / 0,266 ≈ 4,54:1. Едва проходит уровень WCAG AA для обычного текста.
• Серый #999999 на белом (#FFFFFF): L(#999999) ≈ 0,319. Коэффициент = (1,0 + 0,05) / (0,319 + 0,05) ≈ 1,05 / 0,369 ≈ 2,85:1. Не проходит уровень WCAG AA для текста любого размера.

WCAG: стандарт, определяющий требования к доступности

Руководство по обеспечению доступности веб-контента (WCAG) публикуется Консорциумом Всемирной паутины (W3C) и является международно признанным стандартом веб-доступности. Актуальная версия, используемая в большинстве нормативных актов, — WCAG 2.1 (2018 год). WCAG 3.0 находится в разработке и в конечном счёте заменит её более нюансированной системой измерения, но WCAG 2.1 остаётся действующим стандартом для целей соответствия.

WCAG структурирует требования по трём уровням соответствия: A (минимальный), AA (стандартный) и AAA (расширенный). Уровень AA требуется большинством правовых систем. Уровень AAA является желательным, но не обязательным для всего сайта — только для отдельных контекстов.

Важно понимать, на что требования по контрастности не распространяются: декоративные изображения без информационного содержания, логотипы и фирменные знаки, а также текст, входящий в состав неактивного элемента интерфейса (например, заблокированной кнопки), освобождены от требований WCAG 2.1. Цель стандарта — защита информационного контента, а не сугубо декоративных элементов.

Примеры пар цветов: прошедшие и не прошедшие проверку

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

Типичные ошибки контрастности

В аудитах доступности по всему вебу снова и снова встречаются одни и те же ошибки. Знание их «по именам» помогает замечать их в собственной работе.

Светло-серый текст на белом фоне

Это наиболее распространённый провал контрастности в современном вебе. Тренд на минимализм породил целое поколение интерфейсов, в которых основной текст, подписи, метаданные и placeholder-текст отображаются оттенками вроде #aaaaaa, #bbbbbbили #cccccc на белом фоне. Такие комбинации, как правило, дают коэффициент контрастности 1,5–2,5:1 — значительно ниже минимума 4,5:1. Дизайнер видит это на откалиброванном мониторе в затемнённой комнате; конечный пользователь с телефоном на послеполуденном солнце — нет.

Белый текст на цветных кнопках

Белый текст на жёлтом (#ffdd00), ярко-зелёном (#84cc16) или светло-оранжевом (#fb923c) фоне не проходит WCAG AA ни при каком размере текста. Такие сочетания визуально эффектны, но контрастность слишком низка. Тёмный текст (чёрный или очень тёмно-серый) на этих ярких фонах — доступное решение, при котором коэффициент обычно превышает 10:1.

Текст-подсказка в полях ввода

Браузерный placeholder-текст по умолчанию отображается примерно при 40% непрозрачности основного цвета текста или как средне-серый наподобие #aaaaaa. Это почти повсеместно не проходит WCAG AA. Placeholder-текст подпадает под то же требование 4,5:1, что и обычный текст, поскольку несёт информацию о том, что следует ввести.

Синие ссылки на цветном или тёмном фоне

Традиционный цвет гиперссылки (#0000ee) отлично контрастирует на белом фоне (8,6:1), но теряет контрастность на цветных фонах. На среднефиолетовом фоне тот же синий цвет ссылки даёт лишь около 1,7:1. Цвета ссылок нужно проверять не только на фоне страницы, но и на фоне любых цветных секций или карточек, в которые они помещены.

Заблокированные состояния и индикаторы фокуса

Хотя WCAG 2.1 освобождает неактивные элементы интерфейса от требований по контрастности, индикаторы фокуса — видимое кольцо или обводка, которая появляется при переходе пользователя к интерактивному элементу с помощью Tab, — должны соответствовать коэффициенту 3:1 по WCAG 2.2. Многие сайты скрывают стандартное кольцо фокуса через outline: noneи не предоставляют замены — это нарушение доступности для пользователей клавиатуры.

Методы выбора доступных цветов

Начинайте с тёмного на светлом

Самый надёжный вариант для текста — почти чёрный текст на белом или очень светло-сером фоне. Коэффициенты выше 10:1 легко достижимы и дают большую свободу в выборе размера и насыщенности шрифта. Оставьте светлые схемы на тёмном фоне (тёмная тема) для второстепенных поверхностей и проверяйте контрастность в обеих темах.

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

Кнопка в состоянии по умолчанию может соответствовать уровню AA, тогда как при наведении — с осветлённым фоном — падать ниже 4,5:1. Проверяйте отдельно состояния по умолчанию, при наведении, в фокусе, активное и заблокированное. Заблокированное состояние освобождено от требования, все остальные должны его выполнять.

Правило 60-30-10 в доступном применении

Цветовое правило 60-30-10 (60% — доминирующий цвет, 30% — второстепенный, 10% — акцентный) полезно для визуальной иерархии. Применяя его доступно, убедитесь, что текст в каждой из трёх цветовых зон соответствует порогу контрастности именно для этой зоны. Акцентный цвет при 10% чаще всего является проблемным: яркие акценты в паре с белым или тёмным текстом могут не пройти проверку при определённых сочетаниях тона и насыщенности.

Используйте проверку контрастности до начала вёрстки

Дешевле всего исправить проблему контрастности ещё до написания кода. При выборе цветов в инструменте дизайна немедленно проверяйте запланированные пары текст/фон. Изменение светлоты цвета на 10–15% нередко переводит провальную комбинацию в соответствие стандарту без ощутимого изменения визуального характера дизайна.

Правовые требования

Соответствие WCAG во многих юрисдикциях не является добровольным. Правовые системы, ссылающиеся на WCAG AA, включают:

• США — Закон об американцах с инвалидностью (ADA): ADA запрещает дискриминацию по инвалидности в местах общественного обслуживания. Федеральные суды и Министерство юстиции распространили это понятие на коммерческие веб-сайты. Ежегодно в федеральных судах США подаются тысячи исков о нарушении ADA в сфере доступности, причём нарушения контрастности часто упоминаются в досудебных претензиях.
• Европейский союз — EN 301 549: Директива ЕС о веб-доступности обязывает государственные веб-сайты и мобильные приложения соответствовать WCAG 2.1 уровня AA. EN 301 549 — это технический стандарт, используемый при государственных закупках. Требования к частному сектору в регулируемых отраслях также растут.
• Канада — AODA (Закон об доступности для жителей Онтарио с ограниченными возможностями): Онтарио обязывает частные организации с 50 и более сотрудниками и все государственные структуры соответствовать WCAG 2.0 уровня AA.
• Великобритания — Закон о равенстве 2010 года: Поставщики услуг обязаны вносить разумные коррективы для людей с инвалидностью, и правительство Великобритании трактует это как включение доступности веб-сайтов.

Помимо правового риска, многие корпоративные клиенты и государственные процедуры закупок теперь требуют соответствия WCAG AA в контрактах с поставщиками. Доступность превращается в коммерческое требование, а не только в этическое.

Кто выигрывает помимо людей с инвалидностью

Доступная контрастность — это хороший дизайн для всех. Исследования в области UX неизменно показывают, что высококонтрастный текст читается быстрее и с меньшим числом ошибок во всех группах пользователей. Среди тех, кто выигрывает больше всего:

• Люди с нарушениями цветового зрения (красно-зелёным, сине-жёлтым или монохроматизмом)
• Пожилые люди, у которых чувствительность к контрасту естественно снижается с возрастом
• Слабовидящие, не использующие экранное увеличение
• Пользователи в условиях высокой внешней освещённости (на улице, у окна)
• Пользователи с некачественными, устаревшими или бюджетными дисплеями
• Все, кто испытывает когнитивную нагрузку — при усталости или рассеянности высокая контрастность снижает ошибки чтения

Как использовать Проверку контрастности BrowseryTools

Проверка контрастности цветов BrowseryTools делает тривиальной проверку любой комбинации цветов на соответствие стандартам WCAG:

• Введите HEX-коды: введите или вставьте любой допустимый шестнадцатеричный код цвета (3 или 6 цифр, с символом # или без него) в поля переднего плана и фона.
• Мгновенный результат: коэффициент контрастности рассчитывается и отображается в режиме реального времени по мере ввода — никаких кнопок нажимать не нужно.
• Бейджи AA и AAA: наглядные бейджи «Прошёл/Не прошёл» отображаются для уровня AA (обычный и крупный текст) и уровня AAA (обычный и крупный текст) — видно, каким порогам соответствует ваша пара.
• Живой предпросмотр: инструмент отображает образец текста на выбранном фоне, чтобы вы видели комбинацию так, как её увидит пользователь.
• Используйте палитру цветов: если конкретного HEX-значения нет, встроенная палитра позволяет выбирать цвета визуально и сразу видеть, как меняется коэффициент при перемещении по цветовому пространству.