Дизайн для дальтоников

Иллюстрация к статье «Дизайн для дальтоников»

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

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

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

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

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

Тест-пример восприятия цвета дальтониками 1

Тест-пример восприятия цвета дальтониками 2

Тест-пример восприятия цвета дальтониками 3

Тест-пример восприятия цвета дальтониками 4

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

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

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

Для тех, кому интересно узнать о проблеме ещё, неплохая подборка статей о дальтонизме и веб-дизайне есть на сайте antula.ru (меню статей слева).

Немного рассуждений

Теперь давайте подробнее остановимся на том, должен ли бизнес-проект учитывать таких пользователей. За примером далеко ходить не нужно — возьмём «единственный» белорусский портал tut.by с посещаемостью около 400 000 человек в сутки.

8,5% от 400 000 — это 34 000 посетителей с изменённым цветовосприятием в сутки. Да, я взял проценты по максимуму, хотя на деле эта цифра может оказаться значительно меньше. Будем теоретиками-максималистами.

Простая задача — чтение новостей на портале. Например этой новости. Из пяти неконтрастных ссылок (это я уж сужу по себе), только три из них подчёркнуты. Следовательно, неподчёркнутые линки имеют шансы быть просто незамеченными 34 000 пользователей. Не всеми конечно, но пусть даже половиной из них — 17 000. Если бы это была контекстная реклама, можно было бы считать уже совсем не теоретические убытки.

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

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

* * *

Сканер блогов:

5 идей полезных WordPress плагинов. Может и у вас какая-нибудь идейка завалялась? 13 выпуск блог-шоу с полезными материалами по продвижению сайтов. 15 отличных альтернатив расширениям Firefox для решения регулярных SEO-задач.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 11

  1. AlexNote, 15.12.2008 в 15:55

    Различил первую ч\б, остальные кажутся без цифр.

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

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

    Ответить

  2. Алексей Качаев, 15.12.2008 в 16:43

    Скорее даже не к браузеру — а к Windows, который пытается создавать всякие удобные штуки для людей с отклонениями зрения.

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

    А в описанном случае можно найти выход.

    Ответить

  3. rotor, 15.12.2008 в 17:44

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

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

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

    А пример с tut.by — это пример пренебрежения дизайнером (редактором?) прописной истиной для веб: «ссылка в тексте всегда должна быть подчёркнутой». В примере, дальтоники могут испытать больше неудобства при чем люди с нормальным зрением.

    Ответить

  4. Светлана, 15.12.2008 в 20:25

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

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

    Но самое потрясающее, что я встречала, — это размещение на таком сайте предложений по услугам сделать на заказ фотомонтаж (фотошоп!) и не бесплатно. :)

    Ответить

  5. Skaizer, 15.12.2008 в 22:06

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

    Ответить

  6. Vetroff, 17.12.2008 в 0:11

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

    Ответить

  7. Octane, 17.12.2008 в 19:51

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

    Ответить

  8. олег, 18.12.2008 в 19:05

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

    Ответить

  9. Мессианство | Искариот, 19.12.2008 в 19:12

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

    Ответить

  10. Чеширский Кот, 13.01.2009 в 20:25

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

    Ответить

  11. serezha, 20.10.2009 в 16:04

    Привет от дальтоника)

    Различил из ЦВЕТНЫХ картинок только первую, угадывается что-то во второй.

    А на третьей и четвертой картинках правда что-то написано?

    Вот засада! Реально ведь, что-то мимо меня проходит (((

    Ответить

Есть что сказать?