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

Сравнение палитр Okabe-Ito и Paul Tol с симуляцией протанопии, дейтеранопии и тританопии, а также правила дизайна, не зависящего от цвета: контраст светлоты, двойное кодирование, критерии WCAG.

Если примерно каждый 12-й мужчина (среди людей европейского происхождения) имеет красно-зелёное нарушение цветового зрения, то среди тех, кто смотрит на ваши графики, карты и дашборды, всегда есть люди с цветоаномалией. Хорошая новость: достаточно соблюдать несколько правил, чтобы большинство проблем исчезло.

Правило 1 — не передавайте информацию только цветом

Критерий успешности 1.4.1 «Использование цвета» стандарта веб-доступности WCAG требует, чтобы цвет не был единственным визуальным способом передачи информации. Поле с ошибкой помечайте не только красной рамкой, но и значком с текстом, а линии графика — не только цветом, но и формой маркеров, пунктиром и прямыми подписями.

Правило 2 — обеспечьте разницу светлоты

Даже при нарушении цветового зрения разница яркости видна хорошо. Цвета, которые нужно различать, выбирайте с явно разной светлотой (яркостью). Самая простая проверка — различимы ли они при чёрно-белой печати.

Правило 3 — избегайте пары «красный — зелёный», используйте «синий — оранжевый»

«Хорошо = зелёный, плохо = красный» — самая частая ошибка. И протанам, и дейтанам эти два цвета кажутся похожим цветом охры. Если нужен контраст двух категорий, безопаснее всего пара синий ↔ оранжевый.

Проверенные палитры

Палитра «цветового универсального дизайна», предложенная Okabe и Ito, — 8 цветов, подобранных так, чтобы различаться и при красно-зелёных нарушениях. Таблица ниже показывает те же цвета в симуляции дихромазии (Machado 2009, интенсивность 100%).

Палитра Okabe–Ito (8 цветов) — в каждой строке один и тот же цвет в симуляции для каждого типа
Нормальное зрение	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Протанопия	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Дейтеранопия	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Тританопия	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

Палитра Paul Tol «bright» тоже составлена с учётом нарушений цветового зрения и чёрно-белой печати.

Палитра Paul Tol bright (7 цветов)
Нормальное зрение	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Протанопия	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Дейтеранопия	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Тританопия	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

А привычные насыщенные сочетания красного, зелёного и оранжевого у протанов и дейтанов накладываются друг на друга.

Пример, которого стоит избегать, — сочетание насыщенных красного и зелёного
Нормальное зрение	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Протанопия	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Дейтеранопия	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Тританопия	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Для непрерывных значений — равномерное изменение светлоты

Для непрерывных величин (температура, плотность) используйте последовательные цветовые шкалы, где светлота равномерно меняется в одном направлении (viridis, cividis и т. п.). Шкала cividis создана с учётом нарушений цветового зрения.
Радужная шкала (jet) со скачущей светлотой вводит в заблуждение даже людей с нормальным зрением, а в красно-зелёном участке информация теряется.
Для расходящихся значений (рост и падение) дивергентная шкала синий — белый — оранжевый (или красный) безопаснее красно-зелёной.

Текст и контраст

Контраст светлоты основного текста и фона по критерию WCAG 1.4.3 рекомендуется не ниже 4,5:1. Красный текст на чёрном фоне для протанов резко теряет контраст.
Не меняйте у ссылок только цвет — оставляйте подчёркивание.

Порядок проверки

1. Различимо ли в оттенках серого (чёрно-белом)
2. Различимо ли в симуляторе при протане и дейтане на 100%
3. Есть ли кроме цвета подсказки — форма, подписи, узоры
4. Можно ли подписать данные прямо на графике, без легенды

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

Открыть в симуляторе →