Полезное

Теория цвета и веб-дизайн

IT-копирайтер, переводчик, контент-менеджер.

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

 

Однако многие дизайнеры, работая над подбором цветовых сочетаний, часто забывают о том, что не все люди воспринимают цвета одинаково. Существует небольшое количество людей, которые не различают какой-либо цвет, поэтому, работая над дизайном сайта, нужно помнить о пользователях-дальтониках. Ведь порой очень красиво оформленный сайт может просто не работать для этой категории пользователей, так как они не смогут на нем ориентироваться. И это действительно проблема: среди мужчин процент дальтоников может достигать 8%, а среди женщин – примерно 1%. Так что лучше не рисковать потерей 9% аудитории и подобрать цветовую гамму сайта так, чтобы он нормально воспринимался всеми людьми, в том числе и дальтониками.

 

ТЕОРИЯ ЦВЕТА МОЖЕТ УЛУЧШИТЬ ДОСТУПНОСТЬ САЙТА

 

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

 

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

 

  • Сайты с доступной всем цветовой гаммой могут выше ранжироваться поисковыми системами

 

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

 

  • Также важен этический момент: дальтоники не могут использовать некоторые сайты в полном объеме и для них это большая проблема. Поэтому всегда нужно помнить об UX

 

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

 

КАК СОЗДАТЬ САЙТ С ВЫСОКИМ ПОКАЗАТЕЛЕМ ДОСТУПНОСТИ

 

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

 

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

 

КАКИЕ ЦВЕТА НУЖНО ИСПОЛЬЗОВАТЬ?

 

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

Сочетание цветов 

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

 

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

 

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

 

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

 

КОМПЛИМЕНТАРНЫЕ ОТТЕНКИ

 

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

Цветовой круг 

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

 

МОНОХРОМНЫЕ ПАЛИТРЫ

 

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

Цветовая гаммаИНСТРУМЕНТЫ ДЛЯ ПОДБОРА ЦВЕТОВЫХ ПАЛИТР

 

VISCHECK

Цветовой симулятор

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

 

COLORS FOR THE COLOR BLIND

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

 

COLOR LABORATORY

Ресурс для проверки сайта
Еще один инструмент для онлайн-проверки сайтов на доступность для дальтоников. Можно проверить, как палитра, составленная из 216 цветов, воспринимается людьми с разными типами цветовой слепоты.

 

ВЫВОД

 

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

 

  • 15172