Správné kontrasty webové grafiky

Funkční grafika webu dokáže zvýšit nejen návštěvnost vašeho webu, ale zejména konverze. Jak je to možné? Pokud zvolíte tu správnou grafiku a správné barvy pro web, bude web pro uživatele mnohem jednodušší na procházení.

Webová grafika je klíčová

Jak zajistit uživatelům bezproblémové procházení webu?

"A proč je to vůbec důležité? Není jedno, jaké barvy pro svůj web zvolím? Vždyť já to dokážu přečíst..."

Tak na takové otázky zapomeňte. My vám vysvětlíme proč.

Poruchy vidění

Věděli jste, že dle Wikipedia je až 9 % mužů barvoslepých? U žen je toto procento podstatně nižší, zhruba 0,4 %. V průměru tedy každý desátý muž trpí poruchou vnímání barev. To už je značná část populace, pro kterou je třeba zvolit správný kontrast grafiky.

Špatné světelné podmínky

Dalším důležitým důvodem pro zvolení správného kontrastu webové grafiky je situace, kdy jsou ztížené podmínky pro čtení z mobilního zařízení. Za zhoršených světelných podmínek se váš web s nevyhovující grafikou může pro uživatele stát téměr nečitelný.

Kontrast grafiky lze měřit pomocí kontrastního poměru. Jedná se o bezrozměrnou veličinu, která vám jasně poví, zda váš web splňuje podmínky pro přístupnost.

Kontrastní poměr (KP)

Kontrastní poměr určuje rozdíl dvou sousedních barev na webu z hlediska intenzity vyzařovaného světla. Interval tohoto poměru je od 1 do 21 a to včetně obou hranic intervalu.

Čím větší číslo, tím větší kontrast mezi dvěma barvami. Kontrastní poměr můžete vypočítat pomocí různých online kalkulaček, kam stačí pouze nahrát kódy barev a poměr vám bude automaticky vypočítán.

Norma WCAG

Norma WCAG určuje, zda jsou kontrastní poměry barev na webu správně použity. Zároveň tato norma stanovuje úrovně přístupnosti webové grafiky.

Podle této normy mají texty psané velkým písmem či texty prezentované ve formě obrázku:

1. Ideální kontrast - úroveň AAA, pokud KP > 7
2. Zvýšený kontrast - úroveň AA, pokud KP > 4,5
3. Minimální kontrast, pokud KP > 3

Texty v obrázku, které nejsou součástí aktivního prvku webu, nebo dekorativní texty a texty, které jsou součástí loga, nemusí splňovat požadavky na minimální kontrast.

obr 1.: Příklad kontrastních poměrů odstínu černé a bílé 

obr 2.: Online nástroj Contrast ratio s užitím brand INNOIT barev 

Contrast ratio

Pokud tvoříte webovou grafiku, nebo si chcete u grafických prvků ověřit, zda jste použili správné kontrastní barvy a splňujete tak podmínky pro přístupnost, je možné použít například nástroj Contrast ratio. Jedná se o online nástroj, který je přístupný všem uživatelům zdarma.

Barvy můžete do nástroje zadat několika způsoby:

• HTML kód barvy: např. "#424244"
• Název barvy: např. "blue", avšak tento způsob nedoporučujeme
• HSLA kód (H, S%, L%, a), např. "hsla(200,0%,0%,.7)"
• RGB (R%, G%, B%), např. "(rgb(100%,0%,0%)"

Stránka automaticky mění barvy dle vámi zadaných barev a zároveň v prostředním kolečku určí kontrastní poměr a barevně odliší, zda vaše zadané barvy splňují podmínky pro správný kontrast.

Chrome DevTools - nástroj pro vývojáře

Jste více technicky zdatní a chcete zpětně zjistit KP u vašeho stávajícího webu? Stačí si otevřít DevTools a prozkoumat ručně veškeré webové prvky.

1. klikněte na text, jehož kontrast chcete prozkoumat pravým tlačítkem myši
2. vyberte možnost "Prozkoumat", otevře se vám pole Dev Tool
3. klikněte na ikonu vlevo nahoře v okně Dev Tool
4. myší najeďte na text, který chcete prozkoumat
5. v zobrazeném okně zkontrolujte sekci "contrast"

Dev tool automaticky zobrazuje a vyhodnocuje kontrasty textů na webovém pozadí. Číslo určuje kontrastní poměr a zároveň ikona křížku nebo fajfky automaticky vyhodnocuje správnost kontrastu.

Tento způsob je pouze jednou z několika možností. Vy si samozřejmě můžete najít pro vás schůdnější cestu, jak se orientovat v nástroji pro vývojáře.

obr 3.: Ukázka zobrazení kontrastního poměru pomocí Dev Tool