Използване на контрастиращи цветове на преден план и фона в уеб дизайна

Подобрете яснотата на вашия уеб сайт и опита на потребителя с подходящ контраст

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

Ниският контраст е равен на слаб опит в четенето

Уеб сайтове, които са твърде ниски в контраст, могат да бъдат трудни за четене и използване, което ще има отрицателно въздействие върху успеха на всеки сайт. Лошите проблеми с контраста на цветовете често са лесни за идентифициране. Обикновено можете да го направите само като разгледате страница, която се изобразява в уеб браузър и можете да видите дали текстът е твърде трудно да се чете поради лошите цветове. Все пак, макар че може да е лесно да се определи кои цветове не работят добре заедно, всъщност може да е много предизвикателно да решите какви цветове работят добре в контраст с другите. Не може да не работи, но как ще определите какво работи? Изображението в тази статия би трябвало да ви покаже разнообразие от различни цветове и как те контрастират като цветове в преден план и фон. Можете да видите някои "добри" чифтове и някои "лоши" сдвоявания, които ще ви помогнат да направите правилния избор на цвят във вашите проекти.

По отношение на контраста

Едно нещо, което трябва да отбележите е, че контрастът е нещо повече от това, колко ярък е цветът в сравнение с фона. Както би трябвало да видите в горепосоченото изображение, някои от тези цветове са много ярки и се появяват живи на цвета на фона - като синьото на черно, но все още го обозначавам като с лош контраст. Направих това, защото, макар че може да е ярка, цветната комбинация все още прави текста трудно за четене. Ако щяхте да създадете страница в цял син текст на черен фон, вашите читатели щяха да имат много бързо очите. Ето защо контрастът не е само черно-бял (да, такава игра е предназначена). Има правила и най-добри практики за контраст, но като дизайнер винаги трябва да оценявате тези правила, за да сте сигурни, че те работят във вашия конкретен случай.

Избор на цветове

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

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

Онлайн инструменти

В допълнение към собствения ви смисъл на дизайна, има и някои онлайн инструменти, които можете да използвате, за да изпробвате цветовия избор на сайта си.

CheckMyColors.com ще тества всички цветове на вашия сайт и ще докладва за контрастното съотношение между елементите на страницата.

Освен това, когато мислите за избор на цвят, трябва да имате предвид и достъпността на уебсайта и хората, които имат форми на цветна слепота. WebAIM.org може да помогне с това, както и ContrastChecker.com, който ще тества избора ви срещу указанията на WCAG.