# Kontrola barevného kontrastu

Ověřte kontrast mezi barvou textu a barvou pozadí podle WCAG 2 a APCA. Kontrola vypočítá kontrastní poměr WCAG 2 z relativní luminance, uvede, zda běžný a velký text splňuje úrovně AA a AAA a zda vyhovují také UI grafiky, a doplní hodnotu kontrastu světlosti APCA s doporučením, k čemu je tato hodnota užitečná. Určeno návrhářům a vývojářům, kteří vytvářejí přístupná rozhraní.

## Často kladené otázky

### Co znamenají úrovně WCAG?

Úroveň AA vyžaduje 4.5:1 pro běžný text a 3:1 pro velký text (kritérium úspěšnosti 1.4.3); úroveň AAA vyžaduje 7:1 a 4.5:1 (1.4.6). Komponenty uživatelského rozhraní a smysluplná grafika potřebují kontrast 3:1 vůči sousedním barvám (1.4.11). Kontrola u každého z těchto pěti prahů uvádí, zda je splněn.

### Co se považuje za velký text?

WCAG definuje velký text jako písmo o velikosti alespoň 18 bodů v běžné řezu, tedy přibližně 24 CSS pixelů, nebo alespoň 14 bodů tučně, tedy přibližně 18,66 CSS pixelů. Menší text se považuje za běžný a vyžaduje vyšší poměr.

### Proč poměr 4.499:1 nesplňuje AA?

Prahové hodnoty WCAG jsou přesné, takže poměr, který by se zaokrouhlil na 4,5, ale je nižší, požadavky nesplňuje. Kontrola porovnává nezaokrouhlený poměr a zobrazuje jej zkrácený na dvě desetinná místa, takže uvedené číslo nikdy nevypadá lépe než skutečná hodnota.

### Co je APCA?

Algoritmus přístupného vnímaného kontrastu (Accessible Perceptual Contrast Algorithm) je metoda výpočtu kontrastu vyvinutá pro návrhy WCAG 3. Modeluje vnímaný kontrast světlosti, rozlišuje mezi textem a pozadím a vrací hodnotu kontrastu světlosti Lc přibližně od -108 do 106. Zatím není součástí žádného vydaného standardu WCAG, proto pro ověření shody použijte výsledky WCAG 2 a APCA jako doplňkovou kontrolu.

### Proč je hodnota APCA někdy záporná?

APCA zohledňuje polaritu: kladné hodnoty znamenají tmavý text na světlém pozadí, záporné hodnoty světlý text na tmavém pozadí. Doporučení vycházejí z absolutní hodnoty, takže Lc -75 i Lc 75 spadají do stejné kategorie.

### Jak se určují úrovně doporučení APCA?

Vycházejí z jednoduchého režimu APCA bronze: pro hlavní text se doporučuje Lc 90, minimum pro hlavní text je Lc 75, pro ostatní textový obsah Lc 60, pro nadpisy a velký text Lc 45, pro text čitelný jen při krátkém pohledu, například zástupný text, Lc 30 a pro netextové prvky Lc 15. Velikost a tloušťka písma jsou stále důležité, proto tyto úrovně považujte za výchozí vodítka, nikoli za konečný verdikt.

### Která verze APCA je implementována?

Konstanty APCA-W3 verze 0.0.98 G, revize 4g, s jednoduchou mocninou 2.4 pro kanály sRGB, měkkým limitem černé a oříznutím nízkého kontrastu. Černý text na bílém pozadí má hodnotu přibližně Lc 106.0 a bílý text na černém Lc -107.9, což odpovídá referenční implementaci.

### Jaké barevné formáty mohu zadat?

Hexadecimální kódy s # i bez něj, CSS názvy barev, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() barevné prostory, například display-p3, a cmyk(). Barvy mimo sRGB se nejprve převedou do sRGB, protože oba vzorce jsou definovány pro barvy obrazovky sRGB.

### Jak se zpracovávají průhledné barvy?

Částečně průhledná barva textu se před měřením smíchá s pozadím tak, jak ji vykresluje prohlížeč. Částečně průhledné pozadí se nejprve smíchá s bílou. Výsledek uvádí neprůhledné barvy textu a pozadí, které byly skutečně porovnány.

### Záleží na pořadí těchto dvou barev?

U WCAG 2 na pořadí nezáleží, protože poměr světlejší a tmavší luminance je v obou případech stejný. U APCA na něm záleží, protože text a pozadí mají rozdílnou váhu. Barvu textu proto zadejte do prvního pole a barvu pozadí do druhého.

Vaše reklama zde?

[Napište nám](mailto:hi@dennn.is?subject=Inzerce%20na%20OneClick%20Pro)

[Reklama Sada pluginů připravená pro agenty pro WordPress.](https://sleekwp.com/?ref=oneclickpro)