Вашему вниманию предлагается перевод статьи 10 colour contrast checking tools to improve the accessibility of your design от Roger Johansson. Перевод alexbig
В моей повседневной работе мы создаём графический дизайн для большинства сайтов наших клиентов, но не для всех. Некоторые из них сами или с помощью дизайн студий делают визуальный дизайн и оставляют переход на HTML + CSS + JavaScript и CMS для нас. Когда такое происходит, я практически всегда сталкиваюсь с проблемами недостаточного цветового контраста в дизайне. Иногда эти проблемы достаточно второстепенные и допустимые, но зачастую, есть области, которые необходимо скорректировать.
Если вам интересно, почему меня волнует (и почему я думаю, что вы должны заботиться о) цветовом контрасте веб-сайта — очень просто. Если текст не имеет достаточного контраста со своим фоном — у людей возникнут проблемы. Все, кто страдает дальтонизмом или те, кто бороздят Веб не в идеальных условиях (плохой монитор, отражение окон, блики от солнца) не смогут прочитать текст, по крайней мере, без трудностей.
А вы ведь, не хотите этого, верно? Если вы публикуете какой-нибудь текст на сайте, как делают большинство из нас, я предполагаю, это потому, что вы хотите, чтобы его прочитали. Поэтому цветовой контраст, думаете ли вы о нём или нет — очень важен для вас, ваших клиентов и конечных пользователей.
Я настолько привык проверять контраст любого дизайна сделанного мной или с моей помощью, что считаю это само собой разумеющимся, что должен делать каждый из нас. По-видимому, это не так, и, мне кажется, я должен поделиться с вами списком инструментов, которые помогут проверить контраст цвета. Об этом статья.
Очень краткое объяснение того, как правильно рассчитываются цветовые коэффициенты: есть несколько различных алгоритмов, некоторые приложения используют алгоритм коэффициента отношения яркости (luminosity contrast ratio algorithm) упомянутый в WCAG 2.0 черновике, в то время как другие используют алгоритм яркости цвета и цветовой разницы (colour brightness and colour difference algorithms), упомянутый в сопровождающем документе WCAG 1.0. Некоторые из них используют оба.
Замечу, что что ни один из них не одобрен W3C (по крайней мере пока), но они вполне пригодны для определения того, сможет ли сочетание цвета текста и фона вызвать проблемы у дальтоников или людей с другими нарушениями зрения.
Упомянув всё это, перейдём к самим инструментам. Некоторыми из них можно пользоваться через веб, в то время как другие — отдельные приложения или дополнения к браузерам.
А вот и список:
Все инструменты упомянутые здесь мной — бесплатные, поэтому попробуйте их все, чтобы найти то, что подойдёт вам в повседневной работе. Я не думаю, что есть большая разница, что именно вы будете использовать, чтобы определить коэффициент контрастности и с имитировать дальтонизм приложением.
Инструменты для симулирования дальтонизма дадут вам понять, как действительно может быть тяжело для человека, страдающего этим, отличить ссылки, которые различаются только цветом от окружающих их текста.
Наконец, я не думаю что результатам этих приложений (или, скорее, алгоритмов, которыми они пользуются) нужно слепо следовать. Крупные заголовки и текст, который не имеет важное значение могут и не пройти тест, в то время как, основной текст (например, текст написанной статьи) — обязательно.
Используйте эти результаты как руководство к действию, приложите сюда свой здравый смысл, и у вас получится найти баланс между здравым контрастом и приятной эстетикой.
От alexbig: чтобы не искать косяки после дизайна — делайте правильно с самого начала (или объясните дизайнерам как этим пользоваться, если это не зависит от вас!).
10 инструментов проверки контраста вашего дизайна для улучшения его „читабельности“
В моей повседневной работе мы создаём графический дизайн для большинства сайтов наших клиентов, но не для всех. Некоторые из них сами или с помощью дизайн студий делают визуальный дизайн и оставляют переход на HTML + CSS + JavaScript и CMS для нас. Когда такое происходит, я практически всегда сталкиваюсь с проблемами недостаточного цветового контраста в дизайне. Иногда эти проблемы достаточно второстепенные и допустимые, но зачастую, есть области, которые необходимо скорректировать.
Если вам интересно, почему меня волнует (и почему я думаю, что вы должны заботиться о) цветовом контрасте веб-сайта — очень просто. Если текст не имеет достаточного контраста со своим фоном — у людей возникнут проблемы. Все, кто страдает дальтонизмом или те, кто бороздят Веб не в идеальных условиях (плохой монитор, отражение окон, блики от солнца) не смогут прочитать текст, по крайней мере, без трудностей.
А вы ведь, не хотите этого, верно? Если вы публикуете какой-нибудь текст на сайте, как делают большинство из нас, я предполагаю, это потому, что вы хотите, чтобы его прочитали. Поэтому цветовой контраст, думаете ли вы о нём или нет — очень важен для вас, ваших клиентов и конечных пользователей.
Я настолько привык проверять контраст любого дизайна сделанного мной или с моей помощью, что считаю это само собой разумеющимся, что должен делать каждый из нас. По-видимому, это не так, и, мне кажется, я должен поделиться с вами списком инструментов, которые помогут проверить контраст цвета. Об этом статья.
Очень краткое объяснение того, как правильно рассчитываются цветовые коэффициенты: есть несколько различных алгоритмов, некоторые приложения используют алгоритм коэффициента отношения яркости (luminosity contrast ratio algorithm) упомянутый в WCAG 2.0 черновике, в то время как другие используют алгоритм яркости цвета и цветовой разницы (colour brightness and colour difference algorithms), упомянутый в сопровождающем документе WCAG 1.0. Некоторые из них используют оба.
Замечу, что что ни один из них не одобрен W3C (по крайней мере пока), но они вполне пригодны для определения того, сможет ли сочетание цвета текста и фона вызвать проблемы у дальтоников или людей с другими нарушениями зрения.
Упомянув всё это, перейдём к самим инструментам. Некоторыми из них можно пользоваться через веб, в то время как другие — отдельные приложения или дополнения к браузерам.
А вот и список:
- Colour Contrast Check: Первый действительно интуитивный онлайн инструмент от Jonathan Snook для проверки цвета который я знаю, позволяет вам внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает как выглядит эта комбинация и проходит ли она тест.
- Colour Contrast Analyser: Gez Lemon’s Colour Contrast Analyser использует тот же алгоритм что и первый, поэтому результаты должны быть одинаковыми. Разница в том, что тут нет моментального эффекта и никаких слайдеров. Это значит, что вам нужно сначала ввести значения в форму и отправить её, чтобы увидеть что получилось.
- Colour Contrast Visualiser: используя несколько иной подход, Tom Hooper’s Colour Contrast Visualiser помогает вам найти приемлимые сочетания цветов выделяя цвета, дающие достаточный контраст цветовой палитре. Colour Contrast Visualiser доступен в форматах Flash и Adobe AIR, установите соответствующие дополнения (плагины) для работы, если их нет.
- Colour Contrast Analyser Firefox Extension: вместо того, чтобы вводить цвета вручную, Gez Lemon’s плагин для Firefox найдёт все текстовые элементы в документе и проверит разницу фона и цвета текста. Результаты он откроет в новом табе, с пред-просмотром цветов. Это может показаться немного утомительным, но это хороший способ поиска проблематичных мест в дизайне. К сожалению, этот инструмент не распознаёт изображения, поэтому используйте его на HTML документе без графики.
- CSS Analyser: ещё один инструмент от Gez Lemon, the CSS Analyser, который тестирует цветовой контраст вашего CSS. Он также валидирует CSS и проверяет чтобы соответствующий размер текста был указан в относительных единицах.
- Luminosity Contrast Ratio Analyser: этот инструмент был также сделан Gez Lemon — проверяет цвет переднего и заднего фона по алгоритму разработанному Trace R&D Center.
- Vischeck: симулятор дальтоника, который можно использовать онлайн или как дополнение к Photoshop (появится в меню „Фильтр“). Онлайн версия симулирует эффект на основе изображения, которое вы загрузите, а плагин к Photoshop меняет цвета документа, над которым вы работаете.
- Contrast Analyser, Version 2.0: приложения для Windows и Mac OS X. Очень изящное приложение, которое довольно много умеет делать кроме анализа веб-страницы за вас. Вы можете указать цвет переднего и заднего фона цифрами или слайдерами, задать какой алгоритм применить — цвет/яркость или освещённость, затем проверит и покажет выбранные цвета в сравнении с разными типами нарушения зрения.
- Graybit: онлайн инструмент, авторы: Jona Fenocchi и Mike Cherim. Делает то, о чём говорит вам название — вы вводите URL к веб-странице, которая будет превращена в оттенки серого и показана в браузере.
- Sim Daltonism: доступна только для Mac OS X, это приложение не вычисляет контраст, но делает кое-что полезное. Оно симулирует разные виды дальтонизма в реальном времени, что даёт возможность легко проверить, создаёт ли дизайн проблемы.
Все инструменты упомянутые здесь мной — бесплатные, поэтому попробуйте их все, чтобы найти то, что подойдёт вам в повседневной работе. Я не думаю, что есть большая разница, что именно вы будете использовать, чтобы определить коэффициент контрастности и с имитировать дальтонизм приложением.
Инструменты для симулирования дальтонизма дадут вам понять, как действительно может быть тяжело для человека, страдающего этим, отличить ссылки, которые различаются только цветом от окружающих их текста.
Наконец, я не думаю что результатам этих приложений (или, скорее, алгоритмов, которыми они пользуются) нужно слепо следовать. Крупные заголовки и текст, который не имеет важное значение могут и не пройти тест, в то время как, основной текст (например, текст написанной статьи) — обязательно.
Используйте эти результаты как руководство к действию, приложите сюда свой здравый смысл, и у вас получится найти баланс между здравым контрастом и приятной эстетикой.
От alexbig: чтобы не искать косяки после дизайна — делайте правильно с самого начала (или объясните дизайнерам как этим пользоваться, если это не зависит от вас!).
