Коришћење контраста високе боје за приступачнији дизајн

Веб стандарди за контраст боја

Однос контраста боја мери разлику у контрасту између две боје. Што је већа вриједност, лакше је разликовати објект (текст, слику, графику) у првом плану од позадине.

Боје се могу разликовати на много различитих начина, као што је ин нијанса, вредност и засићење. Коефицијент контраста боја израчунава се помоћу формуле коју обезбеђује В3Ц, главна међународна организација за стандарде за Ворлд Виде Веб.

Може да има вредност између 1: 1 (уопште нема контраста, предњи план и позадина имају исту боју) и 21: 1 (максимални контраст који постоји само између црне и беле).

Најновије В3Ц смернице за приступачност Веб садржаја (ВЦАГ) 2.0 обезбеђују веб програмерима и креаторима садржаја бенчмарке за минимум (ниво АА) и побољшану (ниво ААА) вредност прихватљивог односа контраста боја.

Ниво АА захтева најмање Однос 4,5: 1 за обичан текст, и 3: 1 за велики текст. Много је лакше читати велике текстуалне поднаслове, зато је потребан нижи контраст боја.

Ако желите да достигнете ниво ААА који је побољшани ниво, морате дизајнирати своју схему боја са већом пажњом, јер то захтева барем Однос контраста 7: 1 за нормалан текст, и 4.5: 1 за велике. Ако је текст део логотипа или робне марке, нема захтева за минималним контрастом боја на оба ВЦАГ нивоа.

Можемо само позвати веб страницу визуално приступачну ако Однос контраста боја између сваког објекта у предњем плану и његове позадине достиже бар ниво АА.

Предности високог контраста у боји

Осигуравањем боље читљивости не ангажујете само кориснике оштећеног вида, већ и људи који читају ваш садржај на малим екранима као на паметном телефону или паметном сату лоши услови осветљења, и на мониторе нижег квалитета.

Људи такође читају брже када постоји већи контраст између текста и позадине, тако да ће им вероватно требати више времена да им досади садржај странице.

Ако се бринете да ће примена вишег контрастног односа имати негативан утицај на естетику вашег дизајна, потребно је да проверите веб пројекат Цонтраст Ребеллион који доказује, са стварним примерима, да се придржавање правила високог контраста још увек може постићи у атрактивним и цоол дизајну.

Апликације за проверу контраста у боји

Постоји много одличних бесплатних алата широм веба који могу помоћи дизајнерима да провере однос контраста боја на њиховом веб сајту.

Најлакши начин тестирања дизајна за контраст боја је да одаберете главне боје са Пхотосхопом или одговарајућим проширењем за прегледач, као што је овај за Фирефок, и копирате вредности у једну од апликација испод.

Најважнија ствар коју треба запамтити је да увек треба упоредите боју предњег плана, као што је боја текста, са њеном околином (боја позадине).

1. ВебАим контролер контраста боја

ВебАим (Веб Аццессибилити Ин Минд) је организација која промовише веб приступачност и која нуди програмерима једноставан али поуздан контролер контраста у боји међу многим другим одличним алаткама за приступачност, као што је Ваве, апликација за процену приступачности која вам може помоћи брзо процените питања приступачности свог сајта.

Контролер контраста боја ВебАим вам говори ако ваше боје прелазе ВЦАГ АА и ААА тестове, и за нормалне и за велике текстове.

2. Проверите контраст боја у Сноок-у

Јонатхан Сноок, који тренутно ради као главни девелопер у Схопифи-у, већ више од десет година уграђује свој згодни алат за провјеру контраста боја. Сноокова апликација вам омогућава променити ХСЛ и РГБ вредности боје предњег плана и позадине једну по једну помоћу практични клизачи распона док не постигнете резултат који је у складу са ВЦАГ 2.0 бенцхмаркс.

ЦхецкМиЦолоурс

ЦхецкМиЦолоурс креиран од стране Гиованни Сцала омогућава вам да проверите однос контраста боја свих комбинација боја у позадини и позадини. на веб сајту.

То израчунава однос контраста светлости, разлика осветљености, и разлика боја, и даје вам комплетан извештај о резултатима. ЦхецкМиЦолоурс извештај може значајно олакшати ваше разумевање како можете побољшати визуелну приступачност вашег сајта.

Цолор Сцхеме Десигнер

Цолор Сцхеме Десигнер није посебно контролер контраста боја, већ алат за дизајнирање комплетних схема боја.

Ми је укључујемо у ову колекцију, јер има карактеристику која вам омогућава да видите како ваше шеме боја доживљавају људи са различитим типовима оштећења вида. Можете тестирати своје боје за потпуно слепило за боје, протанопију, деутеранопију и многе друге оштећења вида. Апликација има новију верзију под називом Палеттон која омогућава чак и софистициранију визуалну симулацију (можете тестирати и за ствари као што је лош ЛЕД заслон или слаб ЦРТ приказ).

В3Ц вам такође пружа огромну листу алата за процену приступачности на Вебу где можете пронаћи многе друге алате за контраст боја, као што је овај помоћни колор приступачности боја.

Савјети за креирање визуално приступачних веб страница

Ако желите да направите визуелно приступачну веб локацију, увијек је добра идеја избегавајте да користите само боју да пренесете функционалност или значење. Иконе које мењају боју на основу њиховог тренутног стања су типични примери за то.

Ако је могуће, увек дизајнирајте додатне визуалне знакове који помажу људима који боје виде другачије у разумевању функционалности.

Никада не заборави обратите посебну пажњу на контраст боја дугмади, линкова и менија, јер су то средства навигације на вашем сајту. Ако се корисници не могу лако кретати на вашој веб-локацији, брзо ћете их изгубити. Доступне боје за позиве на акцију су такође кључни за добре стопе конверзије.

Добра пракса рада је да тестирате однос контраста боја што је пре могуће у процесу дизајнирања јер ће бити тешко да убедите клијента да промени шему боја на сајту касније у процесу дизајна..

Сада прочитајте: Практични приступ за избор шеме боја веб странице