Kontrola WCAG kontrastu probíhá v několika přímočarých krocích. Nic neopouští váš prohlížeč.
- Zadáte barvu popředí a pozadí. Nástroj parsuje hex, rgb(), hsl() nebo pojmenované CSS barvy na jejich hodnoty červeného, zeleného a modrého kanálu.
- Každý RGB kanál je linearizován pomocí sRGB přenosové funkce. Tím se gamma-kódované zobrazovací hodnoty převedou na lineární intenzity světla.
- Lineární hodnoty jsou váženy citlivostí lidského oka na každý kanál — 0,2126 pro červenou, 0,7152 pro zelenou, 0,0722 pro modrou. Součet je relativní svítivost barvy.
- Kontrastní poměr je (L1 + 0,05) ÷ (L2 + 0,05), kde L1 je svítivost světlejší barvy a L2 je svítivost tmavší. Přidaná 0,05 udržuje vzorec platný pro čistě černou.
- Poměr je porovnán s WCAG prahy: AA normální text potřebuje alespoň 4,5:1, AA velký text 3:1, AAA normální text 7:1 a AAA velký text 4,5:1. Velký text znamená alespoň 18pt nebo 14pt tučně.
FAQ
Časté otázky o WCAG kontrole kontrastu.
Jaký je rozdíl mezi AA a AAA?
AA je minimální úroveň shody pro většinu webového obsahu. Vyžaduje kontrastní poměr alespoň 4,5:1 pro normální text a 3:1 pro velký text. AAA je vyšší standard vyžadující 7:1 pro normální text a 4,5:1 pro velký text. Můžete cílit na AAA pro klíčový obsah, jako je tělo článku na zpravodajském webu, zatímco používáte AA pro širší design. Splnění AAA všude může být s brandovými barvami obtížné, takže mnoho týmů cílí na AA v celém rozsahu a klíčový text posouvají na AAA, kde mohou.
Co se počítá jako "velký text" podle WCAG?
WCAG 2.x definuje velký text jako alespoň 18 bodů (24px) pro běžnou váhu nebo 14 bodů (asi 19px) pro tučnou váhu. Symboly a ikony, které jsou součástí fontu, se řídí stejnými prahy. Pokud si nejste jisti, který práh se na vaše UI vztahuje, zkontrolujte oba — AA Velký má nižší laťku (3:1), takže většina barevných párů, které neprojdou AA Normální, skutečně projde AA Velký, když je text dostatečně velký.
Proč můj pár prochází AA Velký, ale ne AA Normální?
Protože AA Velký vyžaduje pouze poměr 3:1, zatímco AA Normální vyžaduje 4,5:1. WCAG nastavuje nižší práh pro velký text, protože větší znaky se snáze čtou i s menším kontrastem. Barevný pár, který dosahuje například 4,0:1, prochází AA Velký (práh 3:1), ale neprochází AA Normální (práh 4,5:1). To je velmi běžné u světlejších brandových barev použitých jako popředí na bílém pozadí.
Mohu se spolehnout pouze na tento nástroj pro audit přístupnosti?
Tento nástroj kontroluje jednu věc — WCAG 2.x kontrastní poměr mezi dvěma plnými barvami. Skutečná přístupnost zahrnuje více: indikátory fokusu, velikost a váhu písma, barvu jako jediný způsob předávání informací a kompatibilitu se čtečkami obrazovky a lupy. Používejte tuto kontrolu kontrastu spolu s dalšími metodami auditu pro úplný obrázek přístupnosti vaší aplikace.
Jaké barevné formáty vstup akceptuje?
Můžete vložit 3, 4, 6 nebo 8místné hex kódy (s # nebo bez), hodnoty rgb() a rgba() v legacy čárkové syntaxi nebo moderní mezerami oddělené syntaxi, hsl() a hsla() s libovolnou standardní jednotkou odstínu (deg, rad, grad, turn), hsv(), hwb() a libovolnou ze 150 pojmenovaných CSS barev ze specifikace CSS Color Module Level 4. Barva je parsována zcela na vašem zařízení.