Статья удалена

Дальтоники не различают состояния кнопок? Серый цвет — показатель «выключенности»? Кнопка справа лучше кнопки слева? Разбираемся.

Если вам нравится такой контент, то, пожалуйста, подпишитесь на мой блог. ☺

Написано на основе этого.

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

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

Из-за этих причин дизайнеры часто помешиваются на параметре «доступности» интерфейса и вводятся в заблуждение, считая, что их работа хуже, чем на деле она является.

Эта статья развеет некоторые мифы и ответит на некоторые вопросы по этой теме.

The Web Content Accessibility Guidelines (WCAG) — набор определенных принципов, которые определяют доступные цветовые контрасты. Как бы то ни было, чаще всего эти принципы попросту игнорируются из-за частичного несоответствия с реалиями приложений. Вместо догматического поклонения этим принципам, мы должны использовать WCAG, как инструмент для проверки интерфейсов. На него нужно лишь оглядываться, а не строить интерфейсы на его основе.

Например, стандарты WCAG проваливаются на яркости контрастности белого текста. Обе кнопки имеют голубые бэкграунды, но одна с белым текстом, а другая — с черным. В опросе пользователи чаще отдавали предпочтение белому текста, так как он лучше читается. Но значения контрастности рисовали нам немного другую картину.

Контрастность черного текста — 5.41, так что он проходит по требованиям. А вот у белого — 2.94, то есть — провал. Судя по показателям, белый цвет должен быть менее читаемым, но на деле все наоборот.

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

Эта погрешность контрастности проявляется и на оранжевом фоне. Показатели WCAG не всегда учитывают высокую яркость контраста белого текста. Белый — чистый свет без оттенка и насыщенности — сам по себе является сильнейшей формой контраста. Разумеется, из-за этого факт «Белый текст лучше читается» имеет смысл.

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

WCAG предназначены для помощи дизайнерам в определении правильных контрастов. «Карта — это не территория». Не стоит путать модели реальности с реальностью самой по себе.

У WCAG есть разные уровни соответствия требованиям. Некоторые люди считают, что все тексты должны соответствовать наивысшему уровню (ААА), а иначе он будет малодоступным для большинтсва пользователей. Эта позиция — ложная. Понимание приходит тогда, когда ты узнаешь о том, как требования ААА были созданы.

Требования ААА сообщают о необходимости соотношения контрастности 7:1 для компенсации потери контрастностной чувствительности пользователями с потерей зрения уровня 20/80 и выше. Многие такие юзеры используют вспомогательные технологии и гаджеты с функциями улучшения контрастности. Им они необходимы потому, что они используют не только один сайт или приложение, а несколько. Требование ААА распространяется лишь на ту немногочисленную группу людей с потерей зрения 20/80, что не используют вспомогательные технологии.

Потеря зрения уровня 20/80 является редкой и чаще всего от неё страдают пожилые люди с различными болезнями глаз. Чаще всего потеря зрения связаны со старением. Глаза начинают подводить людей обычно в возрасте 70 лет. Так что если большинству ваших пользователей больше 70 лет, следование требованиям ААА действительно улучшит их ситуацию. Но даже WCAG отмечают, что всем требованиям ААА угодить невозможно из-за специфики разных сайтов.

Соответствие требованиям АА чаще всего достаточно для большинства пользователей. АА сообщает о необходимости соотношения контрастности 4.5: 1 для компенсации потери контрастностной чувствительности пользователями с потерей зрения уровня 20/40. Одна научная работа обнаружила, что большинство пользователей в восемьдесят лет сохраняют уровень остроты зрения на отметке 20/40 и лучше. В общем, соответствие требованиям АА сделает ваш текст доступным для преобладающего большинства юзеров.

Многие заблуждаются, считая, что компоненты интерфейса должны иметь такой же показатель стандарта контрастности, как и у текста. На деле они отличаются. Компоненты имеют показатель контрастности 3:1, в то время как текст — 4.5:1. Текст требует большей контрастности, так как пользователям его нужно читать. Компоненты интерфейса же не требуют чтения и имеют меньшие стандарты.

На контраст текста влияет множество нюансов: размер шрифта и его начертания. Громадные размеры текста (18pt) и жирные текста (14pt bold) требуют меньшей контрастности. Некоторые компоненты интерфейсов и вовсе освобождены от требований.

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

Очередной миф — серый цвет обозначает о «выключенности» элемента. Некоторые также считают, что юзеры не могут читать серый текст, так как он выглядит малоконтрастным. Иногда это правда, но во многих случаях — ложное предположение. Например, кнопка снизу имеет серый текст и её отнюдь не назвать «выключенной» или «малодоступной». Как бы то ни было, прогнав её через проверку контраста, мы видим, что она не только проходит по требованиям АА, а еще её показатели намного выше стандарта.

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

Иконкам рядом с кнопками не требуется следовать требованиям контраста, пока подпись соблюдает соотношение контраста 4.5:1. Если иконка сама по себе, то на неё накладывается требование об контрастности 3:1.

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

Частым предположением является следующее: если дизайн использует контраст цветов, дальтоники могут не заметить разницы. Оттенок цвета и контраст цвета — это разные измерения. Дальтоникам тяжело определять конкретные оттенки. У них нет проблем с нахождением разницы в контрастах.

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

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

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

Если вы используете разные оттенки для разделения состояний, то вам требуется ещё один визуальный намек, кроме цвета. Но если вы используете контраст цветов для состояний, тогда кнопка будет доступной для дальтоников.

Есть несколько видов дальтонизма, но вы должны сфокусироваться, в первую очередь, на красно-зеленой слепоте. Ею страдают 99% дальтоников. Есть множество симуляторов цветовой слепоты, даже в расширениях Chrome, например, Colorblindly.

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

Требование об использовании цвета гласит, что «цвет не должен использоваться в качестве единственной визуальной подсказки для передачи информации, отображения действия и различия элементов».

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

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

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

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

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

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

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

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

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

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

Доступность всегда будет приоритетом дизайна для пользователей. WCAG — эффективный инструмент для достижения доступного дизайна высшего качества и стандарта.

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

Если вам нравится такой контент, то, пожалуйста, подпишитесь на мой блог. ☺

Спасибо за прочтение!

#лонг #дизайн #ui #ux