Preskočiť na obsah
TextArray
100% lokálne

Kontrola kontrastu

Skontrolujte kontrast dvojíc farieb podľa WCAG vrátane verdiktov AA a AAA a návrhov opráv.

Vstup
Výstup

Kontrola kontrastu

Vložte dvojice farieb textu a pozadia, jednu na riadok — #7a1f2b on #ffffff, #333, #eee alebo rgb(0, 0, 0) #fff — a pri každej hneď dostanete kontrastný pomer podľa WCAG 2 spolu s verdiktom vyhovuje či nevyhovuje pre každú úroveň. Pomer siaha od 1 : 1 (žiadny kontrast) po 21 : 1 (čierna na bielej) a počíta sa z relatívneho jasu presne tak, ako ho definujú smernice, takže čísla sedia s auditnými nástrojmi aj s inšpektorom prehliadača.

WCAG pozná dve úrovne. AA, na ktorú sa odvoláva väčšina predpisov a zmlúv, vyžaduje 4,5 : 1 pre bežný text a 3 : 1 pre veľký text. Prísnejšia AAA žiada 7 : 1 a 4,5 : 1. Text sa počíta ako veľký od 18 pt (približne 24 px) pri bežnom reze, alebo od 14 pt (približne 18,7 px) pri tučnom — preto nadpis môže prejsť s pomerom, pri ktorom odsek neprejde. Prehľad vypíše všetky štyri kontroly pre každú dvojicu; kompaktný výstup dá jeden riadok na dvojicu, čo sa číta rýchlejšie, keď prechádzate celú paletu naraz.

Keď dvojica nespĺňa AA pre bežný text, zapnite „Navrhnúť opravu“ a nástroj stmavuje alebo zosvetľuje farbu textu po malých krokoch svetlosti — odtieň zostáva — kým nedosiahne 4,5 : 1, a vypíše najbližší vyhovujúci hex pripravený na vloženie do štýlov.

Všetko beží vo vašom prehliadači; nezverejnené firemné palety neopustia vaše zariadenie. Farby zapíšete ako hex s 3 alebo 6 znakmi s mriežkou aj bez nej, ako rgb() či rgba(), alebo bežným anglickým názvom CSS — základných 16 plus obľúbené rozšírené. Kompletný zoznam 148 názvov nástroj zámerne nenesie, exotické mená preto napíšte ako hex. Riadok, ktorý nie je dvojicou farieb, sa pokojne označí a zvyšok sa spracuje ďalej.

Časté otázky

Čo znamenajú úrovne AA a AAA?
Sú to úrovne zhody WCAG. AA vyžaduje kontrastný pomer aspoň 4,5 : 1 pre bežný text a 3 : 1 pre veľký text; AAA ho zvyšuje na 7 : 1 a 4,5 : 1. Na úroveň AA sa odvoláva väčšina predpisov o prístupnosti.
Kedy platia hranice pre veľký text?
Od 18 pt (približne 24 px) pri bežnom reze, alebo od 14 pt (približne 18,7 px) pri tučnom písme. Veľkému textu stačí 3 : 1 pre AA a 4,5 : 1 pre AAA, preto nadpisy prechádzajú ľahšie než bežný text.
Aké zápisy farieb môžem vložiť?
Hex s 3 alebo 6 znakmi, s mriežkou alebo bez nej; rgb() a rgba() s čiarkami aj medzerami; a bežné anglické názvy CSS — základných 16 plus obľúbené ako orange, pink či rebeccapurple. Úplný zoznam 148 názvov podporovaný nie je, zriedkavé mená napíšte ako hex. Alfa sa prečíta, ale ignoruje — kontrast je definovaný medzi nepriehľadnými farbami.
Ako funguje „Navrhnúť opravu“?
Keď dvojica nespĺňa AA pre bežný text, nástroj posúva svetlosť farby textu krok za krokom — odtieň a sýtosť zostávajú — kým pomer nedosiahne 4,5 : 1, a vypíše najbližší vyhovujúci hex. Stmavuje alebo zosvetľuje podľa toho, čo je bližšie.
Nahráva sa môj text niekam?
Nie. Kontrola beží výhradne vo vašom prehliadači a nič z toho, čo vložíte, neopustí vaše zariadenie.