Kontrola kontrastu barev (WCAG 2.2 AA a AAA)
Kontrola kontrastu
Formát hex, například #2f47d9 nebo #fff.
Běžný text: vložte produkt do košíku a zaplaťte ve třech krocích.
Velký text: 129 €
Okraj a ikona tlačítka
Kontrastní poměr
4.54 : 1
| Požadavek | Minimum | Výsledek |
|---|---|---|
| Běžný text, úroveň AAWCAG 1.4.3 | 4.5 : 1 | — |
| Velký text, úroveň AAWCAG 1.4.3 | 3 : 1 | — |
| Běžný text, úroveň AAAWCAG 1.4.6 | 7 : 1 | — |
| Velký text, úroveň AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Ikony, okraje polí a další prvky rozhraníWCAG 1.4.11 | 3 : 1 | — |
Velký text znamená alespoň 24 px, nebo 18.66 px tučně. Kontrola běží ve vašem prohlížeči; barvy se nikam neodesílají.
Zadejte barvu textu a barvu pozadí: nástroj ukáže kontrastní poměr podle vzorce WCAG 2.x, zda dvojice splňuje úroveň AA a AAA pro běžný a velký text a pro části rozhraní, a nejbližší barvu textu, která dosáhne 4,5:1.
Co výsledky znamenají
| Požadavek | Minimum | Kritérium WCAG |
|---|---|---|
| Běžný text, úroveň AA | 4,5 : 1 | 1.4.3 Kontrast (minimální) |
| Velký text, úroveň AA | 3 : 1 | 1.4.3 Kontrast (minimální) |
| Běžný text, úroveň AAA | 7 : 1 | 1.4.6 Kontrast (zvýšený) |
| Velký text, úroveň AAA | 4,5 : 1 | 1.4.6 Kontrast (zvýšený) |
| Ikony, okraje, části rozhraní | 3 : 1 | 1.4.11 Netextový kontrast |
Úroveň AA je úroveň, o kterou se opírá EN 301 549, evropský akt o přístupnosti, německý zákon BFSG i praxe v USA podle ADA. AAA je přísnější a tyto zákony ji nevyžadují.
Proč je kontrast v e-shopu důležitý
Šedé ceny na bílém, bílý text na bledém banneru, světlé nápovědy ve formuláři objednávky: lidé se slabším zrakem, starší zákazníci a kdokoli s telefonem na slunci je čtou pomalu, nebo vůbec. Nízký kontrast je nejčastější problém, který automatická kontrola na webech e-shopů najde. Opravujte ho v nastavení barev šablony nebo v jejích CSS proměnných, ne prvek po prvku.
Jak se poměr počítá
Poměr porovnává relativní jas světlejší a tmavší barvy: (L1 + 0.05) / (L2 + 0.05). Pohybuje se od 1:1 (stejná barva) do 21:1 (černá na bílé). Průhlednost, stíny a obrázky na pozadí mění skutečný kontrast; text na obrázcích kontrolujte s nejtmavší a nejsvětlejší částí obrázku pod ním.
Zkontrolujte celý web
Tento nástroj testuje jednu dvojici barev. Pandus najde na stránce každý text s nízkým kontrastem — s barvami, poměrem a snímkem obrazovky — a každý týden kontroluje každou stránku vašeho webu. Viz také pravidlo nízký kontrast textu.