Pretraga
Затворите ово поље за претрагу.

5 алата за прављење веб палете боја које сви могу да виде

Откривање подружница: Потпуно транспарентно - неке од веза на нашој веб страници су партнерске везе, ако их користите за куповину, зарадићемо провизију без додатних трошкова за вас (ништа!).

Боје вашег бренда имају снажан емоционални утицај, али како изгледају посетиоцима сајта који су слабовиди, далтонисти или се суочавају са факторима околине који отежавају видљивост?

Нивои боја и контраста су критични за комуникацију, а исправан одабир ових детаља је критичан за дизајнера који размишља о приступачности.'

Поремећаји перцепције боја су чешћи него што мислите. Дакле, у овом посту ћемо причати о томе како особе са инвалидитетом као што су слабовидност, дислексија и слепило у боји остварују интеракцију са интернетом.

Како да користим проверу боја да побољшам приступачност моје веб локације?

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

Једноставно унесите своју боју предњег плана (нпр. боју текста или икона) и боју позадине као хексадецималне вредности (познате и као хексадецималне вредности), као што је наведено у ХТМЛ- или ЦСС, а провера односа контраста ће вас обавестити да ли је однос довољан. Запамтите да је минимални однос контраста који треба да тражите 4.5 према 1. Црни текст на белој позадини има однос контраста од 21 према 1, тако да имате велику слободу.

5 алата за прављење веб палете боја које сви могу да виде

1. ВебАИМ Цолор Цонтраст Цхецкер

Веб АИМ алат за боју

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

Снаге

  • Једноставан алат са интерфејсом који је лак за очи.
  • Ово је леп, једноставан алат за почетнике, а не само за дизајнере.

Слабости

  • Не може се поредити више од две боје, само две.
  • Клизач за осветљеност није баш добар начин за одабир боја. Тешко је рећи колико су атрактивне боје на овом једноставном екрану.

2. Провера контраста за ВЦАГ

Унесите хексадецималне боје за предњи план и позадину. Приказује АА и ААА усклађеност за нормалан и велики текст поред узорка Лорем Ипсум текста. Такође можете да отпремите слику. Палета од 9 боја се аутоматски бира за вас. Затим можете да упоредите сваку боју као боју предњег плана или боју позадине.

Снаге

  • Једноставан алат са корисничким интерфејсом.
  • Имати способност да прави палете од слика.

Слабости

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

3. Коцка у боји

Коцка боја - најбоља палета боја на вебу

Унесите боје за палету, свака на својој линији. Излаз приказује узорке слова са односом контраста у поређењу са АА стандардима за мале и велике фонтове. Три колоне приказују контраст са белом позадином, црном позадином и скупом боја бренда које су „Најчитљивије од доступних“.

Снаге

  • Лако за очи Кориснички интерфејс (УИ) је добро организован, а статус пролаза/неуспеха/ивице је лако уочљив.

Слабости

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

4.) Контрастна мрежа осам облика 

Унесите палету боја. Такође, свакој боји можете дати име. Апликација прави табелу са свим могућим комбинацијама боја. Постоје три величине плочица. Постоје визуелни знаци за АА и ААА пролаз/неуспех/ивица и ефективни однос контраста. Колоне и редови се могу померати у апликацији превлачењем и отпуштањем. Табеларни подаци се могу чувати, извозити и делити.

Снаге

  • Постоји много корисних функција које помажу у анализи целих палета.

Слабости

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

5. Безбедна боја 

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

Снаге

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

Слабости

  • Можете да упоредите само боје предњег плана и позадине истовремено.
  • Морате да копирате и налепите боје у посебан документ ако желите да их сачувате.
  • Изађите и направите ствари за све!

Када будете знали како да користите ове алате, можда ћете открити да вам је потребно више од једног за пројекат. Можда је Цолор Цубе најбољи начин да покажете клијенту шта сте научили о приступачности. Можда ћете користити ВебАИМ-ов алат све време за брзе провере на лицу места.

Zakljucak  

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

Јитендра

Jitendra Vasvani je osnivač СцхемаНиња WordPress Plugin, pre SchemaNinja, on je osnivač mnogih internet marketing blogova БлоггерсИдеас.цом, и Дигиеке.цом. Он је успешан онлајн маркетер и награђивани консултант за дигитални маркетинг. Он је представљен на ХуффингтонПост, БусинессВорлд, ИоурСтори, Паионеер, Лифехацкер и другим водећим публикацијама као успешан блогер и дигитални маркетер. Јитендра Васвани је такође чест говорник и има више од 8 година искуства у области дигиталног маркетинга. Погледајте његов портфолио ( јитендра.цо). Нађи га Twitter, & фацебоок.

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

0 Акције
цвркут
Share
Share
Пин