10+1 tipů pro vymakaný grafický design - INNOIT
Účel designu. Před vytvářením grafického designu přemýšlejte v první řadě nad účelem, pro který grafiku vytváříte. Jinak budete prezentovat nap ...
správné kontrasty webové grafiky
Pro usnadnění čtení vašeho grafického designu je potřeba dodržovat některá pravidla pro správné barevné kontrasty. Pokud tvoříte webový design, velkým pomocníkem vám bude náš článek na téma <anchor>správné kontrasty webové grafiky</anchor>, ale pomůže vám i při tvorbě tiskové grafiky. Pokud si nejste jistí, zda volíte správné kontrasty a váš design bude dobře čitelný, zkuste na základě článku zjistit, zda mají vámi použité barvy vysoký, zvýšený nebo minimální kontrast.
Správné kontrasty webové grafiky - INNOIT
Správné kontrasty webové grafiky - INNOIT

[![Innoit - logo](/web_files/design/assets/img/logo-menu.png)](./)

- [Úvod](https://www.innoit.cz/ahoj-my-jsme "Úvod")
- [Služby](https://www.innoit.cz/#sluzby "Služby")
  - [Tvorba webu](https://www.innoit.cz/sluzby_tvorba-webu "Tvorba webu")
  - [Microsite](https://www.innoit.cz/sluzby_microsite "Microsite")
  - [Tvorba e-shopu](https://www.innoit.cz/sluzby_tvorba-e-shopu "Tvorba e-shopu")
  - [Street view](https://www.innoit.cz/sluzby_street-view "Street view")
  - [Sociální sítě](https://www.innoit.cz/sluzby_socialni-site "Sociální sítě")
  - [Vizuální identita brandu](https://www.innoit.cz/sluzby_vizualni-identita-brandu "Vizuální identita brandu")
  - [Ostatní služby](https://www.innoit.cz/sluzby_ostatni-sluzby "Ostatní služby")
- [Portfolio](https://www.innoit.cz/portfolio "Portfolio")
- [Klienti](https://www.innoit.cz/#klienti "Klienti")
- [O nás](https://www.innoit.cz/o-nas "O nás")
- [Kontakty](https://www.innoit.cz/kontakty "Kontakty")
- [Blog](https://www.innoit.cz/blog "Blog")
- [Kariéra](https://www.innoit.cz/kariera "Kariéra")
- [Proč s námi](https://www.innoit.cz/proc-s-nami "Proč s námi")

[Blog](./blog "Zpět na Blog")

[![](/web_files/design/assets/img/logo.png)](/)

27.06.2022Kristýna Šťastná

# Správné kontrasty webové grafiky

[Web](/blog?categories[]=3)

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](https://www.innoit.cz/blog_jak-zvolit-webove-barvy "Webové barvy - INNOIT blog"), 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č.**

**![Kontrast webové grafiky - INNOIT](https://www.innoit.cz/web_files/soubory/blog/2022/mobile-blog_1652961440.png)**

## Proč je důležité volit správný kontrast grafických prvků?

### **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ý.

## Lze měřit kontrast grafiky?

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](https://www.innoit.cz/blog_jak-na-webovou-pristupnost-v-contentu "Přístupnost webu - INNOIT Blog").

### 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.

**![Kontrasty webové grafiky - INNOIT](https://www.innoit.cz/web_files/soubory/blog/2022/kontrast-web-grafiky_1652709275.png)**

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

## Jaké možnosti měření KP použít?

**![Kontrasty webové grafiky - INNOIT](https://www.innoit.cz/web_files/soubory/blog/2022/kontrast_1652703925.png)**

_obr 2.: Online nástroj [Contrast ratio](https://contrast-ratio.com/ "Contrast ratio - INNOIT Blog") 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](http://contrast-ratio.com/ "Contrast ratio - INNOIT blog"). **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.

#### Webovou přístupnost můžete ovlivnit i tím, jak vkládáte obsahu na web

- vkládejte obrázky se správnými titulky a ve správné velikosti
- využívejte primárně nadpisů a nestylujte dodatečně text
- pište srozumitelně a v odstavcích
- a další...

**Podívejte se na všechny tipy jak zajistit přístupnost webu v našem článku na [blogu](https://www.innoit.cz/blog "Blog - INNOIT").**

[Článek na blogu >](https://www.innoit.cz/blog_jak-na-webovou-pristupnost-v-contentu "Webová přístupnost - INNOIT Blog")

![](https://www.innoit.cz/web_files/soubory/logo-innotip.png)

### 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.

**![Kontrasty webové grafiky - INNOIT](https://www.innoit.cz/web_files/soubory/blog/2022/konta_1652707321.png)**

_obr 3.: Ukázka zobrazení kontrastního poměru pomocí Dev Tool_

### Shrnutí

**Webová grafika prodává.** Nejde pouze jen o tvář vašeho webu, jde především o funkční design, který vám **může pomoci s prodejem, zvýšit konverze a také zaručit návštěvníkům snadný průchod** webem.

Váš grafik by měl volit webové barvy na základě pravidel pro kontrast webové grafiky, nebojte se však tento krok zkontrolovat, abyste zpřístupnili váš web opravdu všem. A to nejen zlomku uživatelů s poruchou barvocitu, ale především pro všem, kteří se na váš web budou dívat ve ztížených světelných podmínkách.

**Nezapomínejte však i na estetickou stránku věci.** Ne každé správně kontrastní barvy jsou oku lahodící a hodí se k sobě. Při výběru barev tedy volte správný kontrast, ale zároveň nezapomínejte na estetické hledisko.

Věříme ale, že se vám to bez problému povede. A pokud byste o volbě webových barev chtěli vědět více, přečtěte si náš článek [Jak zvolit správně barvy pro web](https://www.innoit.cz/blog_jak-zvolit-webove-barvy "Barvy pro web - INNOIT Blog").

## Ještě nemáte svůj web?

### Nebo přemýšlíte nad redesignem stávajícího?

#### Obraťte se na nás a společně se můžeme domluvit.

[Kontaktujte nás >](https://www.innoit.cz/kontakty)

#### Rádi se vám budeme věnovat.

**Zdroje:**

_www.portadesign.cz_

_www.w3.org_

_www.pristupne-stranky.cz_

_www.prirucky.ipk.nkp.cz_

_www.color.review.cz_

_www.accessibility.org.au​_

_www.december.com_

### kategorie

[Web](javascript:;) [SEO](javascript:;) [LEGISLATIVA](javascript:;) [NL](javascript:;) [soc](javascript:;) [VP](javascript:;) [INNOIT](javascript:;)

### štítky

[Content](javascript:;) [SEO](javascript:;) [Copy](javascript:;) [Facebook](javascript:;) [Instagram](javascript:;) [Grafika](javascript:;) [PPC](javascript:;) [Ze života](javascript:;) [E-shop](javascript:;) [Komunikace](javascript:;)

## Zaujali jsme vás?

![](/web_files/design/assets/img/icon-phone.svg)

[+420 777 064 008](tel:+420777064008)

![](/web_files/design/assets/img/icon-envelope.svg)

[\[email protected\]](/cdn-cgi/l/email-protection#09686166634960676766607d276a73)

[Napište nám,](javascript:;) nebo si

sjednejte schůzku třeba v:

![](/web_files/design/assets/img/mapa.png?v1)

[fakturační adresa](#invoice_address)

Mikulášovice 760

Mikulášovice 407 79

Česká republika

IČO: 88284573 / DIČ: CZ9057142534

[ARES-OR](https://wwwinfo.mfcr.cz/cgi-bin/ares/darv_res.cgi?ico=88284573&jazyk=cz&xml=1)

## Další informace

- [Slovník](/slovnik)
- Nastavení cookie

[![](web_files/design/assets/img/icon-facebook.svg)](https://www.facebook.com/innoit "INNOIT - Facebook ")

[![](web_files/design/assets/img/icon-instagram.png)](https://www.instagram.com/innoit_cz/ "INNOIT - Instagram")

[![](web_files/design/assets/img/icon-linkedin.png)](https://www.linkedin.com/company/innoit "INNOIT - Linkedin")

## Odebírejte INNOvinky

Chcete být v obraze a vědět jako první,

co je nového v online světě?

Váš e-mail @

Odeslat

souhlasím se [zpracováním osobních údajů](https://www.innoit.cz/ochrana-osobnich-udaju)

[Zavrit](javascript:;)