Použití kontrastních barev v pozadí a pozadí v návrhu webu

Zlepšete čitelnost a zkušenosti uživatelů s odpovídajícím kontrastem

Kontrast hraje důležitou roli v úspěchu designu webových stránek. Z typografie tohoto webu , po obrázky používané na celém webu, na kontrast mezi elementy popředí a barvy pozadí - dobře navržená stránka musí mít ve všech těchto oblastech dostatečný kontrast, aby byla zajištěna kvalitní uživatelská zkušenost a dlouhodobý úspěch na webu.

Nízká kontrastka se rovná špatnému čtení

Webové stránky, které jsou příliš nízké v kontrastu, mohou být obtížné číst a používat, což bude mít negativní dopad na úspěch každého webu. Špatné problémy s barevným kontrastem jsou často snadno identifikovatelné. Obvykle můžete tak učinit pouze tím, že se podíváte na stránku vykreslenou ve webovém prohlížeči a zjistíte, zda je text příliš těžký na čtení kvůli špatnému výběru barev. I když může být snadné určit, které barvy nefungují dobře, může být skutečně velmi náročné rozhodnout, jaké barvy fungují dobře v kontrastu s ostatními. Možná, že to nefunguje, ale jak zjistíte, co funguje? Obraz v tomto článku vám pomůže ukázat různé barvy a jejich kontrast jako barvy popředí a pozadí. Můžete vidět některé "dobré" párování a některé "špatné" párování, které vám pomohou při výběru správných barev ve vašich projektech.

Co se týče kontrastu

Jedna věc, kterou byste měli vzít na vědomí, je, že kontrast je více než jen jasná barva ve srovnání s pozadím. Jak byste měli vidět na výše zmíněném obrázku, některé z těchto barev jsou velmi světlé a živě se objevují na pozadí - například na modré na černé, ale stále označuji to za špatný kontrast. Udělal jsem to proto, že i když to může být jasné, barevná kombinace ještě ztěžuje čtení textu. Pokud byste vytvořili stránku v celém modrém textu na černém pozadí, vaše čtenáři by měli oči velmi rychle. To je důvod, proč kontrast není jen černobílý (ano, že hračka byla zamýšlena). Existují pravidla a osvědčené postupy pro kontrast, ale jako návrhář musíte tyto pravidla vždy posoudit, abyste se ujistili, že pracují ve vaší konkrétní instanci.

Výběr barev

Kontrast je jen jedním z faktorů, které je třeba vzít v úvahu při výběru barev pro návrh vašeho webu, ale je to důležité. Při výběru barev byste měli mít na paměti standardy značky pro společnost, ale zároveň budete chtít zabývat barevnými palety, které, i když mohou být v souladu s pokyny organizace, nefungují dobře online. Například jsem vždy našel žluté a jasné greeny, které jsou strašně náročné efektivně využívat na webových stránkách. Pokud jsou tyto barvy v pokynech společnosti, budou pravděpodobně nutné používat pouze jako barevné akcenty, jelikož je těžké najít barvy, které jsou v kontrastu s oběma.

Podobně, pokud jsou barvy značky černé a bílé, znamená to velký kontrast, ale pokud máte stránky s dlouhým množstvím textu a černé pozadí s bílým textem, bude čtení velmi těžké. Dokonce i kontrast mezi černou a bílou je skvělý, bílý text na černém pozadí způsobuje namáhání očí pro dlouhé průchody. V tomto případě bych obrátil barvy na černý text na bílém pozadí. To nemusí mít takovou vizuální zájem, ale nenajdete lepší kontrast než to!

Online nástroje

Kromě vlastního designového smyslu existují některé online nástroje, které můžete použít k otestování výběru barvy webu.

CheckMyColors.com otestuje všechny barvy vašeho webu a oznamuje kontrastní poměr mezi prvky na stránce.

Navíc, když přemýšlíte o výběru barev, měli byste také zvážit dostupnost webových stránek a lidi, kteří mají formu barevné slepoty. WebAIM.org vám s tím může pomoci, stejně jako ContrastChecker.com, který vyzkouší vaše volby proti směrnicím WCAG.