О теории цвета и ее значении написано множество статей. Цвет в дизайне играет важнейшую роль и даже может порой влиять на поведение людей. Любой веб-дизайнер знает, что правильно подобранная цветовая гамма сайта может повлиять на его популярность, так как веб-страницы, оформленные в соответствии с теорией цвета, производят хорошее впечатление на пользователей.
Однако многие дизайнеры, работая над подбором цветовых сочетаний, часто забывают о том, что не все люди воспринимают цвета одинаково. Существует небольшое количество людей, которые не различают какой-либо цвет, поэтому, работая над дизайном сайта, нужно помнить о пользователях-дальтониках. Ведь порой очень красиво оформленный сайт может просто не работать для этой категории пользователей, так как они не смогут на нем ориентироваться. И это действительно проблема: среди мужчин процент дальтоников может достигать 8%, а среди женщин – примерно 1%. Так что лучше не рисковать потерей 9% аудитории и подобрать цветовую гамму сайта так, чтобы он нормально воспринимался всеми людьми, в том числе и дальтониками.
ТЕОРИЯ ЦВЕТА МОЖЕТ УЛУЧШИТЬ ДОСТУПНОСТЬ САЙТА
Доступность сайта имеет большое значение, так как напрямую влияет на его популярность. Когда речь заходит про доступность, обычно подразумевается простой и понятный интерфейс. Но и цветовая гамма тоже влияет на опыт пользователя. И если создать дизайн, который не учитывает потребности людей с различными нарушениями зрения, то этот опыт будет негативным, что недопустимо. Есть множество причин, по которым стоит тщательно поработать над цветовой доступностью сайта:
- Правильная цветовая гамма может стать конкурентным преимуществом. Если дизайн сайта является дружественным по отношению к дальтоникам, а сайт конкурента нет, то можно привлечь на свою сторону дополнительную аудиторию
- Сайты с доступной всем цветовой гаммой могут выше ранжироваться поисковыми системами
- В некоторых странах неудачный дизайн сайта может стать причиной судебного иска, так как такой сайт не обеспечивает равных возможностей для людей с нарушениями зрения
- Также важен этический момент: дальтоники не могут использовать некоторые сайты в полном объеме и для них это большая проблема. Поэтому всегда нужно помнить об UX
Несмотря на все вышесказанное, сделать сайт доступным для людей, не различающих некоторые цвета, не так уж и сложно. Нужно лишь грамотно использовать теорию цвета и не забывать о контрастности важных элементов.
КАК СОЗДАТЬ САЙТ С ВЫСОКИМ ПОКАЗАТЕЛЕМ ДОСТУПНОСТИ
Конечно, создать сайт, который будет удобным абсолютно для всех категорий пользователей – невыполнимая задача. И в первую очередь потому, что трудно определить, как именно дальтоники видят тот или иной цвет. Но это еще не все: люди, дальтониками не являющиеся, также видят цвета немного по-разному. Было проведено множество исследований, целью которых было выяснить, как именно различаются цвета людьми с разными типами дальтонизма. Но каких-то точных результатов эти исследования не дали, так что вопрос, как именно видит дальтоник, все еще является открытым.
Начиная работу над дизайном сайта, нужно сразу же позаботиться о цветовой различимости элементов навигации и контента. Есть много способов это сделать и самый первый – использовать контрастные цвета для фона и важных элементов дизайна. К примеру, использование черного текста на белом фоне позволит сделать контент доступным для всех пользователей. Но черный и белый – это далеко не все «безопасные» цвета – их гораздо больше. Просто нужно сделать так, чтобы ссылки, кнопки и другие элементы дизайна были заметными и выделялись на фоне.
КАКИЕ ЦВЕТА НУЖНО ИСПОЛЬЗОВАТЬ?
Самый первый шаг в создании доступного для дальтоников сайта – это выбор цветовой палитры. Задача дизайнера в этом случае заключается в подборе удачных цветовых комбинаций, которые будут включать в себя контрастные оттенки и обеспечивать цветовую иерархию.
При этом нужно быть осторожным и стараться не использовать некоторые оттенки. Большинство дальтоников плохо различают сочетания красный/зеленый и желтый/синий. Вот еще несколько опасных цветовых комбинаций:
- коричневый/зеленый
- зеленый/синий
- фиолетовый/синий
- серый/синий
- зеленый/серый
- черный/зеленый
- желтый/светло зеленый
Как можно заметить, эти цветовые сочетания являются не слишком контрастными и поэтому могут стать неразличимыми для людей с нарушениями зрения. Поэтому лучше не использовать в дизайне оттенки, которые стоят слишком близко друг от друга в цветовом круге. Например, тусклый желтый и голубой, которые различаются очень плохо.
Нужно всегда помнить, что люди с цветовой слепотой должны всегда хорошо различать цвета, причем неважно, какие цвета они видят – требуется лишь сделать так, чтобы для дальтоника было ясно, что он видит разные цвета. Также нужно обратить внимание на то, что дальтоники лучше воспринимают яркие цвета и почти не видят разницы между тусклыми оттенками.
КОМПЛИМЕНТАРНЫЕ ОТТЕНКИ
Комплиментарные оттенки, которые противоположны друг другу в цветовом круге, обеспечивают лучший контраст и повышают доступность дизайна. Следует отметить, что несмотря на то, что зеленый и красный являются комплиментарными оттенками, использовать это сочетание нужно очень осторожно, так как именно эти цвета дальтоники различают плохо.
Как известно, некоторые оттенки являются теплыми, а некоторые – холодными. Это также можно использовать, подбирая цветовую гамму. Противопоставляя теплые цвета холодным, можно создавать привлекательный и в то же время доступный дизайн. Однако при подборе цветов не стоит забывать о контрасте: к примеру, можно использовать темный прохладный оттенок в сочетании с более светлым теплым цветом.
МОНОХРОМНЫЕ ПАЛИТРЫ
Работая над доступной цветовой гаммой, нужно все время следить, чтобы рядом не использовались элементы из неудачных цветовых пар. А чтобы создать наверняка дружественную по отношению к дальтоникам страницу, лучше всего использовать монохромную палитру. Неважно, как пользователь будет воспринимать цвет – он будет ориентироваться лишь на контраст. К тому же, монохром сегодня в моде, такие палитры сегодня очень часто используют на сайтах с минималистским дизайном.
ИНСТРУМЕНТЫ ДЛЯ ПОДБОРА ЦВЕТОВЫХ ПАЛИТР
VISCHECK
Vischeck – это симулятор, с помощью которого можно протестировать веб-страницы на доступность для дальтоников. С помощью этого инструмента можно узнать, как люди с разными типами цветовой слепоты видят конкретный сайт и, если потребуется, быстро внести изменения в дизайн.
COLORS FOR THE COLOR BLIND
Большой и очень полезный ресурс, который содержит много важной информации о природе цветовой слепоты, ее видах и особенностях. Также на сайте есть тесты для пользователей-дальтоников и инструменты для цветовой проверки сайта.
COLOR LABORATORY
Еще один инструмент для онлайн-проверки сайтов на доступность для дальтоников. Можно проверить, как палитра, составленная из 216 цветов, воспринимается людьми с разными типами цветовой слепоты.
ВЫВОД
Конечно, доступность сайта зависит не только от его цветовой гаммы. Да, сайт должен быть доступным для людей с нарушениями зрения, но самое главное, чтобы он был доступным для как можно большего числа пользователей. Но про цвет нужно помнить всегда и постоянно проверять, чтобы цветовая палитра не содержала проблемных цветовых сочетаний.
0 комментариев