Porozumenie smerniciam kontrastu WCAG 2.1 / 2.2
Nástroj Kontrola kontrastu (Contrast Checker) umožňuje zadať farbu textu a farbu pozadia s cieľom určiť ich vzájomný kontrastný pomer podľa noriem WCAG 2.1 / 2.2. Tento pomer vyjadruje rozdiel v jase medzi textom a jeho pozadím. Na základe týchto výpočtov nástroj zobrazuje, ktoré úrovne prístupnosti (AA a AAA) daná farebná kombinácia spĺňa pre bežný text, veľký text a prvky používateľského rozhrania.
Tento proces je dôležitý pre rôzne skupiny profesionálov:
- Dizajnéri, ktorí kontrolujú čitateľnosť textu a jednotlivých komponentov.
- Vývojári, ktorí zabezpečujú splnenie stanovených noriem prístupnosti.
- Obsahové tímy, ktoré overujú kontrast farieb vo svojich materiáloch.
Každá kontrola prebieha vo vašom prehliadači. Nič z toho, čo zadáte, sa neodosiela na BroBroGo.
Vstupné hodnoty a podporované formáty farieb
Nástroj vyžaduje na výpočet dva základné vstupy:
- Farba textu: Farebná hodnota reprezentujúca popredie.
- Farba pozadia: Farebná hodnota reprezentujúca pozadie, na ktorom je text umiestnený.
Obe tieto polia prijímajú tri formáty farebných hodnôt:
- Hexadecimálne hodnoty (napr.
#1a1a1a). - Hodnoty
rgb()(napr.rgb(26, 26, 26)). - Hodnoty
hsl().
Nástroj je vybavený aj tlačidlom na prehodenie, ktoré rýchlo zamení farbu textu a pozadia. Pri prvom načítaní sú predvolené hodnoty nastavené na #4f46e5 pre text a #ffffff pre pozadie, čo vytvára počiatočný kontrastný pomer 6,29.
Ak zadáte neplatný formát, systém vás upozorní chybovým hlásením:
- Pri neplatnej farbe textu sa zobrazí správa: „Zadajte platnú farbu textu, napríklad #1a1a1a or rgb(26, 26, 26).“
- Pri neplatnej farbe pozadia sa zobrazí správa: „Zadajte platnú farbu pozadia, napríklad #ffffff alebo rgb(255, 255, 255).“
Výstupy merania a interpretácia výsledkov
Po zadaní platných farieb nástroj okamžite vypočíta a zobrazí nasledujúce výstupné údaje:
- Kontrastný pomer: Vypočítaný pomer medzi farbou textu a pozadia, zobrazený vo formáte „X:1“. Tento pomer sa pohybuje v rozmedzí od 1:1 (žiadny kontrast, kedy sú farby identické) až po 21:1 (maximálny možný kontrast, napríklad čierny text na bielom pozadí).
- Bežný text: Zobrazuje stav „Vyhovuje“ alebo „Nevyhovuje“ pre úrovne prísnosti AA a AAA.
- Veľký text: Zobrazuje stav „Vyhovuje“ alebo „Nevyhovuje“ pre úrovne prísnosti AA a AAA.
- Rozhranie a grafika: Tento riadok vyhodnocuje úspešnosť voči jedinej hraničnej hodnote 3:1. Na rozdiel od textu tento riadok neobsahuje žiadne rozdelenie na úrovne AA a AAA – nástroj preň zobrazuje iba jeden spoločný výsledok.
Pravidlá pre dosiahnutie súladu s úrovňami AA a AAA
Aby farebná kombinácia prešla testom prístupnosti, musí dosiahnuť špecifické minimálne hodnoty kontrastného pomeru podľa štandardov WCAG 2.1 / 2.2:
- Bežný text (úroveň AA): Vyžaduje kontrastný pomer minimálne 4,5:1.
- Bežný text (úroveň AAA): Vyžaduje kontrastný pomer minimálne 7:1.
- Veľký text (úroveň AA): Vyžaduje kontrastný pomer minimálne 3:1.
- Veľký text (úroveň AAA): Vyžaduje kontrastný pomer minimálne 4,5:1.
- Rozhranie a grafika: Vyžaduje kontrastný pomer minimálne 3:1. Ide o jediný riadok s jedným pevným limitom namiesto samostatných úrovní AA a AAA.
Z hľadiska metodiky sa za veľký text považuje text od veľkosti 18pt (približne 24px), prípadne od veľkosti 14pt (približne 18,5px), pokiaľ je formátovaný ako tučný. Všetok text, ktorý nedosahuje tieto rozmery, sa klasifikuje ako bežný text.
Celkový verdikt prístupnosti
Nástroj generuje jednoznačné súhrnné rozhodnutie, ktoré indikuje najvyššiu dosiahnutú úroveň prístupnosti pre testovanú kombináciu farieb. Môžu nastať tieto stavy:
- „Vyhovuje úrovniam AA aj AAA pre bežný text.“ – Tento verdikt sa zobrazí, ak kontrastný pomer dosiahne hodnotu aspoň 7:1.
- „Vyhovuje úrovni AA pre bežný text.“ – Tento verdikt sa zobrazí, ak kontrastný pomer spĺňa podmienku pre úroveň AA pri bežnom texte (aspoň 4,5:1), ale nedosahuje úroveň AAA.
- „Vyhovuje úrovni AA iba pre veľký text.“ – Tento verdikt sa zobrazí, ak je kontrastný pomer v rozmedzí od 3:1 do 4,4:1, čo postačuje len pre väčšie písmo.
- „Pod minimom úrovne AA – zvýšte kontrast.“ – Tento verdikt sa zobrazí, ak je kontrastný pomer nižší ako 3:1, čo znamená, že kombinácia nevyhovuje základným požiadavkám prístupnosti.
Často kladené otázky (FAQ)
Čo znamenajú výsledky AA a AAA?
AA je úroveň, o ktorú sa snaží väčšina webov: vyžaduje pomer aspoň 4,5:1 pre bežný text a 3:1 pre veľký text. Úroveň AAA je prísnejšia – vyžaduje 7:1 pre bežný text a 4,5:1 pre veľký text. Pomer sa pohybuje od 1:1 (žiadny kontrast) do 21:1 (čierny na bielom).
Čo sa považuje za veľký text?
Text od veľkosti 18pt (približne 24px) alebo 14pt (približne 18.5px), ak je tučný. Väčší text zostáva čitateľný aj pri nižšom kontraste, preto vyhovuje úrovni AA pri pomere 3:1 a úrovni AAA pri 4,5:1 namiesto prísnejších limitov pre bežný text.
Aké formáty farieb môžem zadávať?
Zadajte hexadecimálnu hodnotu ako #1a1a1a, hodnotu rgb() ako rgb(26, 26, 26) alebo hodnotu hsl() – prípadne kliknite na vzorkovník a farbu vyberte. Tlačidlom na prehodenie môžete rýchlo zameniť farbu textu a pozadia.
Používa sa tu WCAG 2 alebo novšia metóda APCA?
Používa vzorec WCAG 2.1 / 2.2, na ktorý sa dnes odvolávajú pravidlá prístupnosti a audity. APCA je novšia metóda založená na vnímaní, ktorá sa stále pripravuje pre WCAG 3 – je sľubná, ale zatiaľ nie je oficiálnym štandardom zhody, preto ju výsledky úspešnosti tu nepoužívajú.