Výpočet kontrastního poměru podle standardů WCAG 2.1 / 2.2
Kontrast barev je jedním z nejdůležitějších faktorů přístupnosti webových stránek a aplikací. Tento nástroj umožňuje zadat barvu textu a barvu pozadí a okamžitě spočítat jejich vzájemný kontrastní poměr podle oficiální metodiky WCAG 2.1 / 2.2. Výsledný poměr určuje, zda vybraná barevná kombinace splňuje požadavky na přístupnost pro různé velikosti písma a prvky uživatelského rozhraní.
Při spuštění nástroje jsou nastaveny výchozí hodnoty #4f46e5 pro barvu textu a #ffffff pro barvu pozadí, což odpovídá kontrastnímu poměru 6.29:1. Pomocí integrovaného tlačítka pro prohození barev můžete barvu textu a pozadí okamžitě obrátit.
Každá kontrola probíhá ve vašem prohlížeči. Nic z toho, co zadáte, se neodesílá na servery BroBroGo. Zpracování dat je lokální, což zajišťuje soukromí při práci s návrhy.
Vstupní formáty barev a chybová hlášení
Nástroj přijímá širokou škálu standardních formátů pro definici barev:
- Hexadecimální hodnoty: např.
#1a1a1a - RGB zápis: např.
rgb(26, 26, 26) - HSL zápis
Pokud zadáte neplatný formát, nástroj vás na to upozorní chybovou zprávou. Pro neplatnou barvu textu se zobrazí upozornění:
- "Zadejte platnou barvu textu, například #1a1a1a or rgb(26, 26, 26)."
V případě neplatné barvy pozadí se zobrazí zpráva:
- "Zadejte platnou barvu pozadí, například #ffffff nebo rgb(255, 255, 255)."
Pravidla pro vyhodnocení kontrastu
Kontrastní poměr se pohybuje v rozmezí od 1:1 (žádný kontrast, barvy jsou totožné) do 21:1 (maximální možný kontrast, černá na bílé). Standardy WCAG definují dvě úrovně shody – AA (střední úroveň přístupnosti) a AAA (nejvyšší úroveň přístupnosti). Požadavky se liší podle toho, zda se jedná o běžný text, velký text nebo grafické komponenty:
| Prvek | Úroveň AA | Úroveň AAA |
|---|---|---|
| Běžný text | Minimálně 4.5:1 | Minimálně 7:1 |
| Velký text | Minimálně 3:1 | Minimálně 4.5:1 |
| Rozhraní a grafika | Minimálně 3:1 | Bez rozlišení AA/AAA |
U řádku Rozhraní a grafika se uplatňuje pouze jeden pevný limit 3:1. Tento řádek nemá rozdělení na úrovně AA a AAA, nástroj pro něj zobrazuje pouze jeden celkový výsledek.
Definice velikosti textu v metodice přístupnosti
Rozlišení mezi běžným a velkým textem je klíčové, protože větší písmo je pro lidské oko snáze čitelné i při nižším kontrastním poměru. Podle specifikace WCAG se za velký text považuje:
- Text o velikosti od 18pt (přibližně 24px).
- Text o velikosti od 14pt (přibližně 18.5px), pokud je použit řez tučné (bold).
Všechno písmo, které nedosahuje těchto rozměrů, je pro účely testování považováno za běžný text a musí splňovat přísnější kontrastní limity (4.5:1 pro AA, respektive 7:1 pro AAA).
Interpretace výsledků a celkový verdikt
Nástroj u každé kategorie (Běžný text, Velký text, Rozhraní a grafika) zobrazuje stav "Vyhovuje" nebo "Nevyhovuje". Na základě těchto dat generuje celkový shrnující verdikt, který odpovídá nejvyšší dosažené úrovni přístupnosti:
- "Splňuje AA i AAA pro běžný text." – Barevná kombinace dosáhla kontrastního poměru minimálně 7:1.
- "Splňuje AA pro běžný text." – Kontrastní poměr je v rozmezí od 4.5:1 do 6.99:1.
- "Splňuje AA pouze pro velký text." – Kontrastní poměr je v rozmezí od 3:1 do 4.49:1.
- "Pod minimem AA — zvyšte kontrast." – Kontrastní poměr je nižší než 3:1, což nevyhovuje základním požadavkům na přístupnost textu.
Tento nástroj je určen pro designéry kontrolující čitelnost textů a komponent, vývojáře zajišťující shodu s legislativními standardy přístupnosti a obsahové týmy, které ověřují barevný kontrast svých materiálů před publikací.
Často kladené otázky
Co znamenají výsledky AA a AAA?
AA je úroveň, o kterou usiluje většina webů: vyžaduje poměr alespoň 4,5:1 pro běžný text a 3:1 pro velký text. Úroveň AAA je přísnější – vyžaduje 7:1 pro běžný text a 4,5:1 pro velký text. Poměr se pohybuje od 1:1 (žádný kontrast) do 21:1 (černá na bílé).
Co se považuje za velký text?
Text od velikosti 18pt (cca 24px) nebo 14pt (cca 18,5px), pokud je tučný. Větší text zůstává čitelný i při nižším kontrastu, takže splňuje úroveň AA při poměru 3:1 a AAA při 4,5:1 namísto přísnějších limitů pro běžný text.
Které formáty barev mohu zadávat?
Může zadat hexadecimální hodnotu jako #1a1a1a, hodnotu rgb() jako rgb(26, 26, 26) nebo hodnotu hsl() – případně kliknout na vzorník a barvu vybrat. Tlačítkem pro prohození můžete barvu textu a pozadí obrátit.
Používá se zde WCAG 2, nebo novější metoda APCA?
Tento nástroj používá vzorec WCAG 2.1 / 2.2, na který dnes odkazují pravidla přístupnosti a audity. APCA je novější metoda založená na vnímání, která se stále připravuje pro WCAG 3 – je slibná, ale zatím to není schválený standard pro shodu, takže výsledky úspěšnosti ji zde nepoužívají.