Kontrola kontrastu farieb

Bezplatná kontrola kontrastu podľa WCAG. Zadaj farbu textu a pozadia a získaš kontrastný pomer, výsledky AA/AAA a najbližšiu vyhovujúcu farbu.

Farba textu

Farba pozadia

Kontrastný pomer

–

Výsledky WCAG 2.2

	AA	AAA
Bežný text
Veľký text
Prvky rozhrania a grafika		–

Náhľad

Bežný text (16 px). Kŕdeľ ďatľov učí koňa žrať kôru.

Veľký text (24 px)

Veľký tučný text (18,66 px tučné)

Tlačidlo

Návrhy

Cieľ

Najbližšia vyhovujúca farba textu

–

Najbližšia vyhovujúca farba pozadia

–

Ako používať kontrolu kontrastu

Zadaj Farbu textu a Farbu pozadia. Použi farebné vzorky alebo zadaj ľubovoľnú hodnotu CSS do polí: kód HEX ako #595959, rgb(89 89 89), hsl(0 0% 35%) alebo názov ako navy.
Kontrastný pomer sa aktualizuje počas písania, od 1:1 (žiadny kontrast) po 21:1 (čierna na bielej).
Tabuľka Výsledky WCAG 2.2 ukazuje Vyhovuje alebo Nevyhovuje pre Bežný text, Veľký text a Prvky rozhrania a grafika na úrovniach AA a AAA.
Pozri si Náhľad: zobrazuje bežný text, veľký text, veľký tučný text, obrys tlačidla a ikonu v tvojich dvoch farbách.
Ak niektorá úroveň nevyhovuje, vyber Cieľ v časti Návrhy. Nástroj navrhne Najbližšiu vyhovujúcu farbu textu a Najbližšiu vyhovujúcu farbu pozadia. Kliknutím na Použiť jednu z nich uplatníš. Vymeniť farby zamení text a pozadie.

Všetko sa počíta v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Ako sa počíta kontrastný pomer

WCAG 2.x definuje pomer ako (L1 + 0,05) / (L2 + 0,05), kde L1 je relatívny jas svetlejšej farby a L2 tmavšej. Relatívny jas sa počíta z linearizovaných kanálov sRGB: každý kanál sa dekóduje prenosovou krivkou sRGB a potom L = 0,2126 R + 0,7152 G + 0,0722 B. Zelená má najväčšiu váhu, pretože naše oči sú na ňu najcitlivejšie, a preto čistá zelená vyzerá oveľa jasnejšie než čistá modrá rovnakej „sily“.

Pomer sa nikdy nezaokrúhľuje nahor. #777777 na bielej dáva asi 4,48:1 a pre bežný text nevyhovuje úrovni AA, hoci vyzerá ako „4,5“. Tento nástroj zobrazenú hodnotu skracuje na dve desatinné miesta, takže vidíš to, čo kontroluje WCAG.

Ak je farba textu priesvitná (napríklad rgb(0 0 0 / 60%)), najprv sa zmieša s pozadím, tak ako by ju vykreslil prehliadač. Priehľadnosť farby pozadia sa ignoruje, pretože nie je známe, čo je za stránkou.

Úrovne WCAG v skratke

Obsah	AA	AAA
Bežný text	4,5:1	7:1
Veľký text (24 px alebo 18,66 px tučne)	3:1	4,5:1
Prvky rozhrania a významná grafika	3:1	–

„Veľký text“ je text s veľkosťou aspoň 18 pt (24 pixelov CSS) alebo 14 pt tučne (asi 18,66 px). Pre logá a čisto dekoratívny text neplatí žiadna požiadavka. Pravidlo 3:1 pre prvky rozhrania (kritérium úspešnosti 1.4.11) platí pre okraje vstupných polí a tlačidiel, indikátory zamerania, ikony a čiary grafov, ktoré používatelia potrebujú vidieť.

Ako fungujú návrhy

Navrhované farby si v priestore OKLCH zachovajú odtieň a sýtosť tvojej farby a menia len jej svetlosť, tmavšiu alebo svetlejšiu, kým sa nedosiahne cieľový pomer. Nástroj potom vyberie ten zo smerov, ktorý je vizuálne najbližšie k tvojej pôvodnej farbe, meranej v OKLab. Výsledok sa po zaokrúhlení na kód HEX znova skontroluje, takže naozaj vyhovuje. Ak žiadna svetlosť cieľ nedosiahne (napríklad 7:1 voči stredne sivej), nástroj to oznámi.

O APCA

APCA (Accessible Perceptual Contrast Algorithm) je novší model kontrastu zvažovaný pre budúce WCAG 3. Zohľadňuje hrúbku a veľkosť písma a polaritu (tmavé na svetlom oproti svetlému na tmavom). Je stále v štádiu návrhu a nie je právnou ani normatívnou požiadavkou, preto tento nástroj uvádza výsledky WCAG 2.x, ktoré zostávajú referenciou pre európsku normu prístupnosti EN 301 549, Section 508 a väčšinu zákonov.

Často kladené otázky

Aký kontrastný pomer potrebujem pre bežný text?

Aspoň 4,5:1 pre úroveň AA, čo je úroveň, ktorú vyžaduje väčšina zákonov a smerníc. Pri dlhých textoch alebo pre čitateľov so zníženým zrakom mieň na 7:1 (AAA).

Vyhovuje biely text na farbe mojej značky?

Zadaj bielu ako farbu textu a farbu svojej značky ako pozadie. Mnohé stredne tmavé modré, oranžové a zelené dosahujú len 3:1: vhodné pre veľké nadpisy a tlačidlá s veľkými popiskami, nie pre malý text. Ak potrebuješ AA pre bežný text, použi navrhnutú farbu pozadia.

Prečo poradie farieb nemení pomer?

Vzorec vždy delí jas svetlejšej farby jasom tmavšej, takže tmavé na svetlom a svetlé na tmavom dávajú rovnaký pomer. Vnímaný kontrast sa však môže mierne líšiť, čo je jeden z problémov, ktoré sa snaží riešiť APCA.

Stačí 4,49:1 na splnenie?

Nie. Prahové hodnoty WCAG sú prísne minimá: 4,49:1 nevyhovuje úrovni AA pre bežný text. Použi návrh a získaš farbu, ktorá naozaj vyhovuje.

Funguje kontrola aj pre zástupný alebo zakázaný text?

Zástupný text musí spĺňať rovnaké minimum 4,5:1, ak prenáša informáciu. Zakázané ovládacie prvky sú z požiadaviek na kontrast vyňaté, no čitateľné zakázané stavy používateľom stále pomáhajú.