4 инструмента для улучшения цветовой доступности сайта

Перевод статьи «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

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

Заключение

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

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

https://beverlywoodbakery.com/ deneme bonusugrandpashabetgrandpashabetgrandpashabet girişküçükçekmece escorthttps://www.bakirkoyfal.com/kagithane escortatakoy escortatakoy escorthttps://halkaliescortmanken.xyz/gaziantep antep escorttempobetdumanbetdeneme bonusu veren sitelerkadıköy escortümraniye escortistanbul escortbasaksehir escortşişli escortonwinjojobethttps://www.escortbayanlariz.net/imajbetmavibetextrabetromabetromabetromabetkartal escorttipobetultrabet twitterbetgaranticasibommecidiyeköy escorthttps://www.newstrendline.com/betkomgrandpashabetdeneme bonusu veren casino sitelericasibomcasibom바카라사이트batumi escortcasibom girişcasibom güncel girişcasibomgrandpashabet güncel girişholiganbetmarsbahishttps://vheshop.com/casibombetwooncasibom girişholiganbetmegabahis girişsekabetmobilbahis girişnakitbahiszbahisbahiscomotobetbetturkeybets10sheratonbetbelugabahis güncel girişcasibommarsbahisdeneme bonusubetcioextrabetimajbetmavibetjokerbetmahmutbey escortDeneme Bonusugrandpashabetdeneme bonusu veren sitelergrandpashabetgrandpashabetcasibom girişgrandpashabetcasino siteleriDeneme Bonusu Veren SitelerAlanya EscortDeneme Bonusu Veren SitelervaycasinonakitbahisJojobetGrandpashabetbetgaranti girişholiganbet girişgrandpashabetsekabetholiganbet girişmarsbahisbetgarantimariobetonwinsekabet girişdeneme bonusu veren siteler resmiiiiiicasibom girişmarsbahismarsbahissekabetatlasbet girişgrandpashabetbahis sitelericratosroyalbetcratosroyalbet girişdeneme bonusu veren sitelercanlı bahisgrandpashabetdeneme bonusu veren sitelerholiganbetmadridbetCanlı Casinodeneme bonusu veren sitelertempobetbankobethitbetpinbahisankara çekicitempobetdeneme bonusu veren sitelercanlı casinojojobetrestbetHoliganbetGüvenilir bahis siteleriitipobetsekabetmarsbahismatbet girişvaycasino girişvaycasino güncel girişbaklava
Прокрутить вверх