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

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

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

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

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

Самое простое решение — слова. Добавьте к красному полю метку «Ошибка», чтобы смысл сохранялся, даже если цвет не различим.

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

Синяя ссылка в сером абзаце может быть незаметна некоторым пользователям. Добавьте подчёркивание, чтобы ссылки были очевидны без опоры на цвет.

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

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

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

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

Вы узнали, что нельзя позволять цвету быть единственным сигналом: добавляйте текст, значки, формы или подчёркивания, чтобы смысл был понятен всем. Далее: проверка контрастности с помощью инструментов. 🌈