Ръководство за достъпност на цветовете в дизайна на продукта

Много се говори за достъпен дизайн, но мислили ли сте някога за достъпността на цветовете?

Наскоро клиент представи проект с много специфични, сложни реализации на достъпна цветова система. Това отвори очите ми не само за това колко важен е този предмет, но и колко има какво да науча.

Тази история е на Джъстин Рейна

Нека научим как да достигате цветове, като използвате принципите на дизайна, които вече знаете.

Защо достъпността е толкова важна?

Достъпността в дигиталния дизайн на продукти е практиката да се изработват преживявания за всички хора, включително тези от нас със зрителни, речеви, слухови, физически или когнитивни увреждания. Като дизайнери, разработчици и общотехнологични хора, ние имаме силата да създадем мрежа, с която всички се гордеем: приобщаваща мрежа, създадена и консумируема от всички хора.

Освен това не създаването на достъпни продукти е просто грубо, така че не бъдете груби.

Достъпността на цветовете дава възможност на хората с увреждания на зрението или недостатъците на цветното зрение да взаимодействат с цифровите преживявания по същия начин, както техните колеги, които нямат зрение. През 2017 г. Световната здравна организация изчисли, че приблизително 217 милиона души живеят с някаква форма на умерено до тежко увреждане на зрението. Тази статистика сама по себе си е достатъчна причина да се проектира за достъпност.

„Да не създавате достъпни продукти е просто грубо, така че не бъдете груби.“

Освен че достъпността е най-добрата етична практика, има и потенциални правни последици за неспазване на регулаторните изисквания относно достъпността. През 2017 г. ищците заведоха поне 814 федерални дела за предполагаеми недостъпни уебсайтове, включително редица класни искове. Различни организации се стремят да установят стандарти за достъпност, най-вече Съветът за достъп на САЩ (Раздел 508) и Консорциумът за световна мрежа (W3C). Ето преглед на тези стандарти:

  • Раздел 508: 508 съответствие се отнася до раздел 508 от Закона за рехабилитация от 1973 г. Можете да прочетете задълбочената наредба тук, но за да обобщим, раздел 508 изисква сайтът ви да е достъпен, ако сте федерална агенция или създавате сайтове в име на федерална агенция (като изпълнители).
  • W3C: Консорциумът от World Wide Web (W3C) е международна доброволна общност, която е създадена през 1994 г. и разработва отворени стандарти за мрежата. W3C очертава техните насоки за достъпност в мрежата в рамките на WCAG 2.1, което по същество е златният стандарт за най-добрите практики за достъпност в мрежата.

Гарантиране на това, че вашият продукт е достъпен за цвят

Отчитането на достъпността в началото на жизнения цикъл на продукта е най-доброто - намалява времето и парите, които ще отделите, за да направите продуктите си достъпни със задна дата. Достъпността на цветовете изисква малко работа с предни позиции, когато избирате цветовата палитра на вашия продукт, но ако се гарантира, че цветовете ви са достъпни, ще изплатите дивиденти по пътя.

Ето няколко бързи съвета, за да гарантирате, че създавате продукти, достъпни за цветове.

Добавете достатъчно контраст

За да отговаряте на минималната AA степен на W3C, съотношението на фона на текст трябва да бъде най-малко 4,5: 1. Така че, когато проектирате неща като бутони, карти или навигационни елементи, не забравяйте да проверите съотношението на контраста на цветовите си комбинации.

Има много инструменти, които ще ви помогнат да тествате достъпността на цветовите комбинации, но тези, които намерих най-полезни, са Colorable и Colorsafe. Харесва ми Colorable, защото има плъзгачи, които ви позволяват да регулирате Hue, Saturation и Brightness в реално време, за да видите как влияе на оценката на достъпността на определена цветова комбинация.

Не разчитайте само на цвета

Можете също така да осигурите достъпност, като се уверите, че не разчитате на цвят, за да препредавате важна информация за системата. Така че за неща като състояния на грешки, състояния на успех или системни предупреждения, не забравяйте да включите съобщения или иконография, които ясно показват какво се случва.

Също така, когато се показват неща като графики или диаграми, предоставянето на потребителите на възможност да добавят текстура или шарки гарантира, че тези, които са с цветни слепи, могат да разграничават помежду си, без да се притесняват от цвета, засягащ възприемането на данните. Trello се справя чудесно с това със своя Colorblind-Friendly режим.

Контраст на състоянието на фокуса

Състоянията на фокус помагат на хората да навигират в сайта ви с клавиатура, като им дават визуален индикатор около елементи. Те са полезни за хора със зрителни увреждания, хора с двигателни увреждания и хора, които просто обичат да навигират с клавиатура.

Всички браузъри имат цвят по подразбиране на състоянието на фокуса, но ако планирате да отмените това във вашия продукт, е от изключително значение да осигурите достатъчно цветен контраст. Това гарантира, че хората със зрителни увреждания или цветови недостатъци могат да се движат със състояния на фокус.

Документирайте и социализирайте цветовата система

И накрая, най-важният аспект на създаването на достъпна цветова система е даването на възможност на вашия екип да го препраща при необходимост, така че на всички да е ясно за правилното използване. Това не само намалява объркването и изтръпването, но също така гарантира, че достъпността винаги е приоритет за вашия екип. Според мен изрично извикването на категорията за достъпност на конкретна комбинация от цветове в UI Kit или Design System е най-ефективно, особено когато се социализира това в екипа с инструмент (като InVision Craft или InVision DSM). Ето пример за това как да документирате комбинации от фон към цветовете на текста и оценката на достъпността на всяка комбинация.

Нека бъдем достъпни

Това са само няколко съвета, за да направите продукта си по-достъпен, но имайте предвид, че те се отнасят само за достъпността на цветовете. За да разберете подробно указанията за достъпност, препоръчвам да се запознаете с WCAG 2.1. Въпреки че тези указания могат да бъдат малко обезсърчаващи, има много ресурси, които да ви помогнат по пътя и когато се съмнявате, не се колебайте да се обърнете към дизайнерите във вашия район (или чрез интернет) за помощ.

Хареса ли ви този пост? Прочетете повече като Inside Design, нов блог от InVision.

Първоначално публикуван в invisionapp.com.