Режим высокой контрастности

Не позволяйте доступности контента (a11y) портить ваш проект. Соответствие стандартам цветового контраста должно создать удивительный пользовательский интерфейс.

У вас уже были случаи, когда вы сталкивались с обеспечением доступности web-контента? Если нет, то запаситесь попкорном, на это нельзя смотреть просто так. Обычно это происходит примерно следующим образом:

Кто-то: нам нужно начать поддерживать доступность веб-страниц, чтобы помочь клиенту X.
Все остальные: что такое доступность?
Кто-то: поддержка чтения с экрана, клавиатурная навигация, режим высокой контрастности...
Все остальные: RAWR! GHAAAA! AAARRRGGGHHH!

Я понимаю эти проблемы. Я тоже пережил их. Я был ответственным за запуск поддержки доступности контента для Bridge LMS. Как и у многих проектов с доступностью, у нас было два этапа: неправильный путь и правильный путь. Я многому научился, и наконец-то мы нашли простой способ. Моя цель - поделиться тем, что я узнал. В этой статье основное внимание уделяется высококонтрастному режиму и объяснениям, почему вы должны стремиться его поддерживать.

Основные рекомендации по цветовому контрасту

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

Коэффициент контрастности 3:1 - это минимальный уровень, рекомендованный [ISO-9241-3] и [ANSI-HFES-100-1988] для стандартного текста и зрения.

WCAG 2.0 рекомендует коэффициент контрастности 4,5:1, который намного сложнее достичь. Коэффициент 4,5:1 - минимальный, который будет полезен для пользователей с нарушениями зрения. Это отнюдь не идеальный коэффициент контрастности. Спецификация WCA 2.0 AAA требует контрастности 7:1, которая более полезна людям с нарушениями зрения.

Неправильный путь (4.5:1)

Поначалу многим может показаться, что нужно просто немного дотянуть уже имеющиеся цвета до коэффициента 4,5:1. Если вы так уже делали, я знаю, как вы страдали. Я тоже так делал.

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

Хуже всего в коэффициенте 4.5:1 то, что он удовлетворяет только требованиям спецификации. Он не удовлетворяет нужды пользователей. Дизайн с гораздо более высоким соотношением контрастности даст вам больше свободы и лучшие результаты.

Мой проект застопорился, когда наша команда разработчиков не смогла договориться между собой о том, какие цвета использовать. И тогда я задал им ещё более непосильную задачу - перейти к коэффициенту контраста 7:1.

После нескольких месяцев разочарований мы не достигли ощутимого прогресса. Альберт Кандари (Albert Candari), директор UX for Bridge, ворвался в наш проект и решил эту проблему. Его работа изменила траекторию проекта. Это также изменило мои мысли о дизайне навсегда.

Правильный путь (7:1)

Альберт сделал шаг назад, ещё до момента преобразования цветов к коэффициенту 4,5:1, и начал с нуля.

Первое, что разработал Альберт, - это цветовая матрица. Он взял основные цвета и создал набор цветов, которые мы могли использовать на темном фоне. Сочетание светлого цвета и темного фона красиво визуально и очень контрастно.

Вам понадобится больше, чем набор цветов, чтобы обеспечить высокую контрастность. Обратите внимание также на типографику, значки, границы и другие визуальные элементы. Например, требования к контрасту по цвету ниже для более крупного шрифта. Увеличение размера шрифта заголовков даст вам больше свободы в выборе цвета. Добавление границы к кнопке может уже быть достаточным для соответствия нормам контрастности. Помните, что яркие цвета будут неотличимы для пользователей с нарушениями зрения. Вместо цвета используйте текст и значки.

После того, как у нас была готова цветовая матрица, следующим шагом было сопоставление старых цветов с высококонтрастной цветовой матрицей.

Проект высокого контраста для Bridge был огромным успехом. Мы обнаружили, что довольно много пользователей перешло в режим высокой контрастности, потому что это было удобно и красиво.

Вывод

Если вы собираетесь поддерживать стандарты доступности в интернете (а вы должны), то теперь вы можете сделать это правильно. Достижение контраста AAA 7:1 проще и практичнее, чем "подгон" существующих цветов к стандарту WCAG 2.0 AA 4,5:1. И ваш продукт при этом будет выглядеть красиво.