HEX, RGB, HSL, CMYK a kontrola kontrastu textu

Barevný kód je jedna barva zapsaná jiným způsobem. HEX, RGB a HSL popisují stejné světlo na obrazovce, takže se mezi sebou dají přesně převádět, až na zaokrouhlení. CMYK popisuje inkoust na papíře, a proto je jeho převod z hodnot pro obrazovku jen odhad. Poměr kontrastu podle WCAG je samostatné číslo, které porovnává, jak světlé jsou dvě barvy, a rozhoduje o tom, zda je text čitelný. Vložte barvu do nástroje Převod barev a uvidíte všechny formáty najednou.

Převod barevPotřebuji barvu v jiném formátuVyzkoušet zdarma

Pokud barvu, kterou potřebujete, najdete na fotce, v logu nebo na snímku obrazovky, nejdřív ji přečtěte z pixelu pomocí nástroje Pipeta barvy z obrázku a potom sem vložte HEX. Postup najdete v článku Jak vybrat přesnou barvu z obrázku.

HEX a RGB jsou stejná čísla

Kód HEX tvoří tři dvojice hexadecimálních číslic. #34D6A0 obsahuje hodnotu červené, zelené a modré. Každá dvojice je číslo od 00 do FF, tedy od 0 do 255 v desítkové soustavě. 34 je 52, D6 je 214 a A0 je 160, takže tvar RGB je rgb(52, 214, 160).

Zápis čísla v hexadecimální soustavě mění jen jeho vzhled. Zkrácený zápis #abc znamená #aabbcc, kde se každá číslice zdvojí. Osmimístný kód přidává na konec dvojici pro průhlednost, od 00 (zcela průhledné) po FF (zcela neprůhledné), takže #34D6A080 je zhruba z poloviny průhledné. RGBA zapisuje stejnou průhlednost jako číslo od 0 do 1.

CSS přijímá i názvy barev. rebeccapurple odpovídá #663399. Nástroj čte názvy prostřednictvím samotného prohlížeče, takže bude fungovat každý název, který prohlížeč zná.

HSL popisuje barvu tak, jak ji lidé popisují

HSL znamená odstín (hue), sytost (saturation) a světlost (lightness). Odstín je úhel na barevném kruhu: červená má 0 stupňů, zelená 120 a modrá 240. Sytost říká, jak daleko je barva od šedé, a světlost, jak daleko je od černé nebo bílé.

Stejná barva #34D6A0 odpovídá hsl(160, 66%, 52%). Její odstín leží mezi zelenou a modrou, sytost je vysoká a světlost je těsně nad středem. HSL se nejsnáze upravuje ručně, protože můžete zachovat odstín a měnit jen světlost, a získat tak světlejší nebo tmavší odstín.

HSV je HSL podobný, ale místo světlosti používá jas (value), tedy jas nejsilnějšího kanálu. Některé výběry barev ho používají, takže se s ním můžete setkat v jiných nástrojích. Nástroj ho zobrazuje vedle HSL, abyste je mohli porovnat.

CMYK je pro inkoust, a proto je to odhad

Obrazovky světlo sčítají: červená, zelená a modrá dohromady dávají bílou. Tiskárny světlo pohlcují inkoustem: azurová, purpurová, žlutá a černá na bílém papíře. Tyto dva systémy se nemohou přesně shodovat, takže hodnota CMYK je vždy převod.

Nástroj používá jednoduchý vzorec. Černá složka K je jedna minus největší z hodnot červené, zelené a modré na škále 0 až 1. Azurová, purpurová a žlutá se pak dopočítají z toho, co po K zbyde. Vzorec ignoruje inkoust, papír a barevný profil, který tiskárna používá. Výsledek v tisku se proto bude lišit a velmi světlé barvy mohou ležet mimo to, co lze inkousty CMYK vůbec vytisknout. Hodnotu CMYK používejte jako výchozí bod pro rozhovor s tiskárnou a před velkým nákladem si vyžádejte korektůru.

Kontrast je o světle, ne o odstínu

Poměr kontrastu podle WCAG porovnává dvě barvy podle jejich relativní jasové hodnoty (luminance). Luminance se počítá z hodnot červené, zelené a modré po gamma korekci a zelená se počítá nejvíce, protože lidské oko na ni reaguje nejcitlivěji. Každý kanál se nejprve převede z škály 0 až 255 a luminance je 0,2126 × červená + 0,7152 × zelená + 0,0722 × modrá.

Poměr je (světlejší luminance + 0,05) dělená (tmavší luminance + 0,05). Černá na bílém dává 21 : 1, což je nejvyšší možná hodnota. Dvě barvy se mohou odstínem výrazně lišit a přesto mít nízký poměr, pokud mají stejnou světlost, a právě takový případ má kontrola zachytit. Stejný nízký kontrast je důvodem, proč se QR kódy nedají načíst.

Prahové hodnoty

WCAG 2.x určuje dvě úrovně a požadovaný poměr závisí na velikosti textu.

• Úroveň AA: 4,5 : 1 pro běžný text a 3 : 1 pro velký text.
• Úroveň AAA: 7 : 1 pro běžný text a 4,5 : 1 pro velký text.

Velký text má 24 pixelů nebo více, případně 18,66 pixelu a tučně. Všechno menší se počítá jako běžný text. Častou chybou je šedý text na bílém. Středně šedá barva #777777 na bílém má poměr zhruba 4,48 : 1. U běžného textu tak těsně nesplní úroveň AA, ale u velkých nadpisů ji splní.

Nástroj zobrazuje poměr zaokrouhlený na dvě desetinná místa, ale každé splnění nebo nesplnění se posuzuje podle přesné hodnoty. Hodnota zobrazená jako 4,50 tak může neprojít, pokud je i těsně pod hranicí. Kontrola měří pouze jednu věc. Nepokrývá tloušťku písma, řádkování ani to, jak návrh vidí lidé s barvoslepostí, proto otestujte i skutečnou stránku ve skutečných velikostech.

Světlejší a tmavší odstíny

Pruh pod převodníkem ukazuje devět kroků kolem barvy: čtyři světlejší odstíny smíchané s bílou, samotnou barvu a čtyři tmavší odstíny smíchané s černou. Kliknutím na některý z nich zkopírujete jeho kód HEX. To se hodí, když potřebujete sadu příbuzných barev, například světlé pozadí, stav při najetí myší a tmavou barvu textu, všechny odvozené z jedné značkové barvy. Každou dvojici, kterou vyberete, zkontrolujte v části o kontrastu, než ji použijete.

Jak na to s fixmint

1. Vložte barvu do pole Barva ve formátu HEX, RGB, HSL nebo jako název v CSS, například rebeccapurple.
2. Přečtěte řádky HEX, RGB, HSL, HSV a CMYK. U potřebného řádku stiskněte Kopírovat. CMYK je označeno jako přibližné.
3. Zadejte barvu pozadí do pole Pozadí nebo ji vyberte ze vzorku a přečtěte poměr pod položkami Na bílém, Na černém a Na vašem pozadí.
4. Zkontrolujte čtyři značky pod každým poměrem: AA a AAA, každou pro běžný a velký text.
5. V části Světlejší a tmavší odstíny klepněte na vzorek a zkopírujte ho.

Rychlé odpovědi

Je hodnota CMYK přesná?

Ne. Je to prostý aritmetický převod, který ignoruje tiskárnu, papír i barevný profil. Berte ji jako výchozí bod a vyžádejte si korektůru.

Znamená vyhovující poměr kontrastu, že je návrh přístupný?

Znamená to, že barvy textu splňují jednu měřitelnou prahovou hodnotu. Přístupnost závisí také na velikosti, řádkování, pohybu a na tom, jak je stránka postavena, takže poměr je vodítko, ne úplný přezkum.

Ve kterém formátu mám ukládat barvy do stylopisu?

V tom, který se vám nejlépe čte a upravuje. HEX je kompaktní a běžný. HSL se snáze upravuje ručně, protože měníte světlost bez změny odstínu.