10 лучших инструментов доступности для дизайнеров
Сегодня мир инклюзивных технологий – веб-сайтов, приложений и технических устройств, созданных для людей с различными способностями и ограниченными возможностями. Поэтому, когда вы разрабатываете веб-сайт, вы включаете функции, которые делают ваш дизайн доступным как можно большему количеству людей. И здесь в игру вступают инструменты доступности.
Искусственный интеллект поможет тебе заработать!
Вместо того, чтобы создавать все с нуля, вот список классных инструментов доступности для дизайнеров. От создания цветовых комбинаций в соответствии со стандартами WCAG до добавления различных режимов чтения на ваш веб-сайт, эти инструменты являются обязательными для каждого дизайнера. Взгляните на список, чтобы узнать подробнее о каждом инструменте.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
1. Старк
Stark – многофункциональный инструмент специальных возможностей, который помогает веб-дизайнерам и дизайнерам мобильных устройств добавлять функции специальных возможностей в свой дизайн пользовательского интерфейса, чтобы их дизайн работал на всех. Независимо от того, разрабатываете ли вы продукт с нуля или обновляете существующую систему дизайна, это дает вам беспроблемный способ создавать доступные продукты на любом уровне.
Одна из лучших особенностей этого инструмента – то, что он легко интегрируется с Figma, Sketch, Adobe XD и Google Chrome, а читатели поддерживают его на протяжении всего жизненного цикла продукта. Некоторые из функций доступности, которые инструмент может добавить в ваш дизайн, – это проверка контракта, генератор дальтонизма, быстрая проверка контраста и многое другое.
- Поддерживает: Figma, Adobe XD, Sketch.
- Старк Цена: Бесплатно
- Премиум-приложение / подписки? Да (Проверить цены)
2. 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: бесплатно
- Премиум-приложение / подписки? Нет
Когда вы работаете над огромным проектом по дизайну веб-приложения или мобильного приложения, у вас есть множество вариантов цветовых комбинаций. Contrast Grid – это инструмент, который позволяет вам протестировать ряд комбинаций цветов переднего плана и фона.
Веб-инструмент имеет простой интерфейс, в котором вы можете вручную ввести разные цвета, которые вы хотите использовать в качестве строк и столбцов, и он создаст сетку, соответствующую требованиям WCAG 2.) минимальной контрастности. Затем вы можете скопировать код сетки для HTML или CSS и даже поделиться своей сеткой в Twitter.
- Поддерживает: Браузер
- Стоимость Contrast Grid: Бесплатно
- Премиум-приложение / подписки? Нет
8. Clrs.cc
Clrs.cc – это своего рода библиотека или хранилище различных цветовых комбинаций, которые дают вам хорошую дозу вдохновения для создания доступного пользовательского интерфейса для дальтоников или людей с ослабленным зрением. От светлого до темного фона вы найдете множество интересных вариантов цветовых комбинаций.
Всего на сайте представлено 90 цветовых комбинаций с соответствующими значениями контрастности, а также значениями AA или AAA. Вы можете выбрать любой из этих соотношений фона к тексту или просто смешать и сопоставить, чтобы создать свой собственный.
- Поддерживает: Браузер
- Clrs.cc Цена: Бесплатно
- Премиум-приложение / подписки? Нет
Who Can Use – интересный инструмент, который помогает веб-дизайнерам и графическим дизайнерам понять, как различные цветовые комбинации и цветовые контрасты влияют на людей с различными нарушениями зрения. Использование таких плагинов, как Chroma.js и Color-blind, помогает сделать ваш дизайн доступным для всех.
Принимая во внимание рекомендации WCAG, этот интуитивно понятный инструмент имеет палитру цветов фона с ползунком и сообщает вам коэффициент контрастности и оценку WCAG для каждого цвета. Более того, с каждым цветом вы можете увидеть, как этот цвет будет восприниматься людьми с разным типом зрения, во время моделирования.
- Поддерживает: Браузер
- Кто может использовать Цена: Бесплатно
- Премиум-приложение / подписки? Нет
10. Цветная коробка
Colorbox – это простой инструмент, который позволяет вам создавать цветовые комбинации для доступных пользовательских интерфейсов, которые делают ваш сайт пригодным для использования пользователями с ослабленным зрением. Вы можете выбрать один или несколько цветов и вручную добавить значения оттенка, насыщенности и яркости.
Инструмент также позволяет вам импортировать цветовые коды, чтобы получить соответствующие параметры сочетания цветов, возможность экспортировать информацию о выбранном цвете в виде цветовых кодов, которые вы можете интегрировать в свой веб-дизайн, а также поделиться URL-адресом выбранной вами информации о цвете.
- Поддерживает: Браузер
- Цена ColorBox: Бесплатно
- Премиум-приложение / подписки? Нет
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)