Barvy a písma na webu: jak vybrat, aby web byl čitelný
Barvy a písmo rozhodují o tom, jestli se text na webu dá číst – na slunci, na starém telefonu i bez brýlí. Dobrá volba vychází z barev značky, má dost kontrastu, vystačí si se dvěma písmy a nezpomalí načítání. Tady je postup krok za krokem.
Aktualizováno
Začněte od barev značky, ale ne doslova
Pokud máte logo a brand manuál, barvy jsou dané. Jenže barva, která funguje v logu, nemusí fungovat jako pozadí celé stránky nebo jako barva textu. Sytá oranžová vypadá na vizitce skvěle, odstavec v ní napsaný se ale číst nedá.
Na webu se proto barvy rozdělují podle role:
- Základ – pozadí a text. Většinou téměř bílá a téměř černá, případně jemně tónovaná do barvy značky.
- Akcent – jedna barva pro tlačítka, odkazy a důležité prvky. Typicky hlavní barva značky.
- Doplňkové – světlejší a tmavší odstíny akcentu pro plochy, rámečky a stav po najetí myší.
- Stavové – červená pro chybu ve formuláři, zelená pro úspěšné odeslání. Nespoléhejte jen na barvu, přidejte i text.
Když akcent použijete na všechno, přestane upozorňovat. Tlačítko „Poptat“ má být nejvýraznější věc na obrazovce, ne jedna z deseti oranžových.
Kontrast: pravidlo, které se dá změřit
Čitelnost není věc vkusu. Mezinárodní doporučení WCAG stanovuje minimální poměr kontrastu mezi textem a pozadím. Pro úroveň AA, ke které se vztahují i české a evropské předpisy o přístupnosti, platí:
| Prvek | Minimální kontrast (AA) | Typická chyba |
|---|---|---|
| Běžný text | 4,5 : 1 | Světle šedý text na bílé, protože „vypadá elegantně“. |
| Velký text (nadpisy) | 3 : 1 | Bílý nadpis přes světlou fotku. |
| Ovládací prvky a ikony | 3 : 1 | Rámeček formulářového pole skoro neviditelný. |
Kontrast ověříte zdarma v nástrojích pro vývojáře v prohlížeči nebo v online kontrolách kontrastu – zadáte dvě barvy a dostanete poměr. Zkontrolujte hlavně šedé popisky, text na barevných tlačítkách a text v patičce. Proč na tom záleží i mimo zákon, vysvětluje heslo přístupnost webu.
Písma: dvě stačí, často i jedno
Běžný firemní web si vystačí s jedním písmem pro text a případně druhým, výraznějším, pro nadpisy. Každé další písmo přidává data ke stažení a vizuální neklid. Při výběru kontrolujte:
- Českou diakritiku. Napište „Příliš žluťoučký kůň úpěl ďábelské ódy“ velkými i malými písmeny. Chybějící „ů“ nebo špatně posazený háček nad „ť“ prozradí písmo bez plné podpory češtiny.
- Řezy. Pro text potřebujete obyčejný a tučný řez, ideálně i kurzívu. Písmo, které má jen jeden řez, se hodí nanejvýš na nadpisy.
- Čitelnost v malé velikosti. Ozdobné a úzké písmo funguje v nadpisu, v odstavci na mobilu ne.
- Číslice. Pokud na webu máte ceník nebo otevírací dobu, podívejte se, jak písmo píše čísla a jestli se dá odlišit 1 od l.
Webové fonty, rychlost a licence
Písmo, které není v počítači návštěvníka, se musí stáhnout. Každý řez je samostatný soubor a dokud se nenačte, prohlížeč buď ukáže náhradní písmo, nebo text na chvíli skryje. Pár zásad, aby to web nezpomalilo:
- Načítejte jen řezy, které opravdu používáte, a ve formátu WOFF2.
- Omezte znakovou sadu na latinku včetně rozšířené části s českými znaky, pokud web nepotřebuje další abecedy.
- Písma ukládejte přímo na svůj server. Načítání z cizího serveru předává jeho provozovateli IP adresu návštěvníka, což se u GDPR řeší zbytečně.
- Nastavte zobrazení náhradního písma během načítání, aby se text neukázal až po vteřině.
Licence je druhá věc, na kterou se zapomíná. Velká část volně dostupných písem (například v knihovně Google Fonts) je pod otevřenou licencí, která dovoluje použití na webu, ale ověřte ji u konkrétního písma. Komerční písma se licencují zvlášť pro web, tisk a aplikace. Písmo „staženo z internetu“ bez licence je stejný problém jako cizí fotka. Jak se měří dopad na rychlost, popisuje návod rychlost webu.
Tmavý režim a další drobnosti
Telefony umí přepnout do tmavého režimu a web na to může reagovat vlastní tmavou paletou. Není to povinnost, ale pokud ho zapnete, počítejte s tím, že:
- čistě černé pozadí s bílým textem bývá na čtení ostré, lepší je tmavě šedá a lehce ztlumená bílá,
- barva akcentu často potřebuje světlejší variantu, aby měla kontrast i na tmavém pozadí,
- logo a obrázky s bílým pozadím potřebují verzi pro tmavý podklad.
Nakonec otestujte celek na skutečných zařízeních: na levném telefonu se staženým jasem, na slunci a na velkém monitoru. Odchylky mezi displeji jsou větší, než se na monitoru grafika zdá.
Kolik to stojí u nás
Barvy, písma a jejich kontrola nejsou samostatná položka – vybíráme je při návrhu vzhledu jako součást každého webu. Za Vizitkový web zaplatíte 15 000 Kč, Firemní web s návrhem i texty na míru vychází na 20 000 Kč. Úpravu barev a písem na existujícím webu nejdřív posoudíme a cenu sdělíme předem; počítá se časem, hodina stojí 1 000 Kč. Na vlastním webu máme v Lighthouse na počítači skóre 100/100, takže víme, že pěkné písmo a rychlost jdou dohromady.
Časté otázky
Můžu na webu použít písmo z našeho loga?
Jen pokud licence písma dovoluje použití na webu. Mnoho komerčních písem má zvlášť licenci pro tisk a zvlášť pro web, často s limitem návštěv. Logo samotné bývá obrázek, takže se ho to netýká – jde o písmo, kterým by se psaly texty a nadpisy.
Jaká velikost písma je na webu správná?
Pro běžný text na mobilu se obvykle volí kolem 16 pixelů, na počítači často o něco víc. Důležitější než číslo je zkouška: přečtěte si odstavec na telefonu na délku paže. Když přimhouříte oči, je písmo malé nebo málo kontrastní.
Je bílé písmo na fotce v pořádku?
Jen když je pod textem dost tmavé místo nebo poloprůhledný tmavý pruh. Fotka se na různých displejích ořízne jinak, takže text může skončit na světlém nebi. Kontrast kontrolujte v nejhorším místě, ne v průměru.
Musí web mít tmavý režim?
Povinné to není. Pokud ho ale děláte, potřebuje vlastní ladění barev, ne jen obrácené barvy. Logo, ikony a fotky s bílým pozadím v tmavém režimu často vypadají špatně a je potřeba jejich verze připravit.
Nemáme brand manuál. Vadí to?
Nevadí, web může vznikat zároveň s jednoduchými pravidly značky. Stačí logo ve vektoru, dvě až tři barvy s přesnými kódy a jedno nebo dvě písma. Tyto volby pak převezmou i vizitky a tiskoviny.