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

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

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

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

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

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

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

В CSS цвет может быть указан множеством способов, например, с использованием названий цветов, значений RGB, RGBa, HEX, HSL, HSLa, HSV или HSVa. HSLa похож на HSL, только добавлено альфа-значение. Альфа — это мера прозрачности и определяется как число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Оттенок — это качественный способ описания цвета, такого как красный, зеленый или синий, где каждый оттенок имеет определенное место на цветовом спектре со значениями от 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. Эта формула часто сокращается до [значение цвета]:1. Например, чистый черный на чистом белом имеет наибольшее соотношение цветового контраста 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 — это относительная яркость более светлого цвета
L2 — это относительная яркость более темного цвета

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

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

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

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

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

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

Медиа-запросы, ориентированные на цвет¶

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

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

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

Предпочтения цветовой схемы¶

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

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

Светлый режим
Темный режим

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

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

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

Светлый режим
Темный режим

Наслоение медиа-запросов¶

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

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