7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Adobe Illustrator

Создаем графический дизайн и иллюстрации для людей с цветовой слепотой.

Scroll to top
Read Time: 14 mins

Russian (Pусский) translation by Sweta Soloveva (you can also view the original English article)

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

1. Что такое цвет? Краткое определение

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

Исходя из Google, существительное цвет - это:

"Свойство, которым обладает объект, излучающий или отражающий свет и таким образом создающий различные ощущения на глазу.

Теперь сам свет состоит из множества цветов, имеющих разную длину волны, где красный - самый длинный, который люди могут видеть, а фиолетовый - самый короткий.

Мы знаем это, так как в 1666 году сэр Исаак Ньютон организовал небольшой эксперимент, в котором он взял луч белого солнечного света и пропустил его через стеклянную призму. То, что он наблюдал, должно было быть невероятным в тот момент, так как призма разделила луч на полосу из семи составляющих цветов, которые он назвал «спектром». Порядок этих цветов от нижнего края спектра: фиолетовый (V), индиго (I), синий (B), зеленый (G), желтый (Y), оранжевый (O) и красный (R), что теперь мы называем ROYGBIV.

light dispersion examplelight dispersion examplelight dispersion example

Подсказка: вы можете увидеть призматический эксперимент Ньютона в действии, перейдя на канал MITK12Videos на YouTube, где они подробно расскажут о причине явления рассеивания света.

2. Как наши глаза «видят» цвет?

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

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

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

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

Конусы, с другой стороны, сосредоточены в середине сетчатки (4,5–6 миллионов клеток) и способны захватывать три различные длины волны: S (короткая), M (средняя) и L (длинная).

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

Нормальное цветовое зрение использует все три типа световых конусов (красный, зеленый и синий) и известно как трихроматичность.

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

3. Что такое дальтонизм?

Теперь у нас есть базовое представление о том, что такое цвет, но что такое дальтонизм?

Ну, многие думают, что дальтонизм означает, видеть мир в черно-белом, но на самом деле это не так.

Как указывает онлайн-версия Медицинского словаря, дальтонизм - это:

«Ненормальное состояние, характеризуемое неспособностью четко различать разные цвета спектра».

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

Осознание дальтонизма гласит, что это заболевание затрагивает приблизительно 1 из 12 мужчин (8%) и 1 из 200 женщин во всем мире.

4. Каковы различные виды дальтонизма?

Как мы узнали несколько минут назад, у наших глаз есть три типа конусов. В зависимости от того, какой из них затронут, человек может страдать от одного из трех условий:

4.1. Красно-зеленый дальтонизм

По данным Национального института глаз (NEI), наиболее распространенным типом дальтонизма является «потеря или ограниченная функция фотопигментов красного конуса (протан) или зеленого конуса (дейтран)», которые в зависимости от их серьезности могут привести к:

  • Протаномалия: когда фотопигментация красного конуса человека является ненормальной, в результате чего красный, оранжевый и желтый цвета выглядят более зелеными.
example for protanomalyexample for protanomalyexample for protanomaly
  • Протанопия: когда нет рабочих красных колбочек, в результате чего красный цвет становится черным, а определенные оттенки оранжевого, желтого и зеленого - желтым.
example for protanopiaexample for protanopiaexample for protanopia
  • Дейтераномалия: когда фотопигментация зеленого конуса человека является ненормальной, в результате чего желтый и зеленый цвета становятся краснее, из-за чего трудно отличить фиолетовый от синего.
example for deuteranomalyexample for deuteranomalyexample for deuteranomaly
  • Дейтеранопия: когда нет работающих зеленых конусных клеток, красные становятся коричнево-желтыми, а зеленые - бежевыми.
example for deuteranopiaexample for deuteranopiaexample for deuteranopia

4.2. Сине-желтый дальтонизм

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

В зависимости от случая мы можем иметь:

  • Тританомалия: когда клетки синего конуса человека имеют ограниченную функцию, в результате синий становится зеленым, и трудно отличить желтый и красный от розового.
example for tritanomalyexample for tritanomalyexample for tritanomaly
  • Тританопия: когда клетки синего конуса человека отсутствуют, синий становится зеленым, а желтый - фиолетовым или светло-серым.
example for tritanopiaexample for tritanopiaexample for tritanopia

4,3. Полный дальтонизм

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

example of monochromacyexample of monochromacyexample of monochromacy

5. Как узнать, что ты дальтоник?

Если вы хотите убедиться, что ваши глаза функционируют правильно, вы должны посетить оптометриста, который применит простой тест восприятия цвета, который называется «Тест цвета Исихара». Название происходит от его создателя доктора Шинобу Исихара, который в 1917 году опубликовал простой, но изобретательный метод определения, является ли человек дальтоником или нет, используя цветные таблички (пластины Исихара). Каждая пластина содержит несколько точек, которые различаются по цвету и размеру и отображаются в виде кругового рисунка, образуя число в центре.

ishihara plate exampleishihara plate exampleishihara plate example

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

Если вы пока не хотите идти к окулисту, вы можете пройти тестирование онлайн на любом из следующих сайтов:

6. Как вы можете увидеть, что видит дальтоник?

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

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

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

6.1 Онлайн симуляторы дальтонизма

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

  • Coblis от Colorblindness.com, вероятно, является наиболее исчерпывающим решением, поскольку оно генерирует изображения для всех типов дальтонизма.
example of coblis color simulatorexample of coblis color simulatorexample of coblis color simulator
  • Vischeck - это более простой генератор, который дает вам возможность предварительно просматривать изображение как исходного, так и имитированного дефекта цветового зрения.
example of vischeck color simulatorexample of vischeck color simulatorexample of vischeck color simulator

Если вы веб-дизайнер и хотите посмотреть, как будет выглядеть ваш проект для человека, страдающего дальтонизмом, Toptal создала умный маленький Color Blind Filter, который берет любой веб-сайт и конвертирует его, используя один из четырех доступных фильтров.

example of toptal color blind filterexample of toptal color blind filterexample of toptal color blind filter

6.2. Локальные симуляторы дальтонизма

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

  • Adobe Illustrator: если вы не знали, Illustrator на самом деле поставляется с двумя цветопробами (Protanopia и Deuteranopia) в его меню View (View> Proof Setup), которые помогают вам быстро увидеть, как будет выглядеть ваш проект при просмотре дальтоником.
example of color blindness filter within adobe illustratorexample of color blindness filter within adobe illustratorexample of color blindness filter within adobe illustrator
  • Adobe Photoshop: те же цветные доказательства включены в Photoshop (View > Proof Setup), помогая определить и исправить окончательный результат.
example of color blindness filter within adobe photoshopexample of color blindness filter within adobe photoshopexample of color blindness filter within adobe photoshop
  • Stark - это бесплатный плагин, созданный для Sketch, который поможет вам выбрать один из восьми цветовых профилей и просмотреть свой дизайн как дальтоник.
  • Color Oracle - это еще один бесплатный симулятор дальтонизма, разработанный Берни Дженни, который можно установить и использовать в Windows, Mac и Linux, и который был создан для работы независимо от используемого вами креативного программного обеспечения.

7. Как дальтонизм влияет на качество жизни?

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

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

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

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

8. Как вы можете настроить дизайн и иллюстрации для дальтоников?

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

8.1. Какие цвета работают лучше всего?

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

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

  • красный и зеленый
  • красный и коричневый
  • красный и оранжевый
  • красный и фиолетовый
  • красный и черный
  • зеленый и коричневый
  • зеленый и оранжевый
  • светло-зеленый и желтый
  • синий и зеленый
  • синий и фиолетовый
  • синий и желтый

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

example of color combinations to avoidexample of color combinations to avoidexample of color combinations to avoid

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

8.2. Как вы можете исправить плохие цветовые комбинации?

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

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

Используйте другой оттенок

Если вы посмотрите на эту иллюстрацию классического Game Boy, вы можете заметить, что при использовании фильтра Deuteranopia верхняя часть устройства выглядит так, как будто у него есть вырез, поскольку оттенок фона и экрана действительно похожи по насыщенности (57,83% для красного и 42,96% для зеленого).

example of bad color combination within an illustrationexample of bad color combination within an illustrationexample of bad color combination within an illustration

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

example of increasing the saturation with no resultexample of increasing the saturation with no resultexample of increasing the saturation with no result

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

adjusting an illustration using a different hue valueadjusting an illustration using a different hue valueadjusting an illustration using a different hue value

Цель для высокой контрастности

Мы исправили проблему с фоном, но, как вы можете видеть, некоторые участки консоли (такие как лицевая и боковая стороны) действительно трудно различить, так как они используют одинаковое значение оттенка (0%) и похожие уровни яркости. (92,94% для передней и 86,67% для боковой стороны). То же самое можно сказать и о кнопке d-pad, где в поперечном сечении используется уровень яркости 45,88%, в то время как в центральной точке используется аналогичное значение 40,78%.

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

adjusting a bad color combination using high contrastadjusting a bad color combination using high contrastadjusting a bad color combination using high contrast

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

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

Разделите ваши фигуры, используя контуры

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

adjusting bad color combinations using outlinesadjusting bad color combinations using outlinesadjusting bad color combinations using outlines

Добавить или удалить цвета

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

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

adjusting bad color combinations by adding colorsadjusting bad color combinations by adding colorsadjusting bad color combinations by adding colors

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

Придерживайтесь однотонной цветовой схемы

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

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

Согласно Википедии, монохроматическая цветовая схема получена из «единого базового оттенка и расширена с использованием его оттенков, тонов и оттенков».

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

adjusting bad color combinations using monochromatic schemesadjusting bad color combinations using monochromatic schemesadjusting bad color combinations using monochromatic schemes

Серая шкала

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

adjusting a bad color combination using a grayscale schemeadjusting a bad color combination using a grayscale schemeadjusting a bad color combination using a grayscale scheme

Добавить текстуру

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

adjusting a bad color combination using textureadjusting a bad color combination using textureadjusting a bad color combination using texture

Заключение

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

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

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

При этом, вы можете еще больше расширить свои знания о цвете, просмотрев эти удивительные статьи:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.