CC BY
75
1п1е11гс1ыа1 Technologies оп ТтитроН. 2019. N0 2
Оптимизация приложений для дальтоников
студент магистратуры Н.К. Уваров Петербургский государственный университет путей сообщения Императора Александра I
Санкт-Петербург, Россия <nick553@mail.ru>
Аннотация. Рассматривается проблематика адаптации приложений для людей с отклонениями в цветоощущении. Приводится разбор источника проблемы, рассматриваются возможные методы ее решения, а также ряд примеров реализации этих методов. Один из самых простых способов адаптировать приложение для дальтоников — использовать символы, текст или различные изображения вкупе с цветом. Примером такого подхода служит приложение Тге11о — органайзер, реализованный как веб-сервис. Еще два способа обеспечения доступности приложения для дальтоников: использование особых палитр цветов и просмотр всего дизайна в монохроме.
Ключевые слова: дальтонизм, приложение, цвет в ЭВМ, компьютерная графика.
Введение
Дальтонизм, или цветовая слепота, — это нарушение восприятия цветов, вызванное расстройством цветного зрения. Следует отметить, что это одно из распространенных нарушений зрения: около 8 % мужчин и 1 % женщин имеют дальтонизм какой-либо степени [1]. Это означает, что почти каждый десятый человек, пользующийся тем или иным программным продуктом (приложением) будет иметь трудности с правильным пониманием (обработкой)
визуальных данных. Если работа приложения зависит от восприятия цвета пользователем, то это может сказаться на пользовательском опыте, пусть даже и одного из десяти человек, т. к. именно сбалансированная инфографика предполагает грамотное использование визуального представления (например, диаграмм, графиков, иконок, изображений), соответствующий выбор цветов и шрифтов и др.
Так как же нам настроить приложение? Как исправить проблемы? Как можно предотвратить эти проблемы?
Представление цвета в ЭВМ
При построении модели цвета в ЭВМ опираются в первую очередь на то, как работает человеческий глаз. Его можно представить как оптический прибор со своим «объективом» — хрусталиком — и светочувствительным элементом — сетчаткой. С помощью глаза можно различить не все электромагнитные волны, а только те, длина которых находится в диапазоне 400...700 нм. Хрусталик проецирует видимое изображение на сетчатку, покрытую светочувствительными рецепторами — палочками и колбочками. Строение глаза можно увидеть на рисунке 1.
Рис. 1. Строение человеческого глаза
Рецепторы содержат несколько типов цветочувстви-тельных пигментов белкового происхождения. Так, например, в колбочках содержится йодопсин (общее название зрительных пигментов, содержащихся в колбочках сетчатки). В состав йодопсина входят три пигмента, один из них — хлоролаб, специфический фоточувствительный пигмент. Хлоролаб получил свое название в связи со специфическим спектром поглощения в видимой-области спектра, с максимальной чувствительностью к области, соответствующей желто-зеленой части спектра (максимум около 534-545 нм). Второй — эритролаб, максимальная чувствительность к области, соответствующей желто-красной части спектра (около 564-580 нм). Третий пигмент — цианолаб, с максимальной чувствительностью к сине-фиолетовой части спектра (420-440 нм) [2].
Палочки, расположенные в основном на краю сетчатки, обладают крайне высокой светочувствительностью, но при этом слабо различают длину волны. Колбочки, расположенные в основном в центре сетчатки, обладают низкой светочувствительностью и узким диапазоном воспринимаемых длин волн (рис. 2).
Рис. 2. Чувствительность колбочек к длинам волн
Таким образом, цвет можно задавать как сумму трех базовых цветов — красного, зеленого и синего. Такая модель получила название RGB. Эту модель можно представить в виде куба (рис. 3), в котором каждый цвет представляется трехмерным вектором, компоненты которого определяют доли красного, зеленого и синего цветов, смешивая которые можно получить все остальные цвета и оттенки. В этой модели черный цвет представлен вектором (0, 0, 0), белый цвет — (l, 1, 1) [3].
Цветовой куб модели RGB
(О, 0, L)
СШШЙ
/
i, о)
зеленый
(о, а, о)
черный
(1,0,0) красный
Несмотря на всеобщее использование модели RGB, она не является стандартом. Стандартом является модель CIE XYZ, в которой каждый видимый человеком цвет однозначно представляется с помощью тройки неотрицательных чисел (X, Y, Z). Для получения этих чисел используются формулы
Jl(A)kx(A), Y= jl(A)ky(A), Z= jKA)kz(A),
(1)
где кх(А),ку(А),кг(А) — определенные стандартом базовые функции (рис. 4).
—
— -
400
500 600
А/ НМ
700
Рис. 4. График функций кх{А),ку{А),кх{А)
В представленных моделях все три координаты несут в себе информацию о цвете. Тем не менее существуют модели с явным делением координат на яркость и хроматические координаты. Одна из таких моделей - Уху, которая определяется следующими формулами:
X
X+Y+Z
У
X+Y+Z
(2)
Хроматические координаты х и у полностью определяют цвет без учета его яркости.
Рис. 3. Куб представления цвета в RGB
Рис. 5. Хроматическая диаграмма
На рисунке 5 представлена хроматическая диаграмма, которая содержит хроматические координаты всех видимых человеком цветов [4]. На этом изображении дуга соответствует чистым спектральным цветам, а отрезок — цветам, получающимся при смешивании красного и синего цветов.
Если взять два цвета, то им будут соответствовать две точки на диаграмме. Все множество цветов, получаемое смешиванием этих двух цветов, будет выражено отрезком между этими двумя точками. Соответственно при трех цветах множество будет выражено треугольником.
Вывод: никакое конечное количество цветов не может дать при смешивании все видимые человеком цвета.
Несмотря на то, что цветовое пространство CIE XYZ является стандартом, на практике почти для всех светоиз-лучающих устройств используют модель RGB, поскольку она проста и удобна; даже несмотря на то, что она не может дать все видимые цвета, ее почти всегда бывает достаточно.
Существует еще несколько моделей представления:
• CMY (Cyan, Magenta, Yellow) — является обратной модели RGB и используется при печати на бумаге.
• HSV (Hue, Saturation, Value) — выявляет цвет по яркости, насыщенности и тону.
• HSL (Hue, Saturation, Lightness) — цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота [5].
Дальтонизм
Дальтонизм (цветовая слепота) — наследственная, реже приобретенная особенность зрения, выражающаяся в неспособности различать один или несколько цветов и оттенков. Названа в честь Джона Дальтона, который впервые, в 1794 году, дал широкодоступное описание одного из видов цветовой слепоты на основании собственных ощущений.
Рис. 6. Виды дальтонизма
Люди с нормальным цветным зрением имеют в рецепторах все три пигмента (эритролаб, хлоролаб и цианолаб) в необходимом количестве. Их называют трихроматами (от слова хрома — цвет).
Существует несколько типов дальтонизма:
• монохроматизм, имеется либо один пигмент, либо полное их отсутствие;
• дихроматизм, имеются два пигмента, третий полностью отсутствует;
• аномальный трихроматизм, имеются все три пигмента, но смещен пик чувствительности для одного из них, в результате чего получается меньший спектр цветов.
Дихроматы и аномальные трихроматы также делятся на три типа (рис. 6):
• тританопия — отсутствие/неисправность колбочек с цианолабом (синий);
• дейтеранопия — отсутствие/неисправность колбочек с хлоролабом (зеленый);
• протанопия — отсутствие/неисправность колбочек с эритролабом (красный) [6].
В результате того, что многие цвета являются сочетаниями других цветов, можно заметить, что дальтонизм влияет на весь цветовой спектр.
На рисунке 7 представлены хроматические диаграммы с линиями спутывания. Все цвета в направлении линий являются трудноразличимыми. Место, где они сходятся, называется копунктуальной точкой. Для трех разных типов дальтонизма — три разные копунктуальные точки.
(U ол аз ад o.r us
Рис. 7. Хроматические диаграммы с линиями спутывания для разных видов дальтонизма
Адаптация приложений для дальтоников
Один из самых простых способов адаптировать приложение для дальтоников — использовать символы, текст или различные изображения вкупе с цветом. Примером такого подхода может служить приложение ТгеПо — органайзер, реализованный как веб-сервис [7]. На рисунке 8 видно, как эта программа меняет вкладки в зависимости от включенного режима для дальтоников.
Рис. 8. Интерфейс приложения Trello
Следующий пример — игра Two Dots, которая основана на соединении точек одного цвета [8]. С нарушением цветоощущения в эту игру совершенно невозможно играть, тем не менее разработчики реализовали режим, который добавляет еще один признак для классификации в виде рисунка или символа на цвете (рис. 9).
Рис. 9. Интерфейс игры Two Dots
Еще одним способом обеспечения доступности приложения для дальтоников является использование особых палитр цветов. На рисунке 10 представлена палитра из 15 цветов, сделанная специально для случаев дейтеранопии. Она сделана с помощью модели представления HSL, а не RGB. HSL особенно хорошо подходит для создания палитр для дальтоников, так как они больше ориентируются на яркость (Luminosity), чем на сам цвет (Hue).
Данная палитра хороша для дейтеранопов, но не подходит для нормального зрения. Обратная ситуация будет, если строить палитру только для обычного зрения.
Чтобы сделать приложение доступным для всех типов цветоощущения, необходимо создать разные палитры для каждого из них.
Множество компаний используют этот способ. Например, в Android (рис. 11) и iOS уже в самой ОС встроены средства для изменения палитры цветов [9].
бзна 4:02 РМ Я Color correction | ф
This function is currently under development and may affect phorw performance.
63% ■ 4:03 PM
Adjustment mode
DwKnrnomaty (r^d-grwij
S Color correction
This function is currently under devtloprnent and
Adjustment mode
Deuteranomaly (red-green) ®
Protanoma ly {red-green) О
Tritanomaly (blue-yellow) О
CANCEL
Рис. 11. Режимы для дальтоников в ОС Android
Одной из самых удачных попыток имплементации данного способа является видеоигра Destiny 2 [10]. В игре, где цвет играет очень важную роль, разработчики точно определили, какие цвета необходимы для каждой палитры, тем самым обеспечив одинаковый опыт для всех пользователей. На рисунке 12 можно увидеть окно настройки палитры и примеры цветов.
Otf (Default) *
□ □ В « Ш ti в Deuteranopia (Red-Green) т
□ □□В ВО 0 в Protanopia (Red-Green) »
□ □ П ПШП ft в Tritanopia (Yellow-Blue) *
1S-COLOR PALETTE FOR COLOR BLINDNESS
NORMAL VISION DEUTERANOPIC PR OTA NOP IA TRITANOPIA
common (6%| rare (2%) very rare (<1»)
Я 1 в
1 !
4 Г 1
5 . 10 15
Я 11
■
1
I! 6 Л 0 0 0
2 0 73 73 146 146 4-4 255 109 182 5 25S 182 219
6 73 0 116 7*0 109 219 3 182 109 255 9 109 132 255 10 182 219 255
11 146 0 0
12 146 73 0 13i 219 109 0
14 36 255 36
15 255 255 109
Рис. 10. Палитра цветов для дейтеранопии
Рис. 12. Настройки режима для дальтоников в Destiny 2
Для проверки выбранных решений можно воспользоваться специальными симуляторами дальтонизма, которые активируют фильтр, имитирующий зрение человека с проблемным цветоощущением. С помощью этих фильтров можно проверить правильность выбранных цветов.
Еще одним способом является просмотр всего дизайна в монохроме. Этот тест очень полезен для выявления сливающихся оттенков, так как он позволит увидеть, какие цвета одинаковой теплоты имеют схожие оттенки.
Заключение
Очень важно при создании приложения сделать его доступным для людей с отклонениями, которые при нормальных условиях не смогли бы им пользоваться.
Это не только поднимет престиж данного приложения на рынке, но и привлечет новую часть аудитории.
Литература
1. Color Blindness. Prevent Blindness.- URL: http://www.preventblindness.org/color-blindness (дата обращения 10.01.2019)
2. Самаль И.Н. Анатомия, физиология и патология органа зрения : учебное пособие. — Псков : ПГПУ им. С.М. Кирова, 2004. — 164 с.
3. Боресков А.В. Компьютерная графика : учебник и практикум для прикладного бакалавриата. / А.В. Борес-ков, Е.В. Шикин. — М. : Юрайт, 2016. — 219 с. (Бакалавр. Прикладной курс)
4. Jackson, K.G., Townsend, G.B. TV & Video Engineer's Reference Book, Oxford, Butterworth-Heinemann Ltd., 1991, 946 p.
5. Различные цветовые модели и их использование. -URL: http://tm.spbstu.ru/Различные_цветовые_модели_и_и х_использование (дата обращения 10.01.2019).
6. McIntyre, D. Colour Blindness: Causes and Effects. Chester, UK, Dalton Publishing, 2002, 112 p.
7. Trello. — URL: http://trello.com (дата обращения 10.01.2019).
8. Two Dots. Free puzzle game for iOS and Android. URL: http://www.dots.co/twodots (дата обращения 10.01.2019).
9. Dobie, A. Android L includes new display modes for color blind users, Androidcentral, 27 Jun 2014. - URL: http://www.androidcentral.com/android-l-includes-new-display-modes-color-blind-users (дата обращения 10.01.2019).
10. Game accessibility guidelines. Destiny colorblind modes. - URL: http://gameaccessibilityguidelines.com/destiny-colorblind-modes (дата обращения 10.01.2019).
Adapting Applications for Colorblind Users
Graduate Student N.K. Uvarov Emperor Alexander I St. Petersburg State Transport University St. Petersburg, Russia nick553@mail.ru
Abstract. The problems of adapting applications for people with color perception are considered. An analysis of the source of the problem is given, possible methods for solving it are considered, and a number of examples of the implementation of these methods are given. One of the easiest ways to adapt an application for color blindness is to use symbols, text, or various images along with color. An example of this approach is the application Trello — organizer, implemented as a web service. Two more ways to ensure the availability of applications for distance tonics: the use of special color palettes and view the entire design in monochrome.
Keywords: colorblind, applications, color in computers, computer graphics.
References
1. Color Blindness. Prevent Blindness. Available at: http://www.preventblindness.org/color-blindness (accessed 10 Jan 2019).
2. Samal I.N. Anatomy, physiology and pathology of the organ of vision [Anatomiya, fiziologiya i patologiya organa zreniya], Pskov, Pskov State Pedagogical University, 2004, 164 p.
3. Boreskov A.V., Shikin Y.V. Computer graphics: textbook and workshop [Komp'yuternaya grafika: uchebnik i praktikum
dlya prikladnogo bakalavriata], Moscow, Urait Publishing House, 2016, 219 p.
4. Jackson, K.G., Townsend, G.B. TV & Video Engineer's Reference Book, Oxford, Butterworth-Heinemann Ltd., 1991, 946 p.
5. Different color models and their use [Razlichnye tsvet-ovye modeli i ikh ispol'zovanie] Available at: http://tm.spbstu.ru/Pa3flHHHbie_^eTOBbie_Moge^H_H_Hx_Hcn 0^b30BaHne (accessed 10 Jan 2019).
6. Mclntyre, D. Colour Blindness: Causes and Effects. Chester, UK, Dalton Publishing, 2002, 112 p.
7. Trello. Available at: http://trello.com (accessed 10 Jan 2019).
8. Two Dots. Free puzzle game for iOS and Android. Available at: http://www.dots.co/twodots (accessed 10 Jan 2019).
9. Dobie, A. Android L includes new display modes for color blind users, Androidcentral, 27 Jun 2014.
Available at: http://www.androidcentral.com/android-l-includes-new-display-modes-color-blind-users (accessed 10 Jan 2019).
10. Game accessibility guidelines. Destiny colorblind modes. Available at: http://gameaccessibilityguidelines. com/destiny-colorblind-modes/ (accessed 10 Jan 2019).
