10 инструментов проверки контраста вашего дизайна для улучшения его „читабельности“

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

А вы ведь, не хотите этого, верно? Если вы публикуете какой-нибудь текст на сайте, как делают большинство из нас, я предполагаю, это потому, что вы хотите, чтобы его прочитали. Поэтому цветовой контраст, думаете ли вы о нём или нет — очень важен для вас, ваших клиентов и конечных пользователей.

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

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

: Первый действительно интуитивный онлайн инструмент от Jonathan Snook для проверки цвета который я знаю, позволяет вам внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает как выглядит эта комбинация и проходит ли она тест. : Gez Lemon’s Colour Contrast Analyser использует тот же алгоритм что и первый, поэтому результаты должны быть одинаковыми. Разница в том, что тут нет моментального эффекта и никаких слайдеров. Это значит, что вам нужно сначала ввести значения в форму и отправить её, чтобы увидеть что получилось. : используя несколько иной подход, Tom Hooper’s Colour Contrast Visualiser помогает вам найти приемлимые сочетания цветов выделяя цвета, дающие достаточный контраст цветовой палитре. Colour Contrast Visualiser доступен в форматах Flash и Adobe AIR, установите соответствующие дополнения (плагины) для работы, если их нет. : вместо того, чтобы вводить цвета вручную, Gez Lemon’s плагин для Firefox найдёт все текстовые элементы в документе и проверит разницу фона и цвета текста. Результаты он откроет в новом табе, с пред-просмотром цветов. Это может показаться немного утомительным, но это хороший способ поиска проблематичных мест в дизайне. К сожалению, этот инструмент не распознаёт изображения, поэтому используйте его на HTML документе без графики. : ещё один инструмент от Gez Lemon, the CSS Analyser, который тестирует цветовой контраст вашего CSS . Он также валидирует CSS и проверяет чтобы соответствующий размер текста был указан в относительных единицах. : этот инструмент был также сделан Gez Lemon — проверяет цвет переднего и заднего фона по алгоритму разработанному Trace R&D Center. : симулятор дальтоника, который можно использовать онлайн или как дополнение к Photoshop (появится в меню „Фильтр“). Онлайн версия симулирует эффект на основе изображения, которое вы загрузите, а плагин к Photoshop меняет цвета документа, над которым вы работаете. : приложения для Windows и Mac OS X. Очень изящное приложение, которое довольно много умеет делать кроме анализа веб-страницы за вас. Вы можете указать цвет переднего и заднего фона цифрами или слайдерами, задать какой алгоритм применить — цвет/яркость или освещённость, затем проверит и покажет выбранные цвета в сравнении с разными типами нарушения зрения. : онлайн инструмент, авторы: Jona Fenocchi и Mike Cherim. Делает то, о чём говорит вам название — вы вводите URL к веб-странице, которая будет превращена в оттенки серого и показана в браузере. : доступна только для Mac OS X, это приложение не вычисляет контраст, но делает кое-что полезное. Оно симулирует разные виды дальтонизма в реальном времени, что даёт возможность легко проверить, создаёт ли дизайн проблемы.

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

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

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

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

От alexbig: чтобы не искать косяки после дизайна — делайте правильно с самого начала (или объясните дизайнерам как этим пользоваться, если это не зависит от вас!).