Я сейчас разрабатываю график, к которому постепенно будут добавляться новые элементы. Я хотел бы создать список / порядок цветов для элементов, который будет наиболее полезен для дальтоников, чтобы различать каждый элемент. Есть идеи, как / с чего начать?
website-design
color
color-reproduction
fish2000
источник
источник
Какого рода дальтонизм вы пытаетесь решить? Эта ссылка
http://en.wikipedia.org/wiki/Color_blindness
должен дать вам хорошее представление о различных цветах, чтобы избежать в зависимости от типа дальтонизма.
В общем, зависимость от выбора между синим и зеленым может быть рискованной; Возможно, вы захотите посмотреть, как ваши вещи выглядят чисто монохромными.
Поскольку существует диапазон «дальтонизма», вы, вероятно, также хотите всегда быть уверены, что элементы управления и т. Д. Имеют избыточность (например, большая красная кнопка также должна быть помечена как «кнопка самоуничтожения» приятного контрастного цвета (черный на красном) или белый на красном).
источник
Есть много видов дальтонизма. Ключ должен гарантировать, что есть адекватный контраст. Более того, не полагайтесь только на цвет - имейте ту же самую информацию, всегда покрытую в форме, контрасте или порядке пунктов. Если ваше изображение легко понять в черно-белом, оно проходит.
источник
Я дальтоник. «Нам» нравится, когда графика различается по цвету так же, как и «вы» - просто в нашем мире меньше цветов, чем в вашем. Вот прагматичное предложение в духе правила 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)
источник
Наиболее распространенным видом дальтонизма является красно-зеленая дальтонизм (который может быть дефектом при обнаружении красного или при обнаружении зеленого, но редко обоих). Поэтому избегайте полагаться на различия в красно-зеленой части спектра. (Например, светло-зеленый и светло-оранжевый будут казаться одинаковыми для таких людей.)
Если вы хотите быть особенно осторожным, вы можете разместить свои цвета на сине-желтой оси (очень темно-синий; аква; белый; зеленовато-коричневый; коричневый); все красно-зеленые проблемы все еще позволяют человеку понять, что синий отличается; Преимущество желтого цвета состоит в активации как зеленых, так и красных конусов, поэтому, если есть проблема с любым из них, это все еще достаточно заметно. В качестве альтернативы, любой участок, где яркость увеличивается (например, красный-> желтый-> белый), виден большинству людей. Однако не думайте, что красный отличается от черного.
источник
Есть несколько инструментов для Firefox. Пример
Афайк, есть также сертификат, в котором есть некоторые рекомендации. Я заглянул в свои бумаги, но пока не нашел. Google обязательно расскажет что-нибудь о различных доступных сертификатах для вашей страны.
источник
Я воскрешаю это, потому что трудно найти конкретные примеры или инструкции.
Вы можете использовать симуляторы, чтобы помочь в достижении этой цели, имея в виду, что нацеливание на дейтеранопию охватывает большинство и поддержка протанопии, а также почти на всех остальных. (Я считаю, что остаток составляет менее 0,01% населения.)
Продукты Adobe, такие как Illustrator, имеют очень полезные симуляторы (откройте новое окно и выберите «Просмотр»> «Настройка пробных отпечатков»> «Слепота цвета»), которые могут мгновенно отображать живое параллельное воспроизведение при настройке цветов. И есть бесплатные автономные инструменты, такие как Color Contrast Analyzer.
Ниже приведен пример скриншота из Illustrator, на котором показана шестицветная палитра (где шестой цвет - красный или пурпурный, а не оба) и обе симуляции. Слева внизу, наиболее статистически, самый критический.
Обратите внимание, что в этом случае фиолетовый стал лишь незначительно полезным (довольно блеклый, и даже при этом все еще имеет низкий контраст с синим и / или пурпурным цветом). Кроме того, «самый безопасный» вариант (полный пурпурный цвет заменяет красный) может быть довольно громким. Для большинства людей с сердечно-сосудистыми заболеваниями настройка насыщенности / яркости красного и зеленого может обеспечить узнаваемый контраст.
(Пожалуйста, свяжитесь со мной перед повторным использованием этой палитры / изображения в полном объеме.)
Я очень рекомендую использовать цветовое пространство HSL. HSB (он же HSV) тоже довольно дружелюбен, особенно по сравнению с RGB или CMYK. (К вашему сведению, только значения оттенков H будут идентичны в обеих системах.) Здесь каждый столбец использует один номер оттенка. Вы всегда можете извлечь коды RGB позже, либо из Adobe, либо с помощью отличных инструментов на colorizer.org . К сожалению, шестнадцатеричные RGB-коды являются наиболее лаконичными и могут использоваться непосредственно программистами и т. Д., Хотя, если вы работаете в CSS, он напрямую поддерживает HSL (ура).
Насыщенность синего здесь намеренно низкая, чтобы (а) быть более мягким цветом звена / кнопки и (б) больше контрастировать с этими хорошо насыщенными пурпурными и пурпурными цветами. Внутри столбца основным изменением является яркость, но вы также можете избежать некоторых изменений насыщенности.
источник
Если вы не работаете в Photoshop или в более ранней версии, в которой не было упоминания о дальтонике, о котором говорилось выше, вы можете проверить контраст яркости вашего проекта, преобразовав его в оттенки серого. Или, если это более ранняя версия PS, вы можете использовать либо слой оттенка и насыщенности с насыщенностью, полностью повернутой вниз, либо карту градиента, использующую градиент от черного к белому. Поместите этот слой в качестве верхнего слоя в документе, а затем, когда вы захотите проверить контраст, включите его. Я предпочитаю карту градиента, потому что она более точна с точки зрения того, какие цвета контрастируют друг с другом с точки зрения яркости (красный цвет выглядит немного светлее, чем если вы просто обесцвечиваете), но любой из них может показать проблемные области в дизайне. До тех пор, пока ваша страница выглядит хорошо в этом представлении, это должно быть хорошо для дальтоника.
источник
Рисунок 1: Тест Исихара на дальтонизм .
Я только что ответил на похожий вопрос, довольно подробно:
Какой хороший источник цветовых палитр для дальтоников?
Основной итог: особый дальтонизм в вашей пользовательской базе (так как существует значительная разница) заслуживает изучения; Ваша палитра, скорее всего, будет развиваться из того, что вы можете видеть глазами дальтоника.
Фото связано:
источник
Я знаю, что уже ответил на это q - но я только что нашел это:
http://disturbmedia.com/max/colour-blindness.html
... это симулятор дальтонизма, который кажется особенно подходящим для вашей задачи. Я посмотрел на него, и мне стало так плохо от дальтоника, что я был вынужден подумать о палитрах, которые будут работать на них тоже из сострадания. На самом деле - я не совсем шучу; взглянуть.
источник