APCA vs kontrast podle WCAG 2: vzorec, stav a vysoký kontrast

Designéři, kteří kontrolují barvy, dříve či později narazí na dvě čísla: kontrastní poměr WCAG (4,5:1, 3:1) a hodnotu APCA, například Lc 75. Ne vždy se shodnou. Tato stránka vysvětluje, jak funguje vzorec WCAG 2, co je APCA a jaký je její skutečný stav a jak s oběma souvisí režim vysokého kontrastu ve Windows.

Krátká odpověď pro každého, kdo musí splnit požadavek: zákony a normy používají kontrastní poměr WCAG 2. Jde o obecné informace, nikoli o právní poradenství.

Vzorec WCAG 2 krok za krokem

WCAG 2.2 definuje kontrast ve dvou krocích, oba v jejím glosáři.

1. Relativní jas — jak jasná barva je, od 0 pro nejtmavší černou po 1 pro nejsvětlejší bílou. Pro každý kanál sRGB:

C_srgb = C_8bit / 255
C = C_srgb / 12.92                         if C_srgb <= 0.04045
C = ((C_srgb + 0.055) / 1.055) ^ 2.4       otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Váhy ukazují, že oko je mnohem citlivější na zelenou než na modrou. (Před květnem 2021 text WCAG používal jako práh hodnotu 0.03928; W3C uvádí, že to nemá praktický dopad.)

2. Kontrastní poměr — kde L1 je jas světlejší barvy a L2 jas tmavší:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Výsledek se pohybuje od 1:1 (stejná barva) do 21:1 (černá na bílé). Příklad: šedá #767676 má jas zhruba 0,181, takže na bílé dosáhne (1 + 0.05) / (0.181 + 0.05) ≈ 4,54:1 a minimum 4,5:1 splní. O stupeň světlejší #777777 dává zhruba 4,48:1 a nesplní — W3C říká, že hodnoty se nesmějí zaokrouhlovat, takže 4,499:1 nesplňuje 4,5:1.

Prahové hodnoty

Velký text má nejméně 18 bodů (24 CSS pixelů) nebo 14 bodů tučně (zhruba 18,66 CSS pixelu). W3C vysvětluje hodnotu 4,5:1 jako kompenzaci ztráty citlivosti na kontrast, která provází zrak zhruba 20/40. Libovolnou dvojici ověříte v naší kontrole kontrastu barev.

Známé limity vzorce WCAG 2

Vzorec je jednoduchý a testovatelný, a proto se hodí pro regulaci. Má ale i limity, které zmiňuje samotný dokument Understanding od W3C: nebere v úvahu tloušťku písma a tenká nebo neobvyklá písma mohou kvůli vyhlazování působit mnohem světleji, než odpovídá jejich nominální barvě — „kontrastní poměr, který nominálně vyhovuje …, ale v praxi má mnohem nižší kontrast“. Doporučení tam zní použít silnější písmo nebo dvojici barev, která minimum překračuje. Vzorec také předpokládá barvy v sRGB.

Vzorec je navíc symetrický: prohození textu a pozadí dá stejný poměr. Projekt APCA jde dál a uvádí, že matematika kontrastu WCAG 2 „přesně nemodeluje lidské zrakové vnímání ani zrakové postižení“ — to je výchozí bod APCA.

Co je APCA

Accessible Perceptual Contrast Algorithm je ve svém oficiálním repozitáři popsán jako metoda hodnocení, která předpovídá vnímaný kontrast mezi barvami sRGB na monitoru, vyvinutá pro práci W3 „Silver“ / WCAG 3. Rozdíly oproti WCAG 2 v praxi:

• Na pořadí záleží. První barva je text, druhá pozadí; výsledek má znaménko a znaménko ukazuje polaritu (tmavé na světlém, nebo světlé na tmavém).
• Jiná stupnice. Výstupem je hodnota Lc, zhruba od −108 do 106, ne poměr.
• Velikost a tloušťka jsou součástí odpovědi. Vyhledávací funkce vrací pro hodnotu Lc velikosti písma potřebné při tloušťkách 100 až 900. README uvádí pravidla jako maximum Lc 90 pro písma větší než 24 px při tloušťce 300 a více.
• Beta. Knihovna (apca-w3 na npm) je ve fázi veřejného betaověřování a README označuje související návrh kritéria za rozpracovaný.

Je APCA součástí WCAG 3?

Jako konečné rozhodnutí ne. Dva fakty, oba ověřené v oficiálních zdrojích:

1. Repozitář APCA uvádí, že se APCA posuzuje jako náhrada matematiky kontrastu WCAG 2 pro budoucí standardy.
2. Aktuální pracovní návrh WCAG 3 z 10. září 2026 říká: „The contrast algorithm used in WCAG 3 is yet to be determined.“ (Algoritmus kontrastu ve WCAG 3 teprve bude určen.) Jeho požadavky na kontrast textu mají stav developing (ve vývoji) a míra zůstává otevřená. Návrh také uvádí, že není vhodné ho citovat jinak než jako rozpracovaný dokument.

APCA je tedy kandidát, WCAG 3 je návrh a ani jedno není normativní. WCAG 2.2 je aktuální doporučení W3C a EN 301 549, evropská norma za evropským aktem o přístupnosti, odkazuje na kritéria úspěšnosti WCAG 2. Dvojice barev, která projde podle APCA, ale nesplní 4,5:1, požadavek stále nesplňuje.

WCAG, nebo APCA: praktické pravidlo

1. Splňte poměr WCAG 2 u každého textu a každé součásti rozhraní. To je požadavek.
2. APCA, pokud chcete, používejte jako pomůcku při návrhu navíc: například k volbě silnější tloušťky pro tenký text nebo k odhalení, že dvojice, která jen tak tak splní 4,5:1, je u světlého textu na tmavém pozadí stále špatně čitelná.
3. Neprezentujte výsledky APCA jako shodu. Zprávy, prohlášení a zadávací dokumentace odkazují na WCAG 2.

Režim vysokého kontrastu ve Windows a vynucené barvy

„WCAG high contrast mode“ se hledá často, ale míchá dvě věci.

Co to je. Windows nabízí kontrastní motivy (Windows 11; ve Windows 10 se jmenují režim vysokého kontrastu). Microsoft je popisuje v Nastavení v části Usnadnění přístupu → Kontrastní motivy (Settings → Accessibility → Contrast themes), se zkratkou levý Alt + levý Shift + Print Screen. Prohlížeče pak na webové stránky použijí omezenou paletu, kterou si uživatel zvolil. CSS to pozná pomocí vlastnosti médií forced-colors: active znamená, že uživatelský agent vynucuje omezenou paletu barev zvolenou uživatelem a autor má k dispozici jen systémové barvy.

Co říká WCAG. Žádné kritérium úspěšnosti WCAG 2.2 nevyžaduje režim vysokého kontrastu ani podporu vynucených barev výslovně a web nemusí nabízet vlastní přepínač vysokého kontrastu, aby splnil AA. Váš kód ale může stránku lidem, kteří takový režim používají, rozbít, a pak neprojdou jiná kritéria:

• Fokus. Technika W3C C40 upozorňuje, že uživatelští agenti v režimech vynucených barev běžně potlačují box-shadow, takže indikátor fokusu vytvořený jen stínem zmizí. C40 navrhuje kombinovat ho s outline: 2px transparent solid kvůli kompatibilitě s režimy vynucených barev — to se týká kritéria 2.4.7 Viditelný fokus.
• Ikony a okraje. Ikony vykreslené obrázky na pozadí a ovládací prvky odlišené jen barvou pozadí mohou zmizet. To se týká kritérií 1.4.11 Netextový kontrast a 1.4.1 Použití barvy.
• Nepředpokládejte vyšší kontrast. Specifikace Media Queries poznamenává, že vynucené barvy nemusí nutně znamenat preferenci vyššího kontrastu; k tomu slouží prefers-contrast.

Otestovat několik klíčových stránek se zapnutým kontrastním motivem je dobrá praxe, i když ho žádné kritérium nejmenuje.

Co dělají naše kontroly

Naše kontroly používají kontrastní poměr WCAG 2, stejně jako požadavky: nízký kontrast textu na úrovni AA (1.4.3) a zvýšený kontrast na úrovni AAA (1.4.6), který naše zprávy ukazují odděleně od výsledků AA. Hodnoty APCA neuvádíme. Spusťte bezplatný WCAG checker na stránce, nebo otestujte jednu dvojici v kontrole kontrastu barev. Naše kontroly jsou automatizovanou kontrolou, nikoli úplným auditem, a nejde o právní poradenství.

Časté otázky

Mám pro kontrast použít WCAG, nebo APCA?

Pro splnění požadavků použijte kontrastní poměr WCAG 2: odkazuje na něj WCAG 2.2, EN 301 549 i zákony, které na nich stojí. APCA může být při návrhu užitečný druhý názor, ale dnes není součástí žádného normativního standardu.

Je APCA součástí WCAG 3?

Jako rozhodnutí ne. APCA vznikla jako kandidátní metoda pro WCAG 3 a je ve veřejné betaverzi. Aktuální pracovní návrh WCAG 3 ze září 2026 uvádí, že algoritmus kontrastu teprve bude určen, a samo WCAG 3 je návrh, ne standard.

Jak se počítá kontrastní poměr WCAG?

Obě barvy převeďte na relativní jas: linearizujte každý kanál sRGB, pak L = 0.2126 R + 0.7152 G + 0.0722 B. Poměr je (L1 + 0.05) / (L2 + 0.05), kde L1 je světlejší barva. Pohybuje se od 1:1 do 21:1 a nezaokrouhluje se.

Vyžaduje WCAG podporu režimu vysokého kontrastu ve Windows?

Žádné kritérium WCAG vysoký kontrast ani režim vynucených barev nejmenuje. Vaše vlastní CSS ale může stránku v tomto režimu rozbít, například kroužek fokusu vytvořený jen pomocí box-shadow, který prohlížeče v tomto režimu běžně odstraňují. Otestovat stránku v režimu vynucených barev je dobrá praxe.

Může dvojice barev splnit WCAG, a přesto být špatně čitelná?

Ano. Vzorec WCAG nebere v úvahu tloušťku písma a tenká písma s vyhlazováním mohou působit světleji, než odpovídá jejich barvě. W3C v takovém případě doporučuje silnější písmo nebo vyšší kontrast, než je minimum.

Zdroje

• W3C, WCAG 2.2 (definice relativního jasu a kontrastního poměru): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, WCAG 3.0 Working Draft: https://www.w3.org/TR/wcag-3.0/
• APCA, repozitář apca-w3: https://github.com/Myndex/apca-w3
• W3C, technika C40, dvoubarevný indikátor fokusu: https://www.w3.org/WAI/WCAG22/Techniques/css/C40
• W3C, Media Queries Level 5 (forced-colors): https://www.w3.org/TR/mediaqueries-5/
• Microsoft, Změna barevného kontrastu ve Windows: https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696