“Show contrast result for colour blindness”, то можно увидеть, как

На протяжении многих веков печатное слово наносилось черной краской на белую
бумагу. И хотя цветные типографские краски изобретены уже давно, все равно «черное
на белом» остается лучшим из всех возможных контрастов – контрастом, создающим
наиболее комфортные условия для чтения. Вообще говоря, то же верно и для чтения с
экрана: максимальная контрастность достигается при рисовании черного текста на
белом фоне.
Несмотря на то, что секрет идеального контраста (сочетание черного и белого цветов)
уже давно раскрыт в книгопечатании, контрастность остается одним из проблемных
моментов в дизайне. И при разработке дизайна сайта очень важно уделить внимание
цветовой контрастности фона и текста, особенно если вы рассчитываете, что аудитория
пользователей вашего сайта будет достаточно широкой. Ведь в числе этой аудитории
могут оказаться пользователи, имеющие проблемы со зрением (близорукость, цветовая
слепота, и др.)
Вообще, контрастность - это величина, характеризующая соотношение яркостей или
освещённостей самой яркой и самой тёмной областей. Есть еще такое определение
контрастности - соотношение яркостей наиболее белого участка изображения и
наиболее черного. Основная функция контрастности в Web-пространстве —
выделение и разделение элементов Web-страниц.
Работа с контрастностью требует от дизайнера хорошего чувства меры. Почему?
Низкая контрастность
Использование сочетаний цветов с низкой контрастностью сделает дизайн блеклым. Но,
впрочем, у низкой контрастности тоже есть свое применение — ее применяют для
верстки страниц, на которых необходимо создать общее впечатление утонченности и
элегантности. А также путем уменьшения контраста между различными элементами
дизайна можно добиться эффекта смягчения и уменьшения значимости. Например,
менее важный текст можно выводить более светлым цветом. А если нарисовать
неактивную иконку или ссылку неконтрастными цветами, то пользователь получит
визуальное указание на то, что она недоступна.
Но все-таки при использовании низкой контрастности текста и фона нужно учитывать
такой серьезный аспект, как проблема с читабельностью текста близорукими людьми.
Человек со стопроцентным зрением сможет без труда прочесть темно-серый текст на
светло-сером фоне, но близорукому придется щуриться или увеличивать размер
шрифта – в этом случае текст черного цвета был бы легче различим на своем фоне.
Также нужно учитывать такой аспект, как возможность комфортного чтения текста
людьми, не имеющими проблем со зрением. Эта возможность зависит не только от
яркости фона, но и от контрастности цветов. Например, вполне логично, что желтый
цвет не стоит использовать на белом фоне, если нет желания получить абсолютно
неприемлемый результат.
Высокая контрастность
В свою очередь, слишком высокая контрастность загромождает дизайн и ведет к
«какофонии» утрированных визуальных образов. Поскольку компьютерный монитор (в
отличие от печатной страницы) излучает свет, ему присущи специфические
ограничения. Яркий жидкокристаллический монитор в темной комнате может оказаться
слишком ярким для комфортного чтения. Попытка прочитать с него что-нибудь в таких
условиях может стать сущим мучением для глаз. С точки зрения контрастности цвет
представляет дополнительные проблемы. При некоторых сочетаниях близко
расположенных цветов возникает оптическая иллюзия мерцания. Это так называемый
эффект одновременного контраста. Когда два дополнительных цвета, например,
оранжевый и синий или зеленый и красный, находятся рядом, контраст получается
особенно сильным и границы чрезмерно резки. Если такие дополнительные цвета
перемежаются, то возникает неприятное для глаз напряжение. Но в более тонких
формах одновременный контраст может стать ценным инструментом для создания
изысканных эффектов. Оранжево-желтый цвет может казаться более оранжевым на
желтом фоне, но более желтым на оранжевом или красном фоне. Тусклые цвета на еще
более тусклом фоне могут казаться более яркими: например, бледно-красный может
приобрести насыщенность, если нанести его на серый фон.
Цветовая слепота
Еще одним заслуживающим внимания аспектом контрастности является восприятие
плохо сочетаемых цветов людьми, страдающими цветовой слепотой. Существуют две
основных формы этой болезни и много разновидностей. Наиболее часто встречаются
такие общие формы:


Протаномалия/дейтераномалия - при этом менее серьезном заболевании человек
может видеть большинство цветов, но способность различать их понижена
(заболевание известно также под названием «аномальная трихромазия»);
Протанопия/дейтеранопия - эта форма расстройства цветоощущения встречается
реже, но более серьезна. Страдающие этим расстройством не видят зеленого и
красного цветов, оставаясь в желто-коричнево-синем мире (это расстройство
известно также под названием дихромазией).
У каждой формы заболевания есть разновидности, при которых понижена или
полностью отсутствует способность различать комбинации красного, зеленого и реже —
синего. Цветовой слепотой страдает примерно один человек из двенадцати, причем у
мужчин она встречается гораздо чаще, чем у женщин.
Как пользователю, страдающему цветовой слепотой, представляется дизайн, в котором
используются недоступные ему цвета? Ограниченное цветовое восприятие может
означать, что тщательно выбранная палитра искажается до неузнаваемости, что
особенно печально, если дизайнер хотел с помощью цвета передать какую-то
информацию. Предлагать такому пользователю нажать красную кнопку бесполезно,
ведь ему она кажется темно-коричневой или черной. Во многих случаях цвет элемента
просто сливается с окружающей его областью, поэтому контрастность пропадает.
У дизайнера нет надежного способа имитировать цветовую слепоту. На первый взгляд
кажется достаточным преобразовать дизайн в цветовую гамму, состоящую из оттенков
серого цвета, но результат не будет соответствовать тому, что видят большинство
зрителей-дальтоников.
Существуют инструменты (в т.ч. и онлайн), предназначенные для имитации разных
видов цветовой слепоты, но они дают лишь некоторую аппроксимацию, особенности
цветового восприятия уникальны у каждого больного.
Что же делать, если сайт нельзя протестировать? Предлагается передавать любую
информацию не только цветом, но еще хотя бы одним способом: ссылка может быть
синей и подчеркнутой, зеленая кнопка может сопровождаться иконкой или текстом,
предупреждение может быть напечатано красным и быть окружено сплошной рамкой.
Рекомендации W3C насчет контрастности (WCAG 2.0)
WCAG (Web Content Accessibility Guidelines) 2.0 – это руководство по обеспечению
доступности Web-контента, рекомендации W3C от 11 декабря 2008 года. В числе всех
требований этого руководства представлены также требования к контрастности. Вот
они:
1.4.3 Контраст (минимальные требования): Визуальное представление текста и шрифтовой графики
имеет коэффициент контрастности не менее 4.5:1, за исключением следующих случаев:



Крупный текст: крупный текст и шрифтовая графика с крупным текстом имеют коэффициент
контрастности не менее 3:1;
Второстепенный текст: требования насчет минимального контраста не относятся к тексту или
шрифтовой графике, которые
o
являются частью неактивных компонентов пользовательского интерфейса,
o
выполняют только декоративную функцию,
o
не видны пользователям или являются частью изображения, имеющего более значительный
контент;
Логотипы: требования насчет минимального контраста не относятся к тексту, который является
частью логотипа или названием бренда.
1.4.6 Контраст (повышенные требования): Визуальное представление текста и шрифтовой графики
имеет коэффициент контрастности не менее 7:1, за исключением следующих случаев:



Крупный текст: крупный текст и шрифтовая графика с крупным текстом имеют коэффициент
контрастности не менее 4.5:1;
Второстепенный текст: требования насчет максимального контраста не относятся к тексту или
шрифтовой графике, которые
o
являются частью неактивных компонентов пользовательского интерфейса,
o
выполняют только декоративную функцию,
o
не видны пользователям или являются частью изображения, имеющего более значительный
контент;
Логотипы: требования насчет максимального контраста не относятся к тексту, который является
частью логотипа или названием бренда.
Как уже было сказано выше, контрастность
- это величина, характеризующая
соотношение яркостей или освещённостей самой яркой и самой тёмной областей.
Соответственно, коэффициент контрастности – это коэффициент соотношения
яркостей или освещённостей самой яркой и самой тёмной областей.
Как узнать коэффициент контрастности текста и фона на каком-либо
сайте?
Для этого можно скачать отсюда http://www.paciellogroup.com/resources/CCA-2.2.zip
приложение «Анализатор контрастности». После того, как Вы скачали и распаковали
архив:
1. Откройте сайт в браузере. Убедитесь, что в настройках Вашего браузера
установлен обычный размер шрифтов (не увеличенный).
2. Откройте анализатор контрастности.
3. Нажмите
в блоке Foreground и выберите текст, контрастность которого
хотите проверить.
4. Затем нажмите
в блоке Background и выберите цвет фона, на котором
расположен проверяемый Вами текст.
И после этого в окне приложения появится подсчитанный коэффициент контрастности:
А если активировать опцию “Show contrast result for colour blindness”, то можно увидеть,
как такое сочетание цветов текста и фона будет зрительно воспринято людьми,
имеющими различные проблемы со зрением:
Примеры сайтов с низкой и высокой контрастностью текста и фона

С низкой контрастностью:
http://www.aiw-werbung.de/ziele-des-aiw.php
http://akik.de/index.php/informationen.html
http://www.azembassy.de/index.php/botschaft
http://www.staufenberg.de (меню и ссылки)
http://www.waechtersbach-online.de/ (меню и ссылки)
https://profamilia.sextra.de/
http://www.privathandelsschule.de
http://www.orthopaedieschuhtechnik.de/index.php?id=7

С высокой контрастностью:
http://www.tls-gi.de/
http://www.stk-ev.de/

А этот сайт – пример и низкой, и высокой контрастности; смотря в какой пункт
меню перейти 
http://www.staedelschule.de/
И напоследок…
Полезные ссылки на другие инструменты, с помощью которых можно проверить
контрастность:
1. 10 инструментов для проверки контрастности дизайна
2. Accessibility color wheel – инструмент для дизайнеров (т.к. тестировщикам с его
помощью невозможно будет проверить цвета на каком-то конкретном сайте).
Можно либо вручную вводить код цвета, либо выбрать цвета текста и фона на
цветовой палитре.
3. Color Laboratory - цветовая палитра онлайн, позволяющая выбирать цвета и
видеть, как они отображаются в сочетании друг с другом (различные
комбинации background и foreground). Также позволяет увидеть, как эти цвета
будут зрительно восприняты людьми с дефектами зрения. Можно также
выбирать различные виды компьютеров и мониторов.
4. ColorDoctor - симулятор, который конвертирует любые изображения на экране
(веб-сайты и др. презентации) в черно-белые или в цвета, в которых эти
изображения будут видны людьми с дефектами зрения (дальтонизм и пр.)
5. Colour Check - онлайн-проверка контрастности комбинации цветов текста и фона
Источники:
http://vedita.ru/materiali-dizain/osnovnie-priemi-dizaine/index.shtml
http://grafikano.com/?p=1902
http://www.w3.org/TR/WCAG20/