0,0
рейтинг
13 января в 10:59

Дизайн → Как проектировать для людей с цветовой слепотой перевод



Примерно 8-10% мужчин и 0.5% женщин имеют ту или иную форму дальтонизма. То есть, на каждые 100 посетителей вашего сайта будет 10 таких, которые видят цвета иначе. И как убедиться, что ваш интерфейс одинаково доступен для любых пользователей? Есть много противоречивой информации на тему того, каким должен быть дизайн для дальтоников. Мы сделали выжимку с основными принципами, которые стоит учитывать в дизайне, чтобы добиться цветовой различимости интерфейса.

Что такое цветовая слепота?


Цветовая слепота — это неспособность различать некоторые оттенки спектра, и ей подвержены скорее мужчины, чем женщины, так как это нарушение возникает в результате мутации Х-хромосомы. Есть 3 основных типа цветовой слепоты: дейтеранопия (зелёный), протанопия (красный) и тританопия (синий). Самая распространенная форма — дейтеранопия, следующая — протанопия, и тританопия в самом конце. Картинка ниже показывает, как будет выглядеть радуга для людей с разными формами дальтонизма.

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



Как сделать дизайн с лучшей цветовой различимостью?


Вы можете подумать:”Зачем мне вообще ориентироваться на такую узкую группу пользователей?” Дело в том, что элементы, подходящие для дальтоников, можно считать хорошо спроектированным и для более широкой аудитории. И если дизайн вашего сайта сделан качественно, он подойдёт для любых пользователей.

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



1. Используйте одновременно цвета и графические символы


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



Интересный факт: логотип Facebook и знаменитая синяя цветовая схема были выбраны из-за того, что Марк Цукерберг не различает красные и зелёные оттенки и лучше всего видит синий. “Синий для меня самый насыщенный цвет. Я могу различить любые его оттенки.”

2. Выбирайте минимализм


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



3. Используйте узоры и текстуру, чтобы показать контраст


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

Вот хороший пример создания контраста с помощью узора.



4. Используйте контрастные цвета и оттенки


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

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



5. Не используйте опасные комбинации цветов


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

Зелёный + красный
Зелёный + коричневый
Синий + фиолетовый
Зелёный + синий
Салатовый + желтый
Синий + серый
Зелёный + серый
Зелёный + чёрный

Как узнать, что у вас нет цветовой слепоты?


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



Все ещё сомневаетесь?

Тест Ишихары: вы проходите тест из 38 вопросов и получаете результат.
Color Blind Check: приложение на Android от Colorblindor, с помощью которого вы за минуту можете узнать, есть ли у вас дальтонизм.
Coblis: вы загружаете изображение и смотрите, как его увидят люди с разными формами цветовой слепоты.
Приложения: 3 приложения на iOS и Android, созданные специально для дальтоников.

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

  1. Не полагайтесь только на цвет для индикации состояния
  2. Ограничьте цветовую палитру 2-3 цветами
  3. Используйте текстуру и узоры, чтобы показать контраст
  4. Используйте контрастные цвета и оттенки, чтобы выделить текстовые ссылки
  5. Не используйте опасные комбинации цветов: зелёный с красным, зелёный с голубым, голубой с серым и т.д.


P.S. Если вам известны:
— удачные дизайнерские решения для дальтоников
— способы проверки дизайна на цветовую различимость
поделитесь ссылками в комментариях. Заранее спасибо! (прим. переводчика)
Перевод: Netania Engelbrecht
Анастасия Чуракова @billie
карма
15,0
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (37)

  • +1
    image
    Неожиданно, но я не вижу тут числа. Кто-нибудь видит?

    Раньше проблем не было.
    • +1
      Алексей, и я не вижу число. А оно там должно быть?)
      • 0
        Это первый Тест Ишихары, вопрос 19/38
        Там для меня непонятная серия.
        Вот решил узнать что там.
        • 0
          Может там линию просит указать?
          • 0
            Когда линию, там было иначе, здесь после для числа.
            • +1
              Тогда нажимайте без ввода. Может это как раз для тех, у кого нарушено цветовосприятие и они видят число.
              У меня, кстати, есть дальтонизм, оттенки красного с зеленым путаю. Тест это подвтвердил. Но, тут тоже ничего не вижу.
              • 0
                Мне он тоже это «подтвердил», хотя проблем у меня нет:)
            • +4
              на этой картинке число видят только люди с проблемами, здоровые люди не видят числа (дают пустой ответ)
              • 0
                Это если ожидать что такая подстава может быть. Иначе тест превращается в тест Тест Роршаха где человек пытается придумать — кто так исковеркал числа, за что над ним так издеваются и что же там всё-таки вводить…
    • +2
      Там и не должно быть числа. Оставляйте поле пустым, жмите next. У меня 38/38 верных ответов.
      • –1
        Можно калибратором мониторов работать!
    • +1
      Там есть задания с подвохом, числа действительно нет

      (да, дети, вот так глупо вы будете выглядеть, если не будете обновлять комментарии)
    • +1
      Там, где не видите цифр — просто нажимайте next.
      P.S. Я прошел тест. На все верно ответил. На счастье — я не дальтоник :)
    • 0
      Повертел цвет в Gimp. Ничего кроме более ярко выраженного того же самого рисунка не увидел :)
      • +2
        Да ладно вам. Перевести картинку в RGB, выключить красный и зелёный канал, двойка в синем видна достаточно отчётливо…
        • 0
          А на 18 рисунке пятёрка в синем цвете чудится еле заметная :-D
          • 0
            Таки да. 18й — пятёрка, 19й — 2ка, 21й — 73, на 28й и 29й — линия проявляется…

            Но это потому что картинки всё-таки подобраны. Просто вот так запросто понять как дальтоник видит мир не получится, даже специальные программы дают лишь приблизительное представление…
          • +2
            Собственно идея смотреть в каналы — самоочевидна если вспомнить про то, что цветовая модель у нас RGB — ровно потому что в глазу есть три типа рецепторов: для красного, синего и зелёного цвета соотвественно.

            Однако они не абсолютно избирательны: даже красный свет чуть-чуть но действует на синие колбочки. Отсюда сложности.

            Синий же канал наиболее «перспективен», так как он мало у кого «не работает»: гены для синих колбочек живут в 7й (парной) хромосоме, так что нужно, чтобы звёзды уж очень сильно не так встали чтобы обе копии повредились.

            Красный и зелёный — попали почему-то в X хромосому (непарную у мужчин!), поэтому во-первых у большей части дальтоников что-то не так с крастым или залёным цветом, а во-вторых подавляющее большинство дальтоников — это таки они… мужчины.
            • 0
              Собственно логично, что дальтоники могут эту цифру увидеть без применения фотошопа. Для этого и сделана, скорее всего.
    • 0
      Тоже был немало удивлён, уже подумал, что частично, проблема имеет место быть. Но в конце теста — всё норм. Правильный ответ — пропустить.
    • +1
      Посмотрел в разных схемах — таки нет там числа.
  • +4
    Вы так не пугайте!
    Посмотрел на последнюю картинку, не внимательно прочитав подпись к ней, решил что левый тест для выявления проблем с одной цветовой слепотой, правый для другой. И не увидел чисел на 4х кружках справа, хотя раньше никогда проблем с этим не возникало. Испугался. Стал читать текст вокруг, успокоился.
  • 0
    По поводу выбора цвета читал такой совет — для лучшей контрастности менять не один, а любых два компонента из HSV.
    Проверял на себе — вроде помогает неплохо.
    • 0
      Дмитрий, я правильно поняла, нужно уменьшить или увеличить насыщенность и яркость макета и посмотреть, видно элементы или нет?
      • 0
        Не обязательно в одну сторону оба компонента, главное, чтобы они отличались. Скажем, изменение только оттенка какого-либо цвета на десяток единиц может быть незаметно. А если при этом ещё и уменьшится или увеличится яркость или насыщенность — то практически со 100% вероятностью можно утверждать, что любой человек с цветовой слепотой его отличит.
  • +2
    Проходя тест учтите, что если вас просят ввести число, но на картинке его нет, давите просто next. Если вы не видите ярко выраженной линии (на двух картинках такое), то давите 0 линий. Если принять это во внимание, то я прохожу все 100% картинок на своём мониторе.
  • 0
    Помнится, мне в начале 90-х пришлось года два побыть с такой «цветовой слепотой». :) Цветные VGA-мониторы по вменяемой цене тогда имели совершенно ужасную зернистость, а более-менее приличные стоили неподъемно. Пришлось купить монохромный 13" — четкость картинки на нем была изумительная, а вот весовые коэффициенты для смешивания цветов пришлось долго подбирать, чтобы можно было худо-бедно работать в винде. :)
  • +3
    способы проверки дизайна на цветовую различимость
    поделитесь ссылками в комментариях

    Для Chrome есть расширение NoCoffee, позволяющее проверять дизайн на всевозможные дефекты зрения, включая различные формы цветовой слепоты
    Пример
    image

    chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl?hl=en-US
    • 0
      Василий, интересный инструмент, спасибо.
  • +2
    Откройте секрет, что за буквы после Color на верхней картинке?
    Скрытый текст
    blind что ли?
  • +1
    А вот я с трудом различаю некоторые оттенки зелёного и желтого. И частенько бесит, что во многих устройствах диоды горят именно этими цветами. Иногда понять статус той же зарядки бывает очень проблематично =)
    • 0
      У меня похожая проблема. Правда я их всё таки различаю, просто не всегда могу сказать это уже жёлтый или ещё зелёный.

      Изучал этот вопрос и вот на, что набрёл ya-viju.ru/palochki-kolbochki-setchatki
      ту нагляднее www.youtube.com/watch?v=FlYh4CwyBbQ
      человеческий глаз какбы не может видеть жёлтый это всегда либо ещё зелёный либо уже оранжевый :)

      Тем не менее дальтонизм у меня есть, протанопия — ухудшение восприятия красного цвета, с восприятием
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Удивительным образом есть гораздо более простой способ, который применяют на дорогах: нужно в зелёный добавить немного синего. То есть вместо зеленого и красного использовать, скажем, красный и изумрудный. Для человека с нормальным зрением изумрудный (#50C878 или его web-безопасный аналог #66CC99) почти не отличается от зеленого (добавка синего компенсируется наличием красного), а вот для дальтоников (за исключением редких которые цвета не отличают вообще) — синий даёт возможность их отличить.

      Вот у вас хотелось спросить: эта теория работает или нет?
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Я уже написал: изумрудный («настоящий» #50C878 или его web-безопасный аналог #66CC99) и красный #FF0000…
  • +2
    На нековских мониках можно эмулировать разные искажения цветового видения

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