Jak vybrat barvy webu s ohledem na jeho přístupnost?

Kontrast barev, čtečky webů, slabozrací

Při tvorbě webu se každý dostal/dostane do situace, že musí vyřešit aby byl web jednak barevně pohledný, ale také aby byl vidět všude (různé monitory) a pro všechny (jak slabozrací, důchodci tak mladí lidé) stejně. Základ je vždy kontrast barev, abychom nedali například tmavě šedý font na černý podklad. Ale u slabozrakých lidí je těch potřeb více.

Kontrast barev
Základní pravidlo pro dostatečný kontrast zní "Minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 4,5:1, pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 3:1.". Pro zisk hodnoty kontrastu dvou barev slouží několik webový nástrojů a to:
1)Contrast ratio
Jeho výhoda je, že po zadání 2 barev ihned vidíte výsledný kontrast a také jaká hodnota kontrastu Vám vyšla. Navíc barva kolečka uprostřed Vám ukazuje, zda je kontrast dostatečný či nikoliv (zeleně = v pořádku ; oranžová = raději upravit ; červená = špatně).
2)Tanaguru Contrast-Finder
Tento nástroj slouží pro poupravení jedné z barev, pokud není dostatečný kontrast. Zadáte zde obě barvy. Dále si zvolíte jaká z nich se bude upravovat pro vyšší kontrast. Dále jaký minimální kontrast chcete. A následně zda chcete vypsat různé možné barvy, nebo jen tu nejbližší té co jste zadaly. Po kliku na tlačítko se Vám zobrazí výsledky, kde si můžete daný více kontrastní odstín dané barevy zkopírovat.

Výběr palety kontrastnch barev
Nástrojů, které usnadní výběr dostatečně kontrastních barev je hned několik. Zde zmíním asi nejzajímavější z nich.
Paletton
Na kruhu barev si volíte dané barvy webu. Pokud Potřebujete více barev, tak nad kruhem je možnost si zakliknout jaký počet barev budete používat. Jednotlivé kódy barev zadáváte klikem na dané kolečko barvy a vlevo dole úpravou jeho kódu. Lze jej i dolaďovat vpravo dole (pod barevným kruhem) tlačítkem "doladit". Zde mi můžete danou barvu upravovat odstínem, kontrastem, sytostí či jasem.
Jakmile máte navoleny Vámi požadované barvy, tak vpravo máte možnost zvolit "ukázka", kde uvidíte výslednou kombinaci barev. A také je možnost kliknout na "simulaci vidění", kde uvidíte jak Vaše barvy uvidí člověk s určitou zrakovou vadou.
Výslednou paletu lze exportovat v různých formátech (CSS, SASS, LESS, XML, text, HTM)
Barvy lze volit i z předvolem pod barevným kruhem. Či si nechat zvolit náhodné přez odkaz vpravo nahoře.

<< zpět