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

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

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

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

Воспринимать цвет

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

Глаз, рассматривающий цветовой круг.

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

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

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

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

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

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

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

Оригинальный радужный песок.
Фото Александра Грея на Unsplash .
Оригинальный рисунок радуги.
Фото Кларка Ван Дер Бекена на Unsplash .

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

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

Радужный песок, каким его видит человек с дейтеранопией.
Радужный узор, каким его видит человек с дейтеранопией.

Дейтеранопия (широко известная как зеленая слепота) встречается у 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

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

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

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

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

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

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

Цветоориентированные медиа-запросы

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

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

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

Поддержка браузера

  • Хром: 76.
  • Край: 79.
  • Фаерфокс: 67.
  • Сафари: 12.1.

Источник

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

Общие настройки внешнего вида macOS.
Сравните светлый и темный режим.
Пример кода в облегченном режиме.
Светлый режим.
Пример кода в темном режиме.
Темный режим.

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

Поддержка браузера

  • Хром: 96.
  • Край: 96.
  • Фаерфокс: 101.
  • Сафари: 14.1.

Источник

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

Сравните обычный и высококонтрастный.
Пример кода в светлом режиме без настройки контрастности.
Светлый режим, без настройки контрастности.
Пример кода в темном режиме с предпочтением высокой контрастности.
Темный режим, предпочтение высокой контрастности.

Слой медиа-запросов

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

Сравните цвет и контраст.
Светлый режим, обычный контраст.
Светлый режим, без настройки контрастности.
Темный режим, обычный контраст.
Темный режим, без настройки контрастности.
Светлый режим, высокая контрастность.
Светлый режим, предпочтение высокой контрастности.
Темный режим, высокая контрастность.
Темный режим, предпочтение высокой контрастности.

Проверьте свое понимание

Проверьте свои знания о цвете и контрасте.

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

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