Lekce 2.1

UX/UI principy

Typografie, barva, mezery, hierarchie a zarovnání jako stavební kameny rozhraní. Na závěr oprava stránky, která funguje, ale nevypadá.

Barva

Barva na webu dělá dvě práce: dává stránce náladu a ukazuje, kam se dívat. Ta druhá je důležitější a pokazí se snáz. Když je barevné všechno, nevynikne nic.

Paleta

Paleta webu se skládá ze tří skupin barev. Hlavní barva (primary) nese značku, neutrální barvy tvoří plochy a text a sémantické barvy mají pevný význam: červená chyba, zelená úspěch, žlutá varování.

Každá barva v paletě má několik odstínů od světlého po tmavý. Design systém gov.cz má třeba hlavní modrou s odstíny od #f2f6fc po #04060e, kde základ #00469B je odstín 600, vedlejší oranžovou #FAB413 a šedé od bílé po černou.

css
:root {
  --color-primary-50: #f2f6fc;
  --color-primary-600: #00469b;
  --color-secondary-600: #fab413;
  --color-neutral-900: #262626;
}

Číslo v názvu je stupeň světlosti, čím vyšší, tím tmavší. Takhle pojmenované tokeny už znáte z lekce o moderním CSS. Tady vidíme, odkud se v praxi berou: designér je připraví ve Figmě a vývojář je přepíše do vlastních vlastností.

Paletu si nemusíte vymýšlet od nuly. Nástroje jako Coolors nebo Adobe Color nabídnou ladící barvy k jedné zvolené.

Odstíny přes OKLCH

Zápis #00469b neřekne člověku nic o tom, jak barva vypadá. Zápis oklch() ano: první číslo je světlost, druhé sytost (chroma) a třetí odstín na barevném kruhu ve stupních.

css
:root {
  --color-primary-100: oklch(95% 0.02 258);
  --color-primary-600: oklch(41% 0.15 258);
  --color-primary-900: oklch(25% 0.09 258);
}

Světlejší a tmavší odstín vyrobíme tak, že měníme hlavně první číslo. Odstín zůstává stejný, takže barvy k sobě patří, i když jsme je nepočítali v žádném nástroji. U úplně světlých a úplně tmavých odstínů ubereme i sytost, jinak by barva vyšla mimo to, co obrazovka umí zobrazit.

Stejný trik pomůže i s šedými. Čistě šedá oklch(50% 0 0) vedle modré působí mrtvě. Když šedé dáme odstín hlavní barvy a trochu sytosti, třeba oklch(50% 0.03 258), pořád ji vnímáme jako šedou, jen ladí se zbytkem stránky.

Nahoře pět obdélníků modré barvy od velmi světlé po skoro černou. Pod každým je zápis oklch s odstínem 258, ve kterém se mění hlavně první číslo, světlost: 95, 82, 65, 41 a 25 procent. Čtvrtý odstín je modrá z Design systému gov.cz. Dole dvě stejné karty filmu s tmavě modrým tlačítkem Koupit. Levá má čistě šedé pozadí a šedý text oklch(50% 0 0), pravá má pozadí i text šedé s nádechem modré, oklch(50% 0.03 258), a působí sladěněji.

Dřív se na totéž používal zápis hsl(), který má taky odstín, sytost a světlost. Jeho světlost je ale jen matematická a neodpovídá tomu, jak světlost vnímá oko. Žlutá a modrá se stejnou světlostí v HSL vypadají úplně jinak světlé, takže bílý text je na jedné nečitelný a na druhé v pořádku. V OKLCH znamená stejná světlost opravdu stejně světlou barvu.

Dvě řady šesti barevných tlačítek s bílým nápisem Koupit, od červené přes oranžovou, žlutou, zelenou a modrou po fialovou. Horní řada je v HSL se sytostí 60 a světlostí 55 procent. Kontrast bílého textu v ní kolísá: červená 4,4, oranžová 2,3, žlutá 1,6, zelená 2,0, modrá 4,4 a fialová 4,8, takže na žluté a zelené se nápis skoro ztrácí. Dolní řada má stejné odstíny, skoro stejnou sytost a také světlost 55 procent, jen v OKLCH, a kontrast drží u všech barev mezi 4,6 a 5,4.

Ještě líp je rozdíl vidět na gradientu. Oba následující projdou stejnou duhou, první se ale míchá v RGB a druhý v OKLCH:

css
.rainbow-rgb {
  background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 127, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 0, 255), rgb(143, 0, 255));
}

.rainbow-oklch {
  background: linear-gradient(to right, oklch(0.70 0.29 29), oklch(0.70 0.26 60), oklch(0.70 0.26 120), oklch(0.70 0.26 180), oklch(0.70 0.26 240), oklch(0.70 0.26 300));
}

Dva duhové gradienty od červené po fialovou nad sebou, pod každým šedý proužek s vnímanou světlostí. Gradient v RGB má ve žluté a zelené části skoro bílý proužek a v modré skoro černý, světlost tedy skáče. Gradient v OKLCH má všechny zastávky se světlostí 0.70 a jeho šedý proužek je po celé délce skoro stejně šedý. Barvy přechází plynuleji a žádná část nesvítí ani nepropadá.

Všimněte si, že v OKLCH píšeme světlost i jako desetinné číslo 0.70 místo 70%, oba zápisy znamenají totéž. Některé zastávky druhého gradientu jsou tak syté, že je běžný monitor neumí zobrazit, a prohlížeč je ořízne na nejbližší barvu, kterou zobrazit umí. Na monitoru s širším barevným rozsahem bude gradient ještě sytější.

Proto se z OKLCH snáz staví palety: když mají všechny barvy stejnou světlost, mají i podobný kontrast s textem. Zápis oklch() umí všechny současné prohlížeče a je v něm zapsaná i výchozí paleta Tailwindu 4. S hsl() se ale ve starších stylech potkáte ještě dlouho.

Pravidlo 60-30-10

Kolik které barvy na stránku dát, napoví pravidlo, které si web vypůjčil z bytového designu. Zhruba 60 % plochy dostane dominantní barva, obvykle neutrální pozadí. 30 % připadne doplňkové barvě, třeba hlavičce, patičce a plochám sekcí. Zbylých 10 % je akcent, tedy barva, kterou označujeme to, na co se má kliknout.

Obrys webové stránky se třemi barvami. Světle šedé pozadí obsahu zabírá asi 60 procent plochy, černá hlavička a patička asi 30 procent a korálová tlačítka jen 10 procent. Pod stránkou je pruh rozdělený ve stejném poměru.

Čísla nejsou zákon a nikdo je neměří pravítkem. Jde o to, že akcentu musí být málo. Oranžové tlačítko na bílé stránce vidíme hned, oranžové tlačítko na oranžové stránce nenajdeme.

Kontrast

Text musí mít od pozadí dostatečný kontrast, jinak ho část lidí nepřečte. Pravidla přístupnosti WCAG chtějí pro běžný text poměr aspoň 4,5:1 a pro velký text 3:1. Světle šedý text na bílém pozadí vypadá elegantně, ale často těch 4,5:1 nesplní.

Šest ukázek stejného textu Program na tento týden ve dvou sloupcích, vlevo nízký a vpravo vysoký kontrast. Na bílém pozadí je vlevo světle šedý text s kontrastem 2,1 a vpravo tmavě šedý s 12,6. Na tmavě modrošedém pozadí je vlevo šedý text s 2,6 a vpravo skoro bílý s 12,7. Na barevném pozadí je vlevo červený text na zeleném s kontrastem 1,2, který se skoro nedá přečíst, a vpravo tmavě modrý text na žlutém s 9,6. Všechny ukázky vlevo jsou pod hranicí 4,5.

U dvou barev nestačí, že se liší odstínem. Červená a zelená v ukázce vypadají každá jinak, ale mají skoro stejnou světlost, a právě na světlosti kontrast stojí. Lidé, kteří červenou a zelenou nerozlišují, by text neviděli vůbec.

css
/* chyba, kontrast 2,8:1 */
.note {
  color: #999999;
  background: #ffffff;
}

/* správně, kontrast 7:1 */
.note {
  color: #595959;
  background: #ffffff;
}

Kontrast si nemusíte počítat. Ve vývojářských nástrojích klikněte u prvku v panelu Styles na čtvereček s barvou textu. Ve výběru barvy uvidíte řádek Contrast ratio s poměrem a zatržítky, jestli splňuje požadované úrovně.

Přístupnosti se do hloubky budeme věnovat v příští lekci. Kontrast patří i sem, protože je to zároveň otázka vzhledu: dobrý kontrast dělá stránku čitelnější pro všechny, nejen pro lidi se slabším zrakem.

Bonus

Asi 8 % mužů nerozlišuje dobře červenou a zelenou. Proto barva nesmí být jediný nosič informace: chybné políčko formuláře potřebuje vedle červeného rámečku i text chyby. Ve vývojářských nástrojích Chromu a Edge najdete v panelu Rendering volbu Emulate vision deficiencies, která stránku ukáže tak, jak ji vidí lidé s různými poruchami barevného vidění.