Цветовой контраст для дизайна интерфейса

По оценкам, в мире насчитывается 285 миллионов человек с нарушениями зрения. В это число входят все, от слепых до лиц со зрением менее 20/20.

Это краткое руководство, написанное во время создания приложения Contrast MacOS, поможет вам достичь стандартов доступности, изложенных в WCAG 2.0, особенно с цветом переднего плана и фона, когда речь идет о тексте на цифровых экранах.

TL; DR

  • Ошибка - ваш текст недостаточно контрастирует с фоном. Вы, вероятно, хотите сделать его темнее. Это оценка менее 3,0.
  • AA Large - Наименьшее допустимое количество контраста для шрифтов размером 18px и больше. Это оценка не менее 3,0.
  • AA - Это самое приятное место для текста размером менее ~ 18pt. Это оценка не менее 4,5.
  • AAA - это усиление контраста с оценкой не менее 7,0. Подумайте больше о том, какие статьи будут прочитаны в течение значительного периода времени.

Декоративные элементы или текст, являющийся частью логотипа или торговой марки, не имеют минимальных требований к контрасту

Существуют и другие факторы, которые необходимо учитывать, чтобы полностью соответствовать стандартам AA и AAA, но это обеспечит вам хорошее начало.

Оценка и соотношение

В WCAG (Рекомендации по доступности веб-контента) есть уравнение, определяющее эти два значения.

  1. Результат
  2. Соотношение

Уравнение выводит число от 1 до 21, где 21 - наибольшая степень контрастности - например, черный текст и белый фон - и 1 - отсутствие контрастности - белый на белом.

Результат контраста между любыми двумя цветами будет падать где-то в спектре между 1–21. Вот откуда берутся баллы.

Технически 5 баллов.

  1. AAA
  2. AAA Large
  3. А.А.
  4. АА Большой
  5. Потерпеть поражение

AAA

AAA означает, что ваш текст имеет контрастность не менее 7,0. Например, 595959 текст на фоне ffffff и наоборот.

Обратите внимание, что для достижения истинного рейтинга AAA в разделе 1.4.8.1 WCAG также говорится, что «цвета переднего плана и фона могут быть выбраны пользователем».

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

Эта оценка получена для людей с плохим зрением 20/80. Этот показатель остроты зрения часто невозможно исправить с помощью очков и т. Д.

Дополнительное примечание, 20/200 является юридически слепым.

ISO 9241–3 Эргономические требования к офисной работе с терминалами визуального отображения (VDT). Часть 3. Требования к визуальному отображению. Поправка 1.

AAA Large

AAA Large означает, что ваш большой текст имеет коэффициент контрастности 4,5 или выше, что соответствует показателю AA, поэтому вы не увидите AAA Large в качестве видимой оценки в приложении.

WCAG описывает жирный шрифт 14pt и 18pt как «большие» размеры. Это примерно соответствует 18,5px жирным шрифтом и 24px @ 1x. Это приблизительное значение, поскольку размеры букв могут значительно различаться в зависимости от шрифта.

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

А.А.

АА означает, что ваш текст имеет контрастность не менее 4,5 или выше. Например, 757777 текст на фоне ffffff и наоборот.

Существуют эмпирические данные, свидетельствующие о том, что острота зрения 20/40 связана с потерей контрастной чувствительности примерно в 1,5 раза, в результате чего получается показатель 4,5.

Гиттингс Н.С. и Фозард Д.Л. (1986). Возрастные изменения остроты зрения. Экспериментальная геронтология, 21 (4–5), 423–433.
ANSI-ГФЭ-100-1988. Американский национальный стандарт по разработке человеческого фактора для терминальных рабочих станций с визуальным дисплеем, раздел 6, с. 17–20.

АА Большой (АА +)

AA Large означает, что ваш текст имеет контрастность не менее 3,0. Например, 949595 текст на фоне ffffff.

Это минимальный уровень, рекомендуемый стандартами ISO-9241–3 и ANSI-HFES-100–1988 для стандартного текста и нормального зрения, в котором WCAG получил эту оценку.

Мы приняли решение сокращать Large до + в приложении, чтобы каждая оценка была одинаковой по длине символа и не влияла на фиксированную ширину интерфейса.

ПОТЕРПЕТЬ ПОРАЖЕНИЕ

Ошибка означает, что ваш текст имеет контрастность 2,9 или ниже. Это не относится к логотипам, тексту в логотипах и другим декоративным элементам.

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

Как насчет мобильных приложений и их больших острых экранов сетчатки?

Существует рабочий проект руководства WCAG для мобильных устройств, в котором говорится…

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

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

Больше, чем просто контраст

Доступность намного больше, чем просто цветовой контраст. Вот несколько фрагментов из WCAG, например:

1.4.8 Визуальное представление. Для визуального представления блоков текста доступен механизм для достижения следующих целей: (Уровень AAA) Цвета переднего плана и фона могут быть выбраны пользователем. Ширина не должна превышать 80 символов или глифов (40). если CJK). Текст не выровнен (выровнен по левому и правому краям). Межстрочный интервал (начальный) в абзацах составляет по меньшей мере половину пространства, а интервал между абзацами по меньшей мере в 1,5 раза больше межстрочного интервала. Размер текста может быть изменен без вспомогательной технологии до 200 процентов, что не требует от пользователя прокрутки по горизонтали для чтения строки текста в полноэкранном окне.

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

Если вы хотите увидеть, насколько глубоко заходит кроличья нора WCAG, возьмите красную таблетку.

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

Кроме того, это лучшая веб-программа для проверки контрастности, которую я нашел, если вы любитель Интернета.

Контраст используется в SketchКонтраст используется в Adobe XDКонтраст используется в IllustratorКонтраст используется с Figma

Это руководство было первоначально опубликовано на usecontrast.com/guide. Контраст был разработан Мэттом Д. Смитом () и разработан Сэмом Соффсом.