WCAG 2.x
APCA (WCAG 3.0 draft)
Tmavý text na světlém pozadí
| Velikost | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|
Náhled
Nadpis stránky
Toto je ukázkový odstavcový text o velikosti 16 px. Zkontrolujte, zda je dobře čitelný na zvoleném pozadí.
Malý text 12 px — často problematický pro přístupnost.
Simulace barvosleposti
Návrhy pro splnění WCAG AA
CSS
color: #1E293B; background-color: #FFFFFF;
Jak kontrolu kontrastu barev použít
- Zadejte barvu textu a barvu pozadí — pomocí color pickeru nebo zadáním hodnoty ve formátu HEX, RGB či HSL.
- Kontrastní poměr se vypočítá okamžitě — uvidíte hodnocení WCAG AA i AAA pro různé velikosti textu a APCA Lc hodnotu s doporučením velikosti písma.
- V sekci náhled zkontrolujte čitelnost textu na zvoleném pozadí — nadpis, odstavec i malý text.
- Pokud kontrast nevyhovuje, klikněte na navrhovanou barvu v sekci Návrhy — automaticky se aplikuje nejbližší vyhovující odstín.
- Zkopírujte hotový CSS snippet a vložte ho přímo do svého kódu.
Co je kontrastní poměr barev a proč na něm záleží
Kontrastní poměr vyjadřuje rozdíl jasu mezi barvou textu a barvou pozadí. Čím vyšší je poměr, tím lépe je text čitelný. Maximální hodnota 21:1 odpovídá černému textu na bílém pozadí. Standard WCAG 2.x stanovuje minimální poměr 4,5:1 pro běžný text (úroveň AA) a 7:1 pro nejpřísnější úroveň AAA.
Dostatečný kontrast není jen otázka přístupnosti pro zrakově postižené. Pomáhá všem uživatelům — při čtení na mobilu na přímém slunci, při únavě očí nebo na nekvalitním monitoru. Webové stránky s nízkým kontrastem mají prokazatelně vyšší míru opuštění.
WCAG 2.x vs. APCA — dva přístupy k hodnocení kontrastu
WCAG 2.x používá jednoduchý poměr relativních luminancí. Je to zavedený standard, podle kterého se hodnotí přístupnost webů po celém světě. Rozlišuje pouze dvě kategorie textu — normální a velký. Ačkoli je spolehlivý, v některých situacích (zejména u středních tónů a barevných kombinací) může dávat zavádějící výsledky.
APCA (Accessible Perceptual Contrast Algorithm) je nový algoritmus připravovaný pro WCAG 3.0. Na rozdíl od poměrového přístupu pracuje s perceptuálním modelem lidského zraku a zohledňuje polaritu — tmavý text na světlém pozadí vnímáme jinak než světlý text na tmavém. Navíc nabízí podrobnou tabulku doporučených velikostí a tlouštěk písma pro danou úroveň kontrastu.
Jak zajistit přístupné barvy na webu
Začněte kontrolou hlavních barevných kombinací v designu — barva textu na pozadí, barvy tlačítek a odkazů, placeholder texty ve formulářích. Právě placeholdery a šedé popisky bývají nejčastějším problémem. Myslete také na barvoslepost — přibližně 8 % mužů má některou formu poruchy barvocitu. Náš nástroj simuluje tři nejčastější typy, takže si můžete ověřit, zda vaše barvy fungují pro všechny.