Не полагайтесь на цвет при проектировании интерфейсов

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

1e2c8ff1e65bfe080392898560a3e5b9
Мой сайт в своем нормальном состоянии.

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

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

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

Вот хороший инструмент для того, чтобы ощутить себя в шкуре человека с некоторой степенью дальтонизма — http://colororacle.org/.

d5505f3604d902c5ea5fefc298360f82
Мой сайт, как его видел бы человек с “Дейтеранопией” – затрагивает примерно 5% мужчин

b614ad6f4c8787bcef12ee56ce40bb84
Мой сайт, как его видел бы человек с “Протанопией” – довольно редкое явление.

c4cb81f6c92d1a44671c89772515f484
И мой сайт, как его видел бы человек с “Тританопия” – это уже встречается очень редко

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