Перевод статьи «4 Tools to Improve Your Website Color Accessibility».
В этой статье я поделюсь инструментами, которые помогли мне улучшить доступность моего сайта. Речь пойдет о цветовых решениях. Представленные инструменты помогают достичь наилучшего контраста между текстом (иллюстрациями) и фоном.
Я, конечно, знаю, что доступность — это не только контрастность цветов. Для ее обеспечения нужно учитывать много разных факторов. Я решил остановиться на вопросе цвета, потому что это одна из вещей, которые можно исправить легко и быстро.
1. Color.review
Этот инструмент позволяет в режиме реального времени проверять контрастность цветов на примере текста. При этом можно переключаться между RGB и CSS-цветами.
Что мне особенно нравится, это возможность скопировать ссылку на цвета в текущей сессии и посмотреть, соответствуют ли стандартам текст и заголовок.
Дополнительный плюс — в примерах есть не только текст, но и картинки, так что можно подобрать цвет фона, подходящий и для текста, и для иллюстраций.
2. Color Safe
Особенность этого инструмента в том, что он позволяет подобрать шрифт, похожий на тот, который мы собираемся использовать на своем сайте. Мы задаем цвет фона, шрифт, размер и жирность шрифта, и на основе всего этого генерируется подходящая палитра цветов.
Таким образом можно, например, подбирать цвета для кнопок, чтобы улучшить их читаемость.
3. Contrast Ratio
Если вы хотите быстро и просто просматривать, как подобранные вами цвета выглядят вместе, Contrast Ratio поможет вам в этом.
Из всех инструментов, перечисленных в статье, этот — самый популярный в среде моих коллег. Он допускает указание цветов в любом формате (Hex, RGBA и т. д.) и имеет хороший набор шрифтов и начертаний. Благодаря всему этому можно играться с цветами и одновременно следить за читаемостью текста.
4. A11yEngineer
На этой платформе есть чеклист вещей, которые нужно учесть до написания кода. Выбрав любой элемент (компонент) из списка, вы получаете описание его желаемого поведения в контексте доступности. К описанию прилагается ссылка на примеры идеального вида элемента, а также примеры кода.
Заключение
Надеюсь, этот коротенький обзор поможет вам создавать приложения с лучшей контрастностью цветов. Если вы пользуетесь каким-то другим инструментом, не вошедшим в этот список, поделитесь в комментариях!
