Хорошая цветовая палитра, пригодная для дальтоников.


13

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

Ответы:


14

Если вы хотите использовать метод проб и ошибок, я бы предложил инструмент под названием Color Oracle (кроссплатформенный), который имитирует дейтеранопию / дейтераномалию, протанопию / протаномалию и тританопию - типы дальтонизма на экране вашего компьютера.

(Также в Photoshop есть настройки для защиты от дальтонизма, доступные в ViewProof Setup(CS5 имеет, по крайней мере). Но Photoshop может быть немного излишним, если вы собираетесь разрабатывать диаграмму.)


1
+1 для доказательства фотошопа, я пробовал это на днях. Это довольно
круто

Дело в том, что тестирование - это правильный подход; выбор «безопасной» палитры будет излишне ограничительным.
Чарльз Стюарт

7

Какого рода дальтонизм вы пытаетесь решить? Эта ссылка

http://en.wikipedia.org/wiki/Color_blindness

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

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

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


хороший призыв к избыточности
JamesHenare

1
@Lauren: Ну, ты не можешь быть слишком осторожным при разработке интерфейсов для твоего злого логова ...
lawndartcatcher

да, и убедитесь, что вы наняли пятилетнего ребенка, чтобы проверить свои грандиозные планы. :)
Лорен-Клир-Моника-Ипсум

5

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


Хотя технически существует много видов, у подавляющего большинства имеется дейтеранопия или более легкая дейтераномалия. Почти все остальные имеют протанопию или протаномалию. Все вышеперечисленное - это потеря красно-зеленого цвета. Все остальные типы вместе (сине-желтый или монохромный) составляют менее 0,01% населения, насколько я понимаю. Итак, я в основном ориентируюсь на нормальное зрение и дейтеранопию (используя симуляцию Adobe), а затем немного настраиваюсь с помощью симуляции протанопии.
Джон Кумбс

Если вы полностью замените красный на неиспользованный в противном случае цвет (обычно пурпурный или оранжевый), это поможет. Android сделал много этого. (Или вы можете заменить зеленым.) Замена цветных значков не так просто, если вы используете красный (или зеленый) только в некоторых значках. (Для нас все наши старые значки не могут быть монохромными.) Если вы можете позволить себе роскошь сменных палитр, вы можете оптимизировать их отдельно. и прот., и даже добавить третий вариант для тританопии / тританомалии. Если у вас есть свопинг, высококонтрастный режим (светлый текст на темном bg) - это много замен, но даже более полезный.
Джон Кумбс

4

Я дальтоник. «Нам» нравится, когда графика различается по цвету так же, как и «вы» - просто в нашем мире меньше цветов, чем в вашем. Вот прагматичное предложение в духе правила 80/20.

Если ваш первый тип датчиков цвета (прото) не работает, ваше зрение является протоанопическим. Если они просто плохо себя ведут, вы протоаномоломны. Повторите эти действия для двух других типов цветовых датчиков и замените «deuter» или «trito» на «proto». (Я думаю, что это греческий язык для 1,2,3).

Прагматическая возможность проистекает из того факта, что дейтераномалия намного более распространена, чем другие типы; 5% всех мужчин. Другие получают менее 1% у мужчин и еще меньше у женщин. Таким образом, простое решение для нас, deuteranomalists, имеет большое значение - я лично не хочу настраивать цвета самостоятельно, чтобы увидеть разницу в линиях на графике. (Что происходит все время).

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

В северном направлении Не забывайте, что не стоит ссылаться на эти цвета по имени в пользовательском интерфейсе, который вы создаете. Для нас Deutsche - кажется, что «вы» изобрели множество ненужных дублирующих имен для почти одинаковых цветов :-)

RGB (255, 204, 153)

RGB (204, 204, 255)

RGB (255, 102, 102)

RGB (139, 230, 2)

красный

желтый

RGB (51, 51, 255)

RGB (153, 153, 153)

RGB (153, 0, 0)

RGB (51, 51, 51)

RGB (0, 0, 102)

RGB (120, 102, 75)


1
HTML-фрагмент, который я скопировал, чтобы показать, что цвета не отображаются должным образом, поэтому позвольте мне попробовать еще раз:
Пит Ховард

здесь я идти jsfiddle.net/kgasj68o
Санта

2

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

Если вы хотите быть особенно осторожным, вы можете разместить свои цвета на сине-желтой оси (очень темно-синий; аква; белый; зеленовато-коричневый; коричневый); все красно-зеленые проблемы все еще позволяют человеку понять, что синий отличается; Преимущество желтого цвета состоит в активации как зеленых, так и красных конусов, поэтому, если есть проблема с любым из них, это все еще достаточно заметно. В качестве альтернативы, любой участок, где яркость увеличивается (например, красный-> желтый-> белый), виден большинству людей. Однако не думайте, что красный отличается от черного.


2

Есть несколько инструментов для Firefox. Пример

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


2

Я воскрешаю это, потому что трудно найти конкретные примеры или инструкции.

Вы можете использовать симуляторы, чтобы помочь в достижении этой цели, имея в виду, что нацеливание на дейтеранопию охватывает большинство и поддержка протанопии, а также почти на всех остальных. (Я считаю, что остаток составляет менее 0,01% населения.)

Продукты Adobe, такие как Illustrator, имеют очень полезные симуляторы (откройте новое окно и выберите «Просмотр»> «Настройка пробных отпечатков»> «Слепота цвета»), которые могут мгновенно отображать живое параллельное воспроизведение при настройке цветов. И есть бесплатные автономные инструменты, такие как Color Contrast Analyzer.

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

Обратите внимание, что в этом случае фиолетовый стал лишь незначительно полезным (довольно блеклый, и даже при этом все еще имеет низкий контраст с синим и / или пурпурным цветом). Кроме того, «самый безопасный» вариант (полный пурпурный цвет заменяет красный) может быть довольно громким. Для большинства людей с сердечно-сосудистыми заболеваниями настройка насыщенности / яркости красного и зеленого может обеспечить узнаваемый контраст.

надежная цветовая палитра

(Пожалуйста, свяжитесь со мной перед повторным использованием этой палитры / изображения в полном объеме.)

Я очень рекомендую использовать цветовое пространство HSL. HSB (он же HSV) тоже довольно дружелюбен, особенно по сравнению с RGB или CMYK. (К вашему сведению, только значения оттенков H будут идентичны в обеих системах.) Здесь каждый столбец использует один номер оттенка. Вы всегда можете извлечь коды RGB позже, либо из Adobe, либо с помощью отличных инструментов на colorizer.org . К сожалению, шестнадцатеричные RGB-коды являются наиболее лаконичными и могут использоваться непосредственно программистами и т. Д., Хотя, если вы работаете в CSS, он напрямую поддерживает HSL (ура).

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


1

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


0

введите описание изображения здесь

Рисунок 1: Тест Исихара на дальтонизм .

Я только что ответил на похожий вопрос, довольно подробно:

Какой хороший источник цветовых палитр для дальтоников?

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

Фото связано:

Дальтонизм против трихроматического


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

0

Я знаю, что уже ответил на это q - но я только что нашел это:

http://disturbmedia.com/max/colour-blindness.html

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.