Цветовые схемы и палитры. Их значение и применение в веб-дизайне
Согласно COLOURLovers, первая цветовая палитра, существует уже более 300 лет, и была разработана Исааком Ньютоном. Хотя, другие цветовые диаграммы, существовали еще до того времени. Базовый дизайн развивался с течением времени, но концепция оставалась той же, практически любая комбинация цветов из палитры, будет сочетаться.
Основная цветовая палитра состоит из 12 цветов, которые могут быть объединены различными способами для создания разнообразных эффектов. Цвета могут дополнять друг друга, а также создавать хаос. Цвета делятся на категории теплых и прохладных. Теплые цвета, яркие и энергичные, припадают на колесе от красного до синего и до зеленого. Холодные цвета, которые варьируются от красного до оранжевого и желто-зеленого, считаются успокаивающими. Белый, черный и серый, являются нейтральными и берут на себя свойства окружающих цветов.
Расширенные цветовые схемы
Расширенные цветовые палитры построены на этом дизайне и добавляют равное количество вариантов цвета вокруг колеса.
Разновидности цвета
Принцип цветовой палитры, начинается с трех основных цветов – красного, желтого и синего. Цвета равноудалены на колесе. Основные цвета являются основой для всех других, любой цвет можно сделать с помощью комбинации основных.
Вторичные цвета создаются путем смешения двух основных цветов из цветового круга. Результатами будут оранжевый, зеленый и фиолетовый цвета.
Последняя группа оттенков, третичные цвета, созданы на основе смешивания первичного и вторичного цветов. У каждого цвет есть названия из двух слов, такие как: красно-оранжевый, сине-фиолетовые или сине-зеленый.
Цветовые схемы, как правило, создаются путем выбора и объединения двух, трех или четырёх цветов в палитре.
Каждая цветовая палитра может быть создана из чистого цвета, оттенка, тени или тона. Сочетайте оттенок с оттенком, тон и тоном, и так далее для лучшего цветового отображения.
Дополнительная цветовая схема
Дополнительная цветовая схема
Цвета с противоположных позиций на цветовом круге, считаются дополнительными. Красный и зеленый, желтый и фиолетовый, синий и желто-оранжевый цвета дополняют друг друга.
Использование дополнительных цветов, создает высокую контрастность в ваших проектах, особенно когда для каждого используется чистый оттенок. Дополнительная цветовая гамма, отлично подходит для небольшого цветового выделение элементов, но может быть трудной в использование. Избегайте использования дополнительных гамм для больших проектов, или в качестве основы для вашего веб-сайта, также избегайте текста в дополнительных цветах.
Несколько других типов дополнительных цветовых гамм, совмещают двухцветное сопряжение с дополнительными цветами для четырех-оттеночных палитр.
Аналоговая цветовая схема
Аналоговая цветовая схема
Аналоговая цветовая схема, использует соседние цвета из цветового колеса. В результате получаются визуально приятные и успокаивающие цвета. Один из цветов, в таких цветовых схемах, используется в качестве доминирующего цвета. Выберите второй цвет для поддержки доминирующего оттенка, и третий для использования в качестве акцента.
Триадные и тетрадные цветовые схемы
Триадная цветовая схема
Триадная цветовая схема, использует три цвета на одинаковом расстоянии друг от друга, на цветовом круге. Это схема, является одной из самых популярных среди дизайнеров. Триадные цветовые схемы, создают ощущение равенства и безопасности, из-за использования различных оттенков.
У триадных цветовых схем есть тенденция, быть довольно яркими. Балансируйте цвет, выбрав доминирующий оттенок и два других триадные цвета в качестве акцентов.
Тетрадная (прямоугольная) цветовая схема
Тетрадная (или прямоугольная) цветовая схема использует комбинацию из четырёх цветов и крайне похожа на триадную, так как очень живая, и содержит один доминирующий цвет. Расположение цветов происходит от двух наборов дополнительных цветов, то есть четыре тона не одинаково расположенных вокруг цветового круга. Прямоугольная схема может использовать комбинацию красного и зеленого с красно-оранжевым и сине-зеленым. Следите за тем, как теплые и холодные цвета используются в этой схеме для создания желаемого эффекта.
Во многом, как триадная схема, тетрадная цветовая схема использует четыре цвета, но цвета распределены равномерно по цветовому кругу. Опять же, один оттенок должен быть доминирующим, а другие три акцентными.
Другие цветовые схемы
В дополнение к основным цветовым схемам, существует еще несколько других, которые широко используются.
Монохроматическая цветовая схема
Одной из самых популярных и современных цветовых схем, является монохроматическая гамма. Каждый цвет, используемый в палитре, является оттенком, тоном или тенью одного цвета.
Нейтральная цветовая схема
Нейтральная цветовая гамма, использовать только оттенки коричневого и бежевого цвета. Вы можете «нейтрализовать» любой цвет, смешав его, с его дополнением.
Ахроматическая цветовая схема
Ахроматические схемы, созданы с помощью оттенков черного, белого и серого.
Цвета могут быть сложными
Хотя, все может и показаться довольно простым, но цвет это больше, чем просто комбинирование цветов из различных цветовых схем. Цвет может задать настроение или диктовать личность вашего сайта. Подумайте о том, как вы используете каждый цвет, в качестве фона, акцента, для текста, и только затем играйте с различными схемами. Не забывайте о том, как полутонами и оттенками можно добиться разных “эффектов” в нужных местах.
Высоких конверсий!
16-03-2016
Восемь правил о цветовых палитрах, которые должен знать каждый
Взаимодействие человека и компьютера в значительной степени основано на графических элементах пользовательского интерфейса, и цвет играет в этом важную роль. Как однажды сказал художник Пьер Боннар:
Цвет не добавляет приятного качества в дизайн – он его усиливает.
При разработке нового продукта часто бывает сложно определить цветовую схему из-за бесконечного количества возможных комбинаций цветов. В этой статье мы рассмотрим восемь основных правил, которые помогут вам выбрать правильную цветовую палитру.
Применение цвета к дизайн проекту имеет много общего с балансом. Чем больше цветов вы используете, тем труднее достичь этого баланса. Вы добьетесь лучших результатов, если будете придерживаться максимум трех основных цветов в вашей цветовой гамме. Согласно исследованию Университета Торонто о том, как люди использовали Adobe Color CC, большинство людей заявили, что предпочитают простые цветовые комбинации, которые опираются только на два или три цвета.
Если вам нужны дополнительные цвета, кроме тех, которые вы задали в своей палитре, используйте оттенки и тона.
Как создать цветовую схемуИтак, как вы выберете два или три цвета? Цветовой круг может помочь.
Круг с 12 цветами является важным инструментом для создания цветовых схем
Существует ряд предопределенных стандартов цветовой схемы, которые упрощают создание новых схем, особенно для новичков:
- Монохроматическая. Монохроматические схемы являются простейшими для создания, поскольку все они взяты из одного цвета, но включают изменения в насыщенности, оттенках и тонах. Монохроматические цвета хорошо сочетаются, создавая успокаивающий эффект.
Монохроматическая схема очень приятна на вид (особенно синий или зеленый оттенки). Как вы можете видеть на примере Facebook, схема выглядит чистой и элегантной.
- Аналоговая. Аналоговые цветовые схемы создаются из смежных цветов.
Один цвет используется как доминирующий, в то время как другие используются для обогащения схемы. Хотя это относительно легко, трюк заключается в том, чтобы решить резонанс используемых цветов, поскольку вся схема будет преувеличена им. Например, Clear – приложение для составления и организации списков дел, использует яркие аналоговые цвета для визуального определения приоритетов вашего текущего набора задач. В то время как, приложение для медитации Calm, использует синие и зеленые аналоговые цвета, чтобы помочь пользователям чувствовать себя спокойными и умиротворенными.
Аналоговые схемы создаются с использованием трех цветов, расположенных рядом друг с другом на 12-цветном круге. Clear – приложение для составления и организации списков дел, использует яркие аналоговые цвета для визуального определения приоритетов вашего текущего набора задач.
Calm использует аналоговые цвета, чтобы создать общее настроение.
- Дополнительная. В своей основе такой схемы лежат только два цвета, которые сильно контрастируют.
Эта схема используется для привлечения внимания пользователя. При использовании дополнительной схемы важно выбрать доминирующий цвет, а дополнительный цвет использовать для акцентов. Например, когда человеческий глаз видит объект, полный различных оттенков зелени, немного красного цвета очень хорошо выделяется.
Использование дополнительных цветов – простейший способ выделить что-то.
- Пользовательская. Создание пользовательской цветовой схемы не так сложно, как многие думают. Существует простой трюк, который можно использовать для создания великолепной цветовой палитры: просто добавьте яркий цвет для акцента в нейтральную палитру (например, традиционную монохроматическую схему). Полученная схема будет очень визуально яркой.
Добавление одного цвета в дизайн в оттенках серого просто и эффективно привлекает внимание. Макет с сочетанием белого и серого с синими акцентами в цветовой схеме Dropbox.
2. Вдохновляйтесь природойЛучшие цветовые комбинации можно встретить в природе.
Почему? Потому что эти схемы кажутся естественными для глаз. Чтобы найти вдохновение, нам нужно всего лишь осмотреться вокруг. Если вы видите особенно красивый или яркий цвет в повседневной жизни, попробуйте создать схему вокруг него. Просто сделайте снимок красивого момента и создайте на его основе свою цветовую схему.
Лучшие цветовые комбинации встречаются в природе. Вы можете создать цветовую схему из фото.
3. Пытайтесь следовать правилу 60–30–10Это вечное правило декорирования, которое может помочь вам легко составить цветовую схему. Пропорции 60% + 30% + 10% предназначены для обеспечения баланса цветов, используемых в любом пространстве.
Эта концепция невероятно проста в использовании: 60% – ваш доминирующий оттенок, 30% – вторичный цвет, а 10% – цвет акцента. Идея состоит в том, что вторичный цвет поддерживает основной цвет, но они достаточно отличаются, чтобы разделять их. Ваши 10% – цвет акцента. Это может быть цвет для призыва к действию или другого элемента, который вы хотите выделить.
60% – ваш доминирующий оттенок, 30% – вторичный цвет и 10% – цвет для акцента. Этот метод позволяет глазу удобно перемещаться из одной фокусной точки в другую.
4. Сначала дизайн в оттенках серогоИгра с цветом – это весело. Именно поэтому выбор цветовой схемы – одна из первых вещей, которые мы делаем в новых проектах. Это, действительно, заманчиво сперва подобрать цветовую схему, но я рекомендую вместо этого заставить себя сначала проектировать в оттенках серого. Создайте прототип своего приложения в градациях серого и используйте его в качестве основы. Проектирование в оттенках серого перед добавлением цвета заставляет вас сосредоточиться на расположении элементов.
Добавьте цвет в самом конце, и даже тогда, только с определенной целью.
Добавление одного цвета в макет с оттенками серого привлекает взгляд просто и эффективно.
5. Избегайте использования черного цветаВ реальной жизни чистый черный почти никогда не встречается.
Все “черные” объекты вокруг нас имеют некоторое количество света, отражающегося от них, а это значит, что они не совсем черные, они темно-серые. Дороги не черные. Тени не черные.
Цвет этой собаки темно-серый, а не черный.
Когда вы помещаете чистый черный цвет рядом с набором тщательно подобранных цветов, черный все пересилит. Он выделяется, потому что это не естественно. В большинстве приложений, которые мы ежедневно используем, есть черные цвета, которые на самом деле не черные, но темные серые. Например, самый темный цвет на верхней панели Asos не # 000000, это # 242424. Поэтому не забудьте всегда добавить немного насыщенности в свой цвет.
Самый темный цвет у ASOS – не черный
6. Подчеркните важность, используя цветовой контрастЦвет – инструмент, который может помочь направить взгляд. Чем больше вы хотите что-то выделить, тем больше вы должны полагаться на контрастные цвета. Как правило, высокий контраст – лучший выбор для важного контента или ключевых элементов.
Если вы хотите, чтобы пользователи увидели или щелкнули что-нибудь, сделайте это выделяющимся!
Контрастность заставляет выделенную область отличаться от остальной части экрана. Чем больше вы хотите что-то выделить, тем больше вы должны полагаться на контрастные цвета.
7. Используйте цвет для воздействия на эмоции пользователейИзвестно, что цвета имеют присущие им значения и могут вызывать эмоции. Эти значения будут иметь прямое влияние на то, как ваши пользователи воспринимают ваш продукт.
Когда вы выбираете цветовую палитру для своего приложения / сайта, вы не можете просто думать о том, как все выглядит – вы должны думать о том, как все ощущается. Цвета, которые вы выбираете, могут работать за или против идентичности бренда, которую вы пытаетесь создать. Для начала, я составил краткое справочное руководство, которое охватывает основные ассоциации с каждым цветом (в западном мире).
Красный, Оранжевый, Желтый- Красный (Страстный, Мощный, Опасный, Важный): Красный – чрезвычайно стимулирующий цвет.
Он создает впечатление скорости и силы. Он известен как цвет энергии. Он доказал физиологические эффекты увеличения циркуляции крови и повышения метаболизма. Вот почему, когда люди видят красный цвет, они читают усерднее и быстрее. Использование красного – это способ привлечь внимание пользователей или выделить отдельный элемент, который требует внимания. - Оранжевый (игривый, энергичный, привлекательный, дешевый): Оранжевый – теплый и полный жизни цвет. Он обладает энергичной аурой и способен создать теплый прием для ваших пользователей. Некоторые исследователи считают, что оранжевый выражает дешевизну.
- Желтый (веселый, дружелюбный, стимулирующий, привлекающий внимание): Желтый – чрезвычайно универсальный цвет, в зависимости от выбранного оттенка. Светло-желтый ассоциируется с солнцем и, следовательно, передает позитивность и теплоту. Темные оттенки желтого (например, золото) создают впечатление древности и возраста. Эти более темные оттенки часто связаны с вечностью и мудростью.
- Зеленый (природный, безопасный, свежий): зеленый цвет отражает чувство окружающей среды и близость к природе. Он также означает рост, и именно поэтому он часто связан с бизнесом. Зеленый означает чувство правильного или неправильного.
- Синий (успокаивающий, ответственный, внушающий доверие, надежный): синий цвет часто ассоциируется со спокойными и расслабляющими эмоциями. Он также ассоциируется с силой и надежностью, с чувством доверия и профессионализма. Синий излучает чувство внутренней безопасности. Вот почему вы можете видеть банки и технологические компании, использующие этот цвет. Гиганты социальных сетей, такие как Facebook, Twitter и LinkedIn, используют синий цвет в своих сетях.
- Фиолетовый (Роскошный, Таинственный, Романтичный, Духовность): Исторически связанный с королевской семьей, фиолетовый намекает, что продукт высокого класса.
- Розовый (женственный, невинность, молодость): розовый наиболее известен своими ассоциациями с женственностью.
- Черный (мощный, утонченный, загадочный, трендовый): черный привлекает внимание быстрее, чем другие цвета, в том числе красный. Вот почему он чаще всего используется только для текста и акцентов.
- Белый (чистота, здоровье, чистоплотность, невинность): белый делает акцент на других цветах вокруг него, что делает его популярным выбором в качестве вторичного цвета.
- Серый (нейтральный, формальный, изысканный, стерильный): серый цвет представляет собой нейтральность, он может принимать характеристики черного или белого цветов. При использовании его в качестве основного цвета создается впечатление формальности.
Важно отметить, что значение цветов может варьироваться в зависимости от культуры и обстоятельств.
Подробнее об этом см. статью Символизм цветов и цветовых значений во всем мире.
Доступность – ключевой момент при проектировании с цветом. Сегодняшние продукты должны быть доступны для всех – независимо от способностей человека.
Избегайте использования цвета в качестве индикатораПримерно 8% мужчин и 0,5% женщин страдают от некоторой формы цветовой слепоты. Это 1 из 12 мужчин и 1 из 200 женщин. Хотя существует несколько форм этого заболевания, красно-зеленая цветовая слепота является наиболее распространенной. Человек, страдающий этой формой дальтонизма, обычно испытывает проблемы с различиями как красного, так и зеленого цветов.
Как видит цвета человек с нормальным зрением и те же цвета человек с красно-зеленой цветовой слепотой (дейтеронопия и протанопия).
Поскольку цветовая слепота принимает различные формы (в том числе красно-зеленую, сине-желтую и монохроматическую), важно использовать несколько визуальных сигналов для передачи важных состояний в вашем продукте.
В дополнение к цвету используйте элементы, такие как штрихи, индикаторы, шаблоны, текстуры или текст для описания действий и контента.
Избегайте использования только красных и зеленых цветов для передачи информации, потому что это может быть чрезвычайно неприятным для людей, которые не могут видеть красные символы.
Избегайте низкой контрастности текстаЦветовая контрастность – это одна из областей, где теория цвета имеет решающее значение для удобства использования дизайна. Когда вы используете цвета в тексте, имейте в виду, что размещение двух цветов с низким значением контраста рядом друг с другом может сделать ваш текст очень трудным для чтения.
Низкоконтрастный текст – это то, что может потенциально нарушить удобство использования многих приложений.
Проверьте контраст, чтобы цвета фона и переднего плана отображались с достаточным контрастом для человека, страдающего дальтонизмом или плохо видящего человека. Это, действительно, не так сложно – все, что вам нужно сделать, это проверить коэффициент контрастности.
Коэффициент контрастности показывает, как отличается цвет от другого цвета (обычно это 1: 1 или 21: 1). Чем выше разница между двумя числами в соотношении, тем больше разница в относительной яркости между цветами. W3C рекомендует следующие коэффициенты контрастности для текста и текста на изображении:
- Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
- Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.
Хорошие новости, вам не нужно проверять их вручную. Используя инструмент Color Contrast Checker, вы можете проверить свои цветовые комбинации всего за несколько кликов.
Программа проверки цветового контраста от Webaim
Бонус: Основные инструменты UX дизайнераЧтобы упростить вам задачу, я также составил список лучших инструментов для выбора цветовых палитр.
Adobe Color CC (ранее известный как Kuler) – отличный инструмент для поиска, изменения и создания цветовых схем. Каждый цвет в палитре может быть индивидуально изменен или выбран в качестве базового цвета всего за несколько кликов. Палитры могут быть сохранены и добавлены в библиотеку, и существует множество отличных цветовых схем, созданных сообществом и доступных на сайте:
Adobe Color CC – отличный инструмент, способный ускорить изучение различных вариантов цветовой схемы.
Dribbble поиск по цветуКогда вы хотите совершить визуальные исследования по использованию определенного цвета другими дизайнерами, зайдите на dribbble.com/colors и выберите нужный цвет.
Вы также можете указать для снимка минимальный процент содержания цвета (например, 30% синего).
Укажите минимальный процент содержимого цвета
Material DesignРуководство Material design предоставляет фантастическую цветовую палитру, которая может использоваться для иллюстрации или для разработки цветов вашего бренда.
Все цвета в этой палитре предназначены для гармоничного взаимодействия друг с другом.
ColorZilla – это расширение для Google Chrome и Mozilla Firefox, которое включает в себя множество связанных с цветом инструментов, в том числе подборщик цветов, пипетку, генератор градиента CSS и браузер палитры.
Coolors.coCoolors – мощный инструмент для создания многоцветных схем. Вы можете просто заблокировать выбранный цвет и нажать пробел, чтобы создать новую палитру. Этот инструмент замечателен тем, что вы не ограничены только одним результатом – можно получить несколько цветовых схем, просто изменив базовую точку.
Один из моих любимых способов создания цветовой схемы – это использование фотографии. Этот инструмент позволяет загрузить изображение и сделать из него цветовую палитру.
Coolors дает вам возможность загрузить изображение и сделать из него цветовую палитру.
С помощью Photoshop вы можете проверить доступность вашего дизайна. Просто перейдите в View> Proof Setup, а затем вы можете выбрать один из двух типов цветовой слепоты (протанопия или дейтронопия).
NoCoffee Vision Simulator для ChromeВо избежание проблем с доступностью в дизайне, при проектировании рекомендуется проверять дизайн на цветовую слепоту. NoCoffee Vision Simulator может использоваться для имитации проблем со зрением. Например, используя параметр “Color Deficiency” установив “Deuteranopia”, вы можете просматривать веб-страницы в оттенках серого. Это поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.
Цвет – один из самых мощных инструментов в наборе дизайнеров. Но в то же время — это сложный в освоении инструмент.
Я надеюсь, что упомянутые выше правила создали хорошую основу для будущих дизайнеров. Теперь пришло время перейти к практике – потому что лучший способ стать отличным специалистом в цветовых схемах – это фактически создать их.
Цветовые схемы – ваша проблема? Записывайтесь на курсы от Springboard Введение в UX дизайн. Тысячи студентов прошли их, чтобы начать успешную карьеру в дизайне.
Перевод статьи Nick Babich
цветовых палитр | Benjamin Moore
Откройте для себя ряд цветовых палитр, разработанных нашими экспертами по цвету и дизайну.
Образец Наши самые продаваемые цвета краски
Закажите образцы краски Benjamin Moore, упорядоченные по самым продаваемым оттенкам в каждой цветовой группе.
Посмотреть самые продаваемые цвета
Семейства цветов
Ознакомьтесь с нашими самыми популярными цветами красок из каждого цветового семейства, получите советы по дизайну и многое другое.
См. Семейства цветов
Самые популярные цвета
Взгляните на самые популярные и знаковые цвета краски Бенджамина Мура.
Посмотреть самые популярные цвета
Заинтересованы в покупке фан-деки?
Изучите наш выбор веерных колод в интернет-магазине.
Купить сейчас
Сезонные цветовые палитры
Получите полезные цветовые сочетания и советы, вдохновленные временами года.
Посмотреть сезонные палитры
Цвет по направлению
Ознакомьтесь с рекомендациями по цвету краски, основанными на естественном освещении вашего помещения.
Узнать больше
Цветовые палитры в зависимости от стиля дизайна
Ознакомьтесь с цветами краски, которые используются в различных стилях и тенденциях.
См.
Стили
Цвета краски по знаку зодиака
Что ваше место на небе говорит о вашей личной цветовой палитре?
Откройте для себя свои оттенки
Цвет по регионам
Используйте наши цветовые палитры и дизайнерские идеи для регионов США, составленные экспертами, чтобы информировать и вдохновлять ваш следующий проект.
Региональные цветовые палитры
Исследуйте цветовые палитры юго-запада, юго-востока, тихоокеанского северо-запада и регионов Скалистых гор США.
См. региональные палитры
Цвет года
В зависимости от культурных влияний во всем мире, Цвет года и соответствующая ему палитра Color Trends выбираются из нашей существующей библиотеки из более чем 3500 оттенков.
Цвет года и цветовые тренды 2023
Откройте для себя цвет года и палитру Color Trends 2023, разработанную нашими экспертами по цвету и дизайну.
Исследовать
Коллекции цветов
Ознакомьтесь с цветами Affinity®, Historical, ARBORCOAT® Exterior Stain и другими.
Benjamin Moore Classics®
Устаревшие цвета, выдержавшие испытание временем.
Посмотреть цвета
Color Preview®
Выразительные цвета во всем спектре.
Посмотреть цвета
Коллекция Affinity®
Избавьтесь от догадок: Affinity предлагает 144 цвета, которые можно смешивать и сочетать друг с другом, создавая гармоничный цветовой переход от комнаты к комнате.
Читать далее
Историческая коллекция
Историческая коллекция предлагает 191 оттенок, вдохновленный американской архитектурой 18 и 19 веков.
Читать далее
Aura® Color Stories®
Aura® Color Stories® 240 цветов демонстрируют усиленную реакцию на различные условия освещения; доступен только в интерьерных красках Aura.
Читать далее
Дизайнерская классика
Продуманное сочетание удобных и изысканных цветов.
Посмотреть цвета
Коллекция цветов для красок Williamsburg®
Сочетание тенденций и традиций в коллекции цветов для красок Williamsburg®.
Читать далее
Краски ARBORCOAT® Exterior Stain Colors
Выберите из ряда цветов, которые раскрывают естественную текстуру древесины в той или иной степени, насколько вы хотите.
См. Цвета пятен
Цвета для винила
Специально подобранная палитра из 75 цветов для винилового сайдинга и отделки для использования с некоторыми линиями окраски фасадов Benjamin Moore.
См. Цвета для винила
Поиск по адресу, городу, штату, почтовому индексу, стране
Генератордоступных цветовых палитр | WCAG-совместимый
Раскройте тайну доступности с помощью простого генератора цветовой палитры, который сделает всю тяжелую работу за вас.
Выбери свое приключение! Создайте доступную цветовую палитру одним из двух способов:
Узнайте, как теория цвета и контраста способствуют созданию инклюзивных коммуникаций.
Доступная цветовая палитра гарантирует, что читатели с нарушениями зрения и инвалидностью смогут увидеть и понять ваш дизайн. Контраст является ключом к достижению этой цели. Элементы с низкой контрастностью плохо видны даже тем, у кого нет нарушений зрения.
Другими словами, проектирование с учетом доступности приносит пользу всей вашей аудитории.
СОЗДАНИЕ ДОСТУПНЫХ ПАЛИТ
Что такое контраст?
Контраст — это яркость или яркость цвета или элемента по сравнению с другим элементом. Например, черный текст на белом фоне имеет высокую контрастность. С другой стороны, желтый текст на белом фоне имеет низкий контраст.
WCAG 2.1 указывает, что коэффициент контрастности основного текста должен быть не менее 4,5:1.
СОЗДАТЬ ДОСТУПНЫЕ ПАЛИТРЫ
Не оставляйте без внимания ни одного зрителя, сознательно комбинируя дополнительные цвета.
Если ваши дизайны неразборчивы, вам будет трудно связаться со своей аудиторией. Что еще хуже, если ваши проекты недоступны, вы можете даже оттолкнуть свою аудиторию — как людей с нарушениями зрения, так и тех, кто осознает доступные потребности.
Проще говоря, использование доступной цветовой палитры — это правильное решение для всех.
2,2 миллиарда человек
Не менее 2,2 миллиарда человек во всем мире имеют нарушения зрения (ВОЗ)
1 из 12 мужчин
Примерно 1 из 12 мужчин и 1 из 200 женщин имеют дефицит цветового зрения (NCBI)
Красно-зеленый цвет слепота
У большинства людей с дальтонизмом возникают проблемы с восприятием красного и зеленого цветов (CBA).
Создавайте доступные дизайны с помощью симулятора дальтоников.
СОЗДАТЬ ДОСТУПНЫЕ ПАЛИТРЫ
Разрушьте визуальные барьеры, сделав доступный дизайн первой мыслью, а не запоздалой.
В типичном процессе проектирования человек может выбрать цветовую палитру, собрать изображение, а затем проверить его на доступность. Переворачивая это, вы можете сэкономить дополнительное время и усилия. Начните с рассмотрения доступных высококонтрастных цветовых комбинаций.
Выберите темный цвет для текста и светлый цвет для фона или наоборот.
Избегайте определенных сочетаний цветов, в том числе:
- Красный и зеленый — примерно 5% людей не различают эти цвета.
- Красный и черный — для тех, кто не различает красный, легко спутать эти два цвета.
- Синий и желтый — встречается реже, но у некоторых людей наблюдается слепота на синий/желтый цвета.
СОЗДАНИЕ ДОСТУПНЫХ ПАЛИТ
Начните сегодня, создав доступные варианты цветовой палитры всего за несколько кликов.
Давно пора сделать доступным весь дизайн. Но когда вы не дизайнер и не разбираетесь в тонкостях цвета, это легче сказать, чем сделать. Если вы изо всех сил пытались понять доступные рекомендации по цвету или боролись с замысловатым инструментом генератора цвета, вы попали в нужное место.
Создавайте доступные цветовые палитры за считанные секунды — докторская степень не требуется.
СОЗДАТЬ ДОСТУПНЫЕ ПАЛИТРЫ
Нашли перспективную палитру?
Попробуйте свои цвета с Infographic Maker от Venngage. Выбирайте из тысяч профессионально разработанных шаблонов и экспериментируйте с доступными палитрами, пока результаты вас не порадуют.
СОЗДАТЬ ИНФОГРАФИКУ
Есть несколько факторов, которые следует учитывать при выборе доступных цветов. В первую очередь учитывайте контраст.
Вы должны выбрать цвета, которые обеспечивают максимальный контраст. Лучший пример этого — черный текст на белом фоне.
Как правило, вам нужно сочетать темный текст со светлым фоном или светлый текст с темным фоном. WCAG 2.1 требует, чтобы «визуальное представление текста и изображений текста [имело] коэффициент контрастности не менее 4,5: 1».
Вы также должны иметь в виду, что около 5% людей во всем мире имеют дефицит цветового зрения (дальтонизм). Наиболее распространенная форма дефицита цветового зрения — красный/зеленый, но может встречаться и синий/желтый. Вы по-прежнему можете комбинировать эти цвета в палитре, но вам следует стараться избегать их наложения.
Чтобы определить, доступен ли цвет, вы можете сравнить его коэффициент контрастности с цветами, с которыми вы его сочетаете. Есть несколько бесплатных онлайн-инструментов, которые могут помочь вам в этом.
В качестве альтернативы, если вы хотите быть уверены, что выбранные вами цвета будут доступны, попробуйте воспользоваться нашим
генератор цветовой палитры.
Это может варьироваться в зависимости от типа нарушения зрения. Но в целом яркие цвета воспринимаются легче, чем пастельные. Например, яркий красный цвет может быть легче увидеть, чем светло-розовый. Однако помните: красный цвет может выделяться, но если вы соедините его с зеленым, человек с дальтонизмом все еще может с трудом понять ваш дизайн.
Таким образом, вместо того, чтобы говорить, что «тот или иной» цвет хорош для слабовидящих, лучше использовать целостный подход и подумать о том, как сочетаются цвета в палитре — как с точки зрения контраста, так и с точки зрения дальтонизма.
Создание доступной цветовой палитры начинается с сочувствия к вашей аудитории.
Убедитесь, что вы хорошо разбираетесь в различных типах нарушений зрения и в том, как цвета влияют на удобочитаемость вашего контента для людей с этими нарушениями.
Прежде чем приступить к построению своей палитры, также стоит ознакомиться с WCAG 2.1. В частности, в разделе о контрасте излагаются правила для допустимых соотношений. Ваш текст должен иметь коэффициент контрастности не менее 4,5: 1.
Отсюда вы можете начать с выбора светлого и темного цвета для своей палитры. Если вы не знаете, с чего начать и соответствует ли ваш выбор правильному коэффициенту контрастности, вы можете использовать генератор доступной цветовой палитры чтобы придумать несколько инклюзивных вариантов для вас.
Палитра для дальтоников
учитывает, как люди с этим нарушением зрения воспринимают цветовые сочетания.
Вопреки тому, что подразумевает этот термин, большинство людей с дальтонизмом могут видеть цвета — просто их восприятие отличается от восприятия людей без дальтонизма.
Существует несколько типов дальтонизма. Красный/зеленый – самый распространенный. Также бывает синий/желтый и полная цветовая слепота (хотя последние два встречаются довольно редко). Но использование палитры, подходящей для дальтоников, не означает, что вам нужно убрать все цвета из вашего дизайна.
Это просто означает осознавать, как сочетание определенных цветов может повлиять на способность вашей аудитории различать их. Например, сине-оранжевая палитра является распространенным выбором для дальтоников. С другой стороны, сине-желтая палитра может сбить с толку человека с дальтонизмом.
Следует различать палитру, подходящую для дальтоников, и доступную цветовую палитру. Палитра для дальтоников может просто относиться к выбору цвета, учитывающему это условие.
Например, выбрав синий и оранжевый цвета вместо синего и желтого.
Но доступная цветовая палитра учитывает весь спектр нарушений зрения. Таким образом, помимо размышлений о том, как человек с цветовой слепотой увидит определенные комбинации, доступная палитра также учитывает, как человек с нечетким зрением, глаукомой или катарактой будет воспринимать цвета.
Доступная цветовая палитра будет соответствовать всем рекомендациям WCAG 2.1, включая требования к коэффициенту контрастности. Чтобы увидеть, как выглядит этот тип палитры, попробуйте наш доступный инструмент для генерации цвета здесь.
Дизайн с доступными цветами важен, потому что он гарантирует, что люди с нарушениями зрения смогут понять ваш контент. Он устраняет барьеры и предоставляет всем равные возможности — независимо от обстоятельств — заниматься вашим дизайном.
