Как проектировать для дальтонизма

Оглавление:

Как проектировать для дальтонизма
Как проектировать для дальтонизма

Видео: Как проектировать для дальтонизма

Видео: Как проектировать для дальтонизма
Видео: Интерфейс, доступный для всех. Зачем и как? / Валерия Курмак 2024, Май
Anonim

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

Шаги

Метод 1 из 2: текст и фон

Дизайн для дальтонизма, шаг 1
Дизайн для дальтонизма, шаг 1

Шаг 1. Выберите контрастные цвета для текста и фона

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

Черное на белом или белое на черном - очевидный выбор, но вы также можете использовать синий и желтый, желтый и фиолетовый или темно-синий и черный

Дизайн для дальтонизма, шаг 2
Дизайн для дальтонизма, шаг 2

Шаг 2. Подберите цветовые комбинации, такие как синий / желтый и оранжевый / фиолетовый

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

  • Синий и желтый
  • Коричневый и синий
  • Оранжевый и фиолетовый
  • Зеленый и фиолетовый
  • Желтый и розовый
  • красный и синий
Дизайн для дальтонизма, шаг 3
Дизайн для дальтонизма, шаг 3

Шаг 3. Держитесь подальше от зеленого / красного, зеленого / коричневого и синего / фиолетового

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

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

Дизайн для дальтонизма, шаг 4
Дизайн для дальтонизма, шаг 4

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

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

Дизайн для дальтонизма, шаг 5
Дизайн для дальтонизма, шаг 5

Шаг 5. Сохраняйте минимальную цветовую палитру

Чем меньше цветов вы используете, тем больше вы избежите путаницы. Для этого нет жесткого правила, но чем меньше, тем лучше!

Например, вы можете выбрать 3 цвета и использовать их в качестве темы для своей веб-страницы

Метод 2 из 2: изображения и ссылки

Дизайн для дальтонизма Шаг 6
Дизайн для дальтонизма Шаг 6

Шаг 1. Подчеркните интерактивные ссылки

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

Если вы не хотите подчеркивать его, сделайте текст жирным

Дизайн для дальтонизма, шаг 7
Дизайн для дальтонизма, шаг 7

Шаг 2. Добавьте символы и ключи

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

  • Например, вы можете поместить цветовой код сбоку от диаграммы, чтобы объяснить, что означает каждый цвет.
  • Или вы можете использовать символы на карте для обозначения различных областей, таких как кемпинги и туалеты.
Дизайн для дальтонизма Шаг 8
Дизайн для дальтонизма Шаг 8

Шаг 3. Добавьте текстуру на карты, диаграммы и графики

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

  • Это отличная идея для гистограмм и круговых диаграмм.
  • Вы можете использовать как текстуру, так и цвет в своих изображениях, поэтому вам не нужно полностью их менять.
Дизайн для дальтонизма Шаг 9
Дизайн для дальтонизма Шаг 9

Шаг 4. Обозначьте участки на картах

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

Это отличный способ сделать ваши изображения более заметными

Дизайн для дальтонизма Шаг 10
Дизайн для дальтонизма Шаг 10

Шаг 5. Обозначьте информацию без использования цветов

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

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

Рекомендуемые: