Kontrola kontrastu barev

Bezplatná kontrola kontrastu podle WCAG. Zadej barvu textu a pozadí a získáš poměr kontrastu, výsledky AA/AAA a nejbližší vyhovující barvu.

Barva textu

Barva pozadí

Poměr kontrastu

–

Výsledky WCAG 2.2

	AA	AAA
Běžný text
Velký text
Prvky rozhraní a grafika		–

Náhled

Běžný text (16 px). Příliš žluťoučký kůň úpěl ďábelské ódy.

Velký text (24 px)

Velký tučný text (18,66 px tučně)

Tlačítko

Návrhy

Cíl

Nejbližší vyhovující barva textu

–

Nejbližší vyhovující barva pozadí

–

Jak používat kontrolu kontrastu

Zadej Barvu textu a Barvu pozadí. Použij vzorky barev, nebo napiš libovolnou hodnotu CSS do polí: kód HEX jako #595959, rgb(89 89 89), hsl(0 0% 35%) nebo název, například navy.
Poměr kontrastu se aktualizuje při psaní, od 1:1 (žádný kontrast) po 21:1 (černá na bílé).
Tabulka Výsledky WCAG 2.2 ukazuje Splňuje nebo Nesplňuje pro Běžný text, Velký text a Prvky rozhraní a grafika na úrovních AA a AAA.
Zkontroluj Náhled: ukazuje běžný text, velký text, velký tučný text, obrys tlačítka a ikonu ve tvých dvou barvách.
Pokud některá úroveň nevyhoví, vyber Cíl v části Návrhy. Nástroj navrhne Nejbližší vyhovující barvu textu a Nejbližší vyhovující barvu pozadí. Kliknutím na Použít jednu z nich aplikuješ. Prohodit barvy zamění text a pozadí.

Vše se počítá ve tvém prohlížeči; nic, co zadáš, se neodesílá na server.

Jak se poměr kontrastu počítá

WCAG 2.x definuje poměr jako (L1 + 0,05) / (L2 + 0,05), kde L1 je relativní luminance světlejší barvy a L2 tmavší. Relativní luminance se počítá z linearizovaných kanálů sRGB: každý kanál se dekóduje přenosovou křivkou sRGB a pak L = 0,2126 R + 0,7152 G + 0,0722 B. Zelená váží nejvíc, protože na ni je naše oko nejcitlivější, a proto čistá zelená vypadá mnohem jasněji než čistá modrá stejné „síly“.

Poměr se nikdy nezaokrouhluje nahoru. #777777 na bílé dává asi 4,48:1 a u běžného textu nesplňuje AA, i když to vypadá jako „4,5“. Tento nástroj zobrazenou hodnotu ořezává na dvě desetinná místa, takže vidíš to, co WCAG kontroluje.

Pokud je barva textu průsvitná (například rgb(0 0 0 / 60%)), nejprve se smíchá s pozadím, tak jak by ji vykreslil prohlížeč. Průhlednost barvy pozadí se ignoruje, protože není známo, co leží za stránkou.

Úrovně WCAG přehledně

Obsah	AA	AAA
Běžný text	4,5:1	7:1
Velký text (24 px, nebo 18,66 px tučně)	3:1	4,5:1
Prvky rozhraní a smysluplná grafika	3:1	–

„Velký text“ znamená alespoň 18 pt (24 pixelů CSS) nebo 14 pt tučně (asi 18,66 px). Loga a čistě dekorativní text žádný požadavek nemají. Pravidlo 3:1 pro prvky rozhraní (kritérium úspěšnosti 1.4.11) platí pro okraje vstupních polí a tlačítek, indikátory zaměření, ikony a čáry grafů, které uživatelé potřebují vidět.

Jak fungují návrhy

Navržené barvy zachovávají odstín a chromu tvé barvy v prostoru OKLCH a mění jen její světlost, tmavší nebo světlejší, dokud se nedosáhne cílového poměru. Nástroj pak vybere ten ze dvou směrů, který je vizuálně nejblíže původní barvě, měřeno v OKLab. Výsledek se po zaokrouhlení na kód HEX znovu ověří, takže skutečně vyhovuje. Pokud žádná světlost cíle nedosáhne (například 7:1 proti středně šedé), nástroj to oznámí.

O APCA

APCA (Accessible Perceptual Contrast Algorithm) je novější model kontrastu zvažovaný pro budoucí WCAG 3. Zohledňuje tloušťku písma, velikost a polaritu (tmavé na světlém oproti světlému na tmavém). Je stále ve stavu návrhu a není právním ani normativním požadavkem, proto tento nástroj uvádí výsledky WCAG 2.x, které zůstávají referencí pro evropskou normu přístupnosti EN 301 549, Section 508 a většinu zákonů.

Časté dotazy

Jaký poměr kontrastu potřebuji pro běžný text?

Alespoň 4,5:1 pro úroveň AA, kterou vyžaduje většina zákonů a pravidel. Pro dlouhé čtení nebo pro publikum se zrakovým postižením usiluj o 7:1 (AAA).

Splňuje bílý text na barvě mé značky požadavky?

Zadej bílou jako barvu textu a barvu své značky jako pozadí. Mnoho středních odstínů modré, oranžové a zelené dosáhne jen 3:1: to stačí pro velké nadpisy a tlačítka s velkými popisky, ne pro malý text. Pokud potřebuješ AA pro běžný text, použij navrženou barvu pozadí.

Proč pořadí barev poměr nemění?

Vzorec vždy dělí světlejší luminanci tmavší, takže tmavé na světlém i světlé na tmavém dává stejný poměr. Vnímaný kontrast se však může mírně lišit, což je jeden z problémů, které se snaží řešit APCA.

Stačí 4,49:1 k tomu, aby barvy vyhověly?

Ne. Hranice WCAG jsou přísná minima: 4,49:1 u běžného textu nesplňuje AA. Použij návrh a získáš barvu, která skutečně vyhoví.

Funguje kontrola kontrastu i pro zástupný a zakázaný text?

Zástupný text musí splňovat stejné minimum 4,5:1, pokud nese informaci. Zakázané ovládací prvky jsou z požadavků na kontrast vyňaty, ale čitelné zakázané stavy uživatelům stále pomáhají.