Цвет и контраст

Вы когда-нибудь пытались читать текст на экране и сталкивались с трудностями из-за цветовой гаммы или испытывали проблемы с видимостью на экране в условиях очень яркого или слабого освещения? Или, может быть, у вас есть более серьезные проблемы с цветовым зрением, как, например, у примерно 300 миллионов человек с дальтонизмом или у 253 миллионов человек с ослабленным зрением ?

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

В этом модуле вы познакомитесь с некоторыми доступными основами цвета и контраста.

Восприятие цвета

А вы знали, что предметы не обладают цветом, но отражают длины волн света? Когда вы видите цвет, ваши глаза воспринимают и обрабатывают эти длины волн и преобразуют их в цвета.

Когда речь идёт о цифровой доступности, мы говорим об этих длинах волн в терминах оттенка, насыщенности и яркости (HSL). Модель HSL была создана как альтернатива цветовой модели RGB и более точно соответствует тому, как человек воспринимает цвет.

Оттенок — это качественный способ описания цвета, например, красного, зеленого или синего, где каждый оттенок занимает определенное место в цветовом спектре со значениями от 0 до 360, при этом красный находится в точке 0, зеленый — в точке 120, а синий — в точке 240.

Насыщенность — это интенсивность цвета, измеряемая в процентах от 0% до 100%. Цвет с полной насыщенностью (100%) будет очень ярким, тогда как цвет без насыщенности (0%) будет серым или черно-белым.

Светлость — это степень насыщенности цвета, измеряемая в процентах от 0% (черный) до 100% (белый).

Измерьте цветовой контраст

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

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

Слева на изображении показан радужный песок фиолетового, красного, оранжевого, желтого, бирюзового, светло-голубого и темно-синего цветов. Справа — более яркий, многоцветный радужный узор.

Дейтеранопия

Дейтеранопия (широко известная как зеленая слепота) встречается у 1–5% мужчин и 0,35–0,1% женщин.

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

Протанопия

Протанопия (широко известная как красная слепота) встречается у 1,01%–1,08% мужчин и у 0,02%–0,03% женщин.

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

Ахроматопсия или монохроматизм

Ахроматопсия или монохроматизм (или полная цветовая слепота) встречается крайне, крайне редко.

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

Рассчитайте цветовой контраст

Формула цветового контраста использует относительную яркость цветов для определения контраста, который может варьироваться от 1 до 21. Эта формула часто сокращается до [color value]:1 . Например, чистый черный цвет на чистом белом имеет наибольший коэффициент цветового контраста — 21:1 .

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

Для соответствия минимальным требованиям WCAG к цвету , текст стандартного размера, включая изображения текста, должен иметь коэффициент контрастности 4.5:1 Крупный текст и основные значки должны иметь коэффициент контрастности 3:1 . Крупный текст характеризуется размером не менее 18pt / 24px или 14pt / 18.5px, выделенных жирным шрифтом. Логотипы и декоративные элементы освобождаются от этих требований к цветовой контрастности.

К счастью, никаких сложных математических вычислений не требуется, поскольку существует множество инструментов, которые выполнят расчеты цветового контраста за вас. Такие инструменты, как Adobe Color , Color Contrast Analyzer , Leonardo и палитра цветов DevTools в Chrome, могут быстро определить коэффициенты цветового контраста и предложить варианты для создания наиболее оптимальных цветовых пар и палитр.

Использование цвета

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

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

Просмотр цифровых продуктов в оттенках серого — хороший способ быстро выявить потенциальные проблемы с цветопередачей.

Запросы СМИ, ориентированные на цвет

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

Например, используя медиа-запрос @prefers-color-scheme , вы можете создать темную тему, которая может быть полезна людям с фотофобией или светочувствительностью. Вы также можете создать тему с высокой контрастностью с помощью @prefers-contrast , которая подходит людям с нарушениями цветового зрения и повышенной контрастной чувствительностью .

Предпочитает цветовую гамму

Медиа-запрос @prefers-color-scheme позволяет пользователям выбирать светлую или темную тему оформления веб-сайта или приложения. Вы можете увидеть изменение темы в действии, изменив настройки светлой или темной темы и перейдя в браузер, поддерживающий этот медиа-запрос. Инструкции по настройке темного режима для Mac и Windows см. в соответствующем руководстве.

Сравните светлый и темный режимы.

Предпочитает контраст

Медиазапрос @prefers-contrast проверяет настройки операционной системы пользователя, чтобы определить, включен или выключен режим высокой контрастности. Вы можете увидеть это изменение темы в действии, изменив настройки контрастности и перейдя в браузер, поддерживающий этот медиазапрос (настройки режима контрастности для Mac и Windows ).

Сравните обычный и высококонтрастный варианты.

Запросы к медиафайлам слоев

Вы можете использовать несколько медиазапросов, ориентированных на цвет, чтобы предоставить пользователям еще больше вариантов выбора. В этом примере мы объединили @prefers-color-scheme и @prefers-contrast .

Сравните цвет и контраст.