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

Подобрете ја читаноста на вашиот веб-сајт и корисничкото искуство со соодветен контраст

Контрастот игра важна улога во успехот на дизајнот на секој веб-сајт. Од типографијата на овој сајт , до сликите што се користат во текот на сајтот, до контрастот помеѓу елементите на предната страна и боите во позадина - добро дизајнираната локација мора да има соодветен контраст во сите овие области за да обезбеди квалитетно корисничко искуство и долгорочен успех на сајтот.

Нискиот контраст е еднаков со слабо искуство за читање

Веб-страниците кои се премногу ниски во споредба може да бидат тешки за читање и употреба, што ќе има негативно влијание врз успехот на било кој сајт. Прашањата за лош контраст на боја често се лесно да се идентификуваат. Обично можете да го сторите тоа само со да гледате страница што е прикажана во веб прелистувачот и можете да видите дали текстот е премногу тешко за читање поради лоши избори во боја. Сепак, иако може да биде лесно да се одреди кои бои не функционираат добро, може да биде многу тешко да се одлучи кои бои добро функционираат за разлика од другите. Вие не може да работи што не функционира, но како ќе утврдите што работи? Сликата во оваа статија треба да ви помогне да ви покажеме различни бои и како тие контраст како предни и бои на позадината. Можете да видите некои "добри" спарувања и некои "лоши" спарување, кои ќе ви помогнат да ги направите вистинските избори во вашите проекти.

Во однос на контрастот

Едно нешто што треба да се забележи е дека контрастот е повеќе од само колку светла боја се споредува со позадината. Како што треба да се види во претходно споменатата слика, некои од овие бои се многу светли и се појавуваат енергично на бојата на позадината - како што е сино-црно, но јас сепак го означував дека има слаб контраст. Го направив ова бидејќи, иако може да биде светло, комбинацијата на бои уште го прави текстот тешко да се прочита. Ако требаше да создадете страница во сите сини текстови на црна позадина, вашите читатели би имале многу брзо исчезнување. Ова е причината зошто контрастот не е само црно-бело (да, таа кал беше наменета). Постојат правила и најдобри практики за контраст, но како дизајнер секогаш мора да ги оцените тие правила за да бидете сигурни дека тие работат во вашиот конкретен пример.

Избор на бои

Контрастот е само еден од факторите што треба да се земат предвид при изборот на бои за дизајнот на вашиот веб-сајт, но тоа е важен. При изборот на бои, потсетете се на стандардите на брендот за компанијата, но исто така бидете подготвени да ги адресирате палетите на бои кои, иако тие може да бидат во согласност со упатствата за бренд на организацијата, не работат добро на интернет. На пример, отсекогаш сум нашол жолта и светла зелена боја да биде ужасно предизвикувачка за ефикасно користење на веб-страниците. Ако овие бои се во упатствата за бренд на компанијата, најверојатно ќе треба да се користат само како акцентни бои, бидејќи е тешко да се најдат бои кои добро се спротивставуваат.

Слично на тоа, ако боите на вашиот бренд се црно-бели, тоа значи голем контраст, но ако имате веб-страница со долги количини на текст, црно-белата позадина со бел текст ќе направи многу тешко. Дури и контрастот помеѓу црно и бело е одлично, белиот текст на црна позадина предизвикува замор на очите за долги пасуси. Во овој случај, јас би ги инвертирал боите да користам црн текст на бела позадина. Тоа можеби не е толку визуелно заинтересирано, но нема да најдете подобар контраст од тоа!

Онлајн алатки

Во прилог на сопствената смисла на дизајнот, постојат некои онлајн алатки кои можете да ги користите за да ги тестирате боите на вашиот сајт.

CheckMyColors.com ќе ги тестира сите бои на вашиот сајт и ќе извести за односот на контрастот помеѓу елементите на страницата.

Дополнително, кога размислувате за изборот на боја, треба исто така да ја разгледате достапноста до веб-страниците и луѓето кои имаат облици на слепило во боја. WebAIM.org може да помогне во ова, како што може да го прави ContrastChecker.com, кој ќе ги тестира вашите избори против WCAG упатствата.