Използване на контраст с висок цвят за по-достъпен дизайн
Високото ниво на отпадане често е причинено от лошата визуална достъпност на даден уебсайт. Когато шрифтовете са твърде малки или почти не се четат, когато има прекалено много отвличания или недостатъчно празно пространство, много хора просто напуснете сайта без да се замисляте.
Една от най-честите причини за ранно изоставяне е лошо избраната цветови схеми, които намаляват четливостта на съдържанието.
Според статистиката на СЗО по света има около 285 милиона хора с увредено зрение, много от които са частично или напълно слепи. Визуалните хора с увреждания виждат цветовете по различен начин избягване на нисък цветен контраст в нашите проекти е неизбежно, ако искаме да предоставим на нашите клиенти достъпна и лесна за употреба уебсайт.
Уеб стандарти за цветен контраст
Съотношение на цветен контраст измерва разликата в контраст между два цвята. Колкото по-висока е стойността, толкова по-лесно е да разграничите обекта (текст, изображение, графика) на преден план от фона.
Цветовете могат да се различават по много различни начини, като например в оттенък, стойност и насищане. Съотношението на цветовия контраст се изчислява по формула, предоставена от W3C, основната международна организация за стандарти за World Wide Web.
Тя може да приеме стойност между 1: 1 (никакъв контраст, на преден план и на фона са един и същи цвят) и 21: 1 (максималния контраст който съществува само между черно и бяло).
Най-новите насоки за достъпност на уеб съдържанието на W3C (WCAG) 2.0 осигуряват на уеб разработчиците и създателите на съдържание бенчмарки за минимално ниво (ниво АА) и за повишената (ниво ААА) стойност на приемливото съотношение на цветовия контраст..
Ниво АА изисква поне Съотношение 4.5: 1 за обикновен текст, и 3: 1 за голям текст. Много по-лесно е да се чете голям текст като субтитри, затова се нуждае от по-нисък цветен контраст.
Ако искате да достигнете ниво ААА, което е подобрено ниво, трябва да проектирате цветовата си схема с по-голяма грижа, тъй като изисква поне Съотношение на контраст 7: 1 за нормален текст, и 4.5: 1 за големи. Ако текстът е част от лого или марка, няма изискване за минимален цветен контраст на нивото на WCAG.
Можем само да наричаме уебсайт визуално достъпен, ако съотношението на цветовия контраст между всеки обект на преден план и неговия фон достига поне ниво АА.
Предимства на контраста на висок цвят
Като осигурявате по-добра четливост, не се занимавате само с потребители със зрителни увреждания, но също така хора, които четат съдържанието ви на малки екрани като например на смартфон или смарт часовник, сред лоши светлинни условия, и нататък монитори с по-ниско качество.
Хората също така четат по-бързо, когато има по-висок контраст между текста и фона, така че най-вероятно ще им отнеме повече време да се отегчи от съдържанието на сайта.
Ако се притеснявате, че прилагането на по-висок коефициент на контраст ще окаже отрицателно въздействие върху естетиката на вашия дизайн, трябва да проверите уеб проекта Contrast Rebellion, който доказва, с примери от реалния живот, че придържането към правилата за висок контраст все още може да доведе в атрактивен и готин дизайн.
Приложения за проверка на контраста на цветовете
Има много чудесни безплатни инструменти в мрежата, които могат да помогнат на дизайнерите да проверят съотношението на цветовия контраст на уебсайта си.
Най-лесният начин да тествате дизайна си за цветен контраст е да изберете основните цветове с Photoshop или подходящо разширение на браузъра, като това за Firefox, и да копирате стойностите в едно от приложенията по-долу.
Най-важното нещо, което трябва да запомните е, че винаги трябва сравнете цвета на преден план, като например цвета на текста, към заобикалящата го област (цвят на фона).
1. WebAim контролер за контраст на цвета
WebAim (Web Accessibility In Mind) е организация, насърчаваща уеб достъпността, която предлага на разработчиците прост, но надежден контролер за цветен контраст сред много други инструменти за достъпност, като Wave, приложение за оценка на достъпността, което може да ви помогне бързо оценявайте проблемите с достъпността на сайта си.
Контролерът за контраст на цвета на WebAim ви казва ако цветовете ви преминават тестовете WCAG AA и AAA, както за нормални, така и за големи текстове.
2. Проверете за контраст на цвета
Джонатан Снук, който в момента работи като водещ разработчик в Shopify, е домакин на своя удобен инструмент за проверка на цветовия контраст повече от десетилетие. Приложението на Snook ви позволява промяна на стойностите на HSL и RGB на цвят на преден план и фон един по един, като се използва удобни плъзгачи докато не постигнете резултат, който е съвместим с бенчмарковете на WCAG 2.0.
CheckMyColours
CheckMyColours, създаден от Giovanni Scala, ви позволява да проверите съотношението на цветовия контраст на всички цветови комбинации от преден план. на уебсайт на живо.
Той изчислява контраст на яркостта, разлика в яркостта, и разлика в цвета, и ви предоставя пълен отчет за резултатите. Отчетът CheckMyColours може значително да улесни разбирането ви за това как можете да подобрите визуалната достъпност на сайта си.
Дизайнер на цветова схема
Color Scheme Designer не е специално за проверка на цветовия контраст, а за инструмент проектиране на цялостни цветови схеми.
Ние я включваме в тази колекция, защото има функция, която ви позволява да видите как цветовата ви схема се възприема от хора с различни видове зрителни увреждания. Можете да тествате цветовете си за пълна цветна слепота, протанопия, деутеранопия и много други зрителни увреждания. Приложението има по-нова версия, наречена Paletton, която прави възможно дори по-усъвършенствана симулация на визията (можете също да тествате неща като лош LED дисплей или слаб CRT дисплей).
W3C ви предоставя и огромен списък с инструменти за оценка на достъпността на мрежата, където можете да намерите много други инструменти за цветен контраст, като този полезен цветен диск за достъпност.
Съвети за създаване на визуално достъпни сайтове
Ако искате да създадете визуално достъпна страница, винаги е добра идея избягвайте да използвате цветовете сами, за да предадете функционалност или значение. Иконите, които променят цвета си въз основа на текущото си състояние, са типични примери за това.
Ако е възможно, винаги проектирайте допълнителни визуални знаци които помагат на хората, които виждат цветовете по различен начин в разбирането на функционалността.
Никога не забравяйте обърнете особено внимание на цветовия контраст на бутоните, връзките и менютата, тъй като те са средство за навигация на вашия сайт. Ако потребителите не могат лесно да навигират в сайта ви, бързо ще ги загубите. Достъпни цветове за бутоните за покана за действие са също от решаващо значение за добрите обменни курсове.
Добра практика е да се тества съотношението на цветовия контраст възможно най-рано в процеса на проектиране, тъй като ще бъде трудно да убеди клиента да промени цветовата схема на сайта по-късно надолу по процеса на проектиране.
Сега прочетете: Практически подход за избор на цветова схема на уебсайт
