Дизайн приложений для Windows Phone. Контрастность и доступность

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

Сегодня я хочу остановиться только на двух моментах: 1) использовании цвета и 2) работе с текстом. За рамками данной статьи останутся непосредственно интерфейсные решения, в частности рекомендации по размерам и размещению элементов управления (это хорошая тема для отдельного разбора).

Управление цветом

Люди, так уж сложилась наша природа, по-разному видят. Многим из вас, наверняка, знакомо такое явление как дальтонизм, при котором нарушается цветовое восприятие. По статистике, той или иной форме этого нарушения зрения подвержено около 8% мужского населения и 0.5% женского. И дальтонизм, естественно, далеко не единственное возможное нарушение.

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

Контрастность

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

Формула вычисления контрастности выглядит следующим образом:

(L1 + 0.05) / (L2 + 0.05), где

• L1 — относительная яркость наиболее светлого цвета из двух,
• L2 — относительная яркость наиболее темного цвета из двух.

Относительная яркость L определяется как взвешенная сумма линеаризованных компонент цвета (обратите внимание, что все коэффициенты различны):

L = 0.2126 * R + 0.7152 * G + 0.0722 * B, где

• R = (R_sRGB <= 0.03928) ? R_sRGB/12.92 : ((R_sRGB + 0.055)/1.055)^2.4
• G = (G_sRGB <= 0.03928) ? G_sRGB/12.92 : ((G_sRGB + 0.055)/1.055)^2.4
• B = (B_sRGB <= 0.03928) ? B_sRGB/12.92 : ((B_sRGB + 0.055)/1.055)^2.4

и R_sRGB = R_8bit/256, G_sRGB = G_8bit/256, B_sRGB = B_8bit/256.

Согласен, навряд ли, вы возьметесь каждый раз вычислять это вручную, но, думаю, вам не составит большого труда записать формулу в Excel или, скажем, небольшой js-код. Впрочем, проще всего, воспользоваться готовым online-калькулятором, или специальным приложением — Colour Contrast Analyser.

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

Теперь, когда вы знаете, как считается контрастность, осталось понять, как ее трактовать. Прежде всего, из вида формулы должно быть понятно, что все возможные значения контрастности больше или равны 1 (записывается как 1:1). В этом случае цвет текста и фона совпадает и ничего не видно даже самому зрячему из нас. Максимальное значение (это не так очевидно) равно 21:1 и соответствует белому на черном или черному на белом. Все остальное — между 1:1 и 21:1.

В документе W3C выделяется два уровня контрастности. Минимальному рекомендованному (AA) соответствует контрастность 4.5:1 и 3:1 для крупного текста. Улучшенному (ААА) — 7:1 и 4.5:1, соответственно. (Эти требования не касаются неактивных элементов интерфейса, украшательств, логотипов и других подобных элементов.)

Как это знание применить при разработке интерфейса для Windows Phone? На самом деле, это достаточно просто. Давайте рассмотрим два ключевых сценария.

Темы и акценты Windows Phone

Предположим, вы используете в качестве основных цветов в своем приложении системные кисти, то есть для текста используете системный ресурс с foreground-цветом, для фона background-цвет, и для каких-то важных элементов акцентный цвет. Что будет происходить в этом случае с точки зрения контрастности интерфейса?

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

Первое, что вам должно броситься в глаза, это наличие не только зеленых значений (выше 4.5:1), но и заметной доли желтых (выше 3:1) и красных (все, что ниже). Оказывается, что не все сочетания акцентов и тем оказываются достаточно контрастными, чтобы удовлетворить рекомендациям. Как же так?

Прежде всего, неудовлетворение рекомендации, еще наверняка не означает, что у конкретного человека будет проблема с восприятием информации. Вторая важная деталь — это практическая симметричность расположения цветов: есть как хорошая серединка, так и отдельные цвета, подобранные так, чтобы быть высококонтрастными (до 10:1) на одном из стандартных фонов и, как результат, получающие низкую контрастность на противоположном. Например, лаймовый цвет (lime) оказывается самым контрастным на черном и наименее контрастным на белом.

Это не только нормально, но и правильно (математику не обманешь — нельзя быть высококонтрастным и на светлом, и на темном одновременно). Обратите также внимание в таблице на 4-6 колонки, в которых приведено значение контрастности тех же акцетных цветов на светлом и темном фоне, но уже в случае различных типов дальтонизма. Вы легко можете заметить, что, например, бирюзовый (teal) на белом может неожиданно стать контрастным даже по критерию ААА, что очень здорово. То же самое верно и в отношении богатых на красный оттенок красного и мадженты (magenta) — их контрастность на белом в случае протанопии и дейтеранопии очень сильно повышается.

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

Собственные темы

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

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

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

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

Работа с текстом

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

• Минимальный AA: 4.5:1 для обычного текста и 3.0:1 для крупного текста,
• Улучшенный AАA: 7:1 для обычного текста и 4.5:1 для крупного текста,

Крупный текст — это все, что выше 18pt или 14pt при использовании жирного начертания (размер в пикселях может варьироваться в зависимости от конкретного шрифта).

Текст и изображения

Часто встречается задача, когда необходимо дать подпись к картинке, расположив ее поверх. Как это сделать наилучшим образом?

Давайте начнем с обратного. Как надписи размещать точно не следует? Очевидно так, что будет теряться контраст. Очень часто такая картина встречается, если изображение случайно или почти случайно (например, выбирается из некоторой достаточно большой базы) — фотография к новости, обложка к альбому или книге, постер к фильму и т.д.

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

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

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

Размер текста

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

Тут, собственно, нечего рассказывать кроме того, что минимальный рекомендуемый размер текста для Windows Phone — 15pt.

Если вам удобнее рассчитывать значения в пикселях, вот небольшая схема перевода для Segoe WP (коэффициент — 4/3):

Заключение

Проектируя приложения, пожалуйста, не забывайте о необходимости обеспечения хотя бы минимального уровня доступности вашего приложения для ваших пользователей. Минимальный шрифт — 15pt, минимальный контраст текста — 4.5:1, минимальный контраст иконок — 3:1. Лучше — больше.