Цвета вашего бренда оказывают сильное эмоциональное воздействие, но как они выглядят для посетителей сайта, которые слабовидящие, дальтоники или сталкиваются с факторами окружающей среды, которые затрудняют видимость?
Уровни цвета и контрастности имеют решающее значение для коммуникации, и правильное получение этих деталей имеет решающее значение для дизайнера, ориентированного на доступность».
Нарушения цветовосприятия встречаются чаще, чем вы думаете. Итак, в этом посте мы поговорим о том, как люди с ограниченными возможностями, такими как слабое зрение, дислексия и дальтонизм, взаимодействуют с Интернетом.
Содержание
Как мне использовать средство проверки цвета, чтобы улучшить доступность моего веб-сайта?
Этот раздел на самом деле довольно прост, хотя и требует некоторых усилий. Вам нужно будет использовать онлайн-инструмент проверки контрастности WebAIM. WebAIM — это некоммерческая организация, базирующаяся в Университете штата Юта, миссией которой является повышение доступности Интернета во всем мире.
Просто введите цвет переднего плана (например, цвет текста или значков) и цвет фона в виде шестнадцатеричных значений (также известных как шестнадцатеричные значения), как указано в разделе HTML или CSS, и средство проверки контрастности сообщит вам, достаточно ли этого соотношения. Помните, что минимальный коэффициент контрастности, который вам следует стремиться, составляет 4.5 к 1. Черный текст на белом фоне имеет коэффициент контрастности 21 к 1, поэтому у вас есть большая свобода действий.
5 инструментов для создания веб-цветовой палитры, доступной каждому
1. Средство проверки цветового контраста WebAIM
Введите шестнадцатеричные цвета для переднего плана и фона. В выводе показано соответствие AA и AAA для обычного и крупного текста, а также образец предложения. Слайдеры позволяют вам что-то менять, пока не найдете подходящую комбинацию.
Сильные стороны
- Простой инструмент с приятным для глаз интерфейсом.
- Это хороший и простой инструмент для начинающих, и не только дизайнеров.
Слабые стороны
- Нельзя сравнивать больше двух цветов, только два.
- Ползунок яркости — не очень хороший способ выбора цвета. Трудно сказать, насколько привлекательны цвета на этом простом дисплее.
2. Проверка контрастности для WCAG
Введите шестнадцатеричные цвета для переднего плана и фона. Показывает соответствие AA и AAA для обычного и крупного текста рядом с образцом текста Lorem Ipsum. Вы также можете загрузить изображение. Палитра из 9 цветов выбирается для вас автоматически. Затем вы можете сравнить каждый цвет как цвет переднего плана или как цвет фона.
Сильные стороны
- Простой инструмент с удобным интерфейсом.
- Иметь возможность составлять палитры из изображений.
Слабые стороны
- Палитра выбирается автоматически, и вы можете изменить ее с помощью палитры цветов, но эти изменения не сохраняются обратно в палитру. Необходимо скопировать и вставить информацию в новый документ.
3. Цветной куб
Введите цвета палитры, каждый в отдельной строке. В выводе показаны образцы букв с коэффициентами контрастности по сравнению со стандартами АА для мелких и крупных шрифтов. В трех столбцах показан контраст с белым фоном, черным фоном и набором фирменных цветов, которые являются «Наиболее разборчивыми из доступных».
Сильные стороны
- Наглядно. Пользовательский интерфейс хорошо организован, и легко увидеть статус «пройден/не пройден/пограничный».
Слабые стороны
- Не соответствует стандартам, установленным AAA.
- Не поддерживает все возможные цветовые комбинации, и сначала неясно, так ли это.
4.) Контрастная сетка из восьми фигур
Введите цвета палитры. Кроме того, вы можете дать каждому цвету имя. Приложение создает таблицу со всеми возможными комбинациями цветов. Есть три размера плитки. Имеются визуальные подсказки для соответствия/несоответствия/края AA и AAA, а также эффективного коэффициента контрастности. Столбцы и строки можно перемещать в приложении путем перетаскивания. Табличные данные можно сохранять, экспортировать и совместно использовать.
Сильные стороны
- Есть много полезных функций, которые помогают при анализе целых палитр.
Слабые стороны
- Его сложнее изучить, чем другие инструменты, которые проще использовать.
- Неправильный способ сравнивать только два цвета.
- Не подходит для выяснения того, как цвета сочетаются друг с другом.
- Немного сложновато смотреть, но информации показано много.
5. Безопасный цвет
Введите цвет фона. Выберите семейство, размер и насыщенность шрифта. Выберите AA или AAA в качестве стандарта. Показывает выбранный цвет и его шестнадцатеричный код, а также образец и эффективный коэффициент контрастности. Самое приятное — большие миниатюры возможных цветов переднего плана с достаточным контрастом. Вы можете просмотреть их все или только определенные цветовые группы (зеленый, синий, фиолетовый и т. д.).
Сильные стороны
- Благодаря приятному для глаз интерфейсу легко найти комбинацию цветов, которая хорошо выглядит и работает.
- Это полезный инструмент, если у вас еще нет цветовой палитры бренда или вы хотите добавить ее к уже имеющейся в Интернете.
Слабые стороны
- Одновременно можно сравнивать только цвета переднего плана и фона.
- Вам придется скопировать и вставить цвета в отдельный документ, если вы хотите их сохранить.
- Выйдите и сделайте что-нибудь для всех!
Как только вы научитесь использовать эти инструменты, вы можете обнаружить, что для проекта вам понадобится более одного. Возможно, Color Cube — лучший способ показать клиенту, что вы узнали о доступности. Возможно, вы будете постоянно использовать инструмент WebAIM для быстрой выборочной проверки.
Заключение
Используя советы, рекомендации и инструменты, о которых мы только что говорили, вы можете придать своему сайту высококонтрастные цвета и метки. Это облегчит чтение вашего веб-сайта и контента людям с плохим зрением, дислексией и дальтонизмом. Не удивляйтесь, если вашей широкой аудитории также будет проще пользоваться вашим веб-сайтом.
