Как да противопоставим цветовете на фона и предния план в уеб дизайна

click fraud protection

Какво да знаете

  • Използвайте диаграмата в тази статия, за да определите най-добрите комбинации от цветове на фона и на преден план за дизайн на уеб страница.
  • Използвайте онлайн инструмент като CheckMyColors.com за да тествате цветовете на сайта си и да докладвате за съотношението на контраста между елементите на страницата.
  • Използвайте инструмент като ContrastChecker.com за да тествате избора си срещу Указания за достъпност на уеб съдържание.

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

Как да създадете силен контраст

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

Проучете графиката по-долу, за да добиете представа за най-добрите комбинации фон / преден план.

Таблица за цветен контраст
Lifewire / Джеръми Жирард

Има правила и най-добри практики за контраст, но като дизайнер, винаги трябва да оценявате тези правила, за да сте сигурни, че те работят във вашия конкретен случай.

instagram viewer

Използвайте инструменти за онлайн проверка на контраста

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

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

Защо контрастът е важен?

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

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

Стандарти за брандиране и контрастни цветове

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

Какво означават различните цветове за графичните художници?

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

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

instagram story viewer