10 лучших инструментов доступности для дизайнеров

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

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

1. Старк
Старк

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

Одна из лучших особенностей этого инструмента – то, что он легко интегрируется с Figma, Sketch, Adobe XD и Google Chrome, а читатели поддерживают его на протяжении всего жизненного цикла продукта. Некоторые из функций доступности, которые инструмент может добавить в ваш дизайн, – это проверка контракта, генератор дальтонизма, быстрая проверка контраста и многое другое.

  • Поддерживает: Figma, Adobe XD, Sketch.
  • Старк Цена: Бесплатно
  • Премиум-приложение / подписки? Да (Проверить цены)

2. ColorSafe
ColorSafe

Чтобы сделать ваш веб-сайт доступным для пользователей с различными визуальными возможностями, ColorSafe предлагает набор функций, которые очень легко интегрировать в ваш дизайн. Он позволяет создавать визуально красивые и функционально доступные цветовые палитры, а также коэффициенты контрастности текста и фона на основе рекомендаций WCAG.

Работа с этим инструментом довольно проста. Все, что вам нужно сделать, это ввести цвет фона и определить стиль вашего текста, а ColorSafe сделает все остальное. Определив коэффициент контрастности текста и фона, вы можете применить его в своем дизайне и протестировать результаты.

  • Поддерживает: Браузер
  • ColorSafe Цена: Бесплатно
  • Премиум-приложение / подписки? Нет

3. Контраст
Контраст

Как следует из названия, Contrast – это инструмент доступности, который устраняет необходимость ручного труда при проверке коэффициента цветовой контрастности и делает это быстро и автоматически. Создан двумя профессиональными дизайнерами, которые знали, насколько остро нужен такой инструмент с точки зрения удобства использования и эстетики.

Этот удобный инструмент предоставляет точную информацию о цветовом контрасте (показатель контрастности) в соответствии со стандартами WCGA и мгновенно обновляет все приложение. Однако на момент написания он доступен только для macOS.

  • Поддерживает: macOS
  • Контрастная цена: $ 6,99.
  • Премиум-приложение / подписки? да

4. Обзор цвета
Обзор цвета

Color Review – это простой веб-инструмент, который помогает вам принять обоснованное решение о том, какие цвета и цветовые комбинации использовать в дизайне пользовательского интерфейса, особенно когда речь идет о создании дизайна для людей, которые воспринимают цвета иначе, чем другие.

Созданный на основе стандартов визуального дизайна WCAG, инструмент работает на двух уровнях: AA и более строгий AAA. Также доступно приложение Color Review для OS X, Windows, iPhone и Android с интересными функциями, такими как образцы и глазные капли, и для его получения требуется регистрация.

  • Поддерживает: Браузер
  • Цена обзора цвета: бесплатно
  • Премиум-приложение / подписки? Нет

5. Красочный
Красочный

Colorable – это веб-тестер контрастности сочетания цветов, который позволяет вам выбрать наиболее подходящий коэффициент контрастности фона и текста для дизайна интерфейса вашего веб-сайта или мобильного приложения. Имея оценку «прошел / не прошел», основанную на рекомендациях WCAG по доступности, вы можете сделать свой пользовательский интерфейс универсально доступным для пользователей, особенно для людей с нарушениями зрения.

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

  • Поддерживает: Браузер
  • Цветная цена: бесплатно
  • Премиум-приложение / подписки? Нет

6. Проект A11y
Проект A11y

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

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

  • Поддерживает: Браузер
  • Стоимость проекта A11y: бесплатно
  • Премиум-приложение / подписки? Нет

7. Контрастная сетка
Контрастная сетка

Когда вы работаете над огромным проектом по дизайну веб-приложения или мобильного приложения, у вас есть множество вариантов цветовых комбинаций. Contrast Grid – это инструмент, который позволяет вам протестировать ряд комбинаций цветов переднего плана и фона.

Веб-инструмент имеет простой интерфейс, в котором вы можете вручную ввести разные цвета, которые вы хотите использовать в качестве строк и столбцов, и он создаст сетку, соответствующую требованиям WCAG 2.) минимальной контрастности. Затем вы можете скопировать код сетки для HTML или CSS и даже поделиться своей сеткой в ​​Twitter.

  • Поддерживает: Браузер
  • Стоимость Contrast Grid: Бесплатно
  • Премиум-приложение / подписки? Нет

8. Clrs.cc
Clrs.cc

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

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

  • Поддерживает: Браузер
  • Clrs.cc Цена: Бесплатно
  • Премиум-приложение / подписки? Нет

9. Кто может использовать
Кто может использовать

Who Can Use – интересный инструмент, который помогает веб-дизайнерам и графическим дизайнерам понять, как различные цветовые комбинации и цветовые контрасты влияют на людей с различными нарушениями зрения. Использование таких плагинов, как Chroma.js и Color-blind, помогает сделать ваш дизайн доступным для всех.

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

  • Поддерживает: Браузер
  • Кто может использовать Цена: Бесплатно
  • Премиум-приложение / подписки? Нет

10. Цветная коробка
Цветная коробка

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

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

  • Поддерживает: Браузер
  • Цена ColorBox: Бесплатно
  • Премиум-приложение / подписки? Нет

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *