Spalvų kontrasto tikrintuvas
Patikrinkite teksto ir fono spalvų kontrastą pagal WCAG 2 ir APCA. Tikrintuvas apskaičiuoja WCAG 2 kontrasto santykį pagal santykinį skaistį, nurodo, ar AA ir AAA reikalavimai įprastam ir dideliam tekstui bei UI grafikai įvykdyti, ir pateikia APCA šviesumo kontrasto reikšmę su paaiškinimu, kam ji naudinga. Skirta dizaineriams ir kūrėjams, kuriantiems prieinamas sąsajas.
Dažnai užduodami klausimai
Ką reiškia WCAG lygiai?
AA lygio reikalavimas įprastam tekstui yra 4.5:1, o dideliam tekstui – 3:1 (sėkmės kriterijus 1.4.3); AAA lygiui reikia 7:1 ir 4.5:1 (1.4.6). Naudotojo sąsajos komponentų ir prasmingos grafikos kontrastas su gretimomis spalvomis turi būti 3:1 (1.4.11). Tikrintuvas nurodo, ar įvykdyta kiekviena iš šių penkių ribinių reikšmių.
Kas laikoma dideliu tekstu?
Pagal WCAG, didelis tekstas yra bent 18 punktų įprasto storio, maždaug 24 CSS pikselių, arba bent 14 punktų paryškinto teksto, maždaug 18.66 CSS pikselių. Mažesnis tekstas laikomas įprastu ir jam reikia didesnio santykio.
Kodėl santykis 4.499:1 neatitinka AA reikalavimų?
WCAG ribinės reikšmės yra tikslios, todėl santykis, kuris būtų suapvalintas iki 4.5, bet yra mažesnis, reikalavimo neatitinka. Tikrintuvas lygina nesuapvalintą santykį ir jį rodo nukirpęs iki dviejų skaitmenų po kablelio, todėl rodoma reikšmė niekada neatrodo geresnė už tikrąją.
Kas yra APCA?
Prieinamo suvokiamo kontrasto algoritmas (Accessible Perceptual Contrast Algorithm) – kontrasto metodas, sukurtas WCAG 3 projektams. Jis modeliuoja suvokiamą šviesumo kontrastą, skirtingai įvertina tekstą ir foną bei pateikia šviesumo kontrasto reikšmę Lc – nuo maždaug -108 iki 106. Šis metodas dar nėra įtrauktas į jokį paskelbtą WCAG standartą, todėl atitiktį vertinkite pagal WCAG 2 rezultatus, o APCA naudokite kaip papildomą patikrą.
Kodėl APCA reikšmė kartais būna neigiama?
APCA atsižvelgia į poliškumą: teigiamos reikšmės reiškia tamsų tekstą šviesiame fone, o neigiamos – šviesų tekstą tamsiame fone. Rekomendacijose naudojama absoliuti reikšmė, todėl Lc -75 ir Lc 75 patenka į tą patį lygį.
Kaip parenkami APCA rekomendacijų lygiai?
Jie pagrįsti APCA bronze paprastuoju režimu: teksto pagrindiniame turinyje Lc 90 yra pageidautina, Lc 75 – minimali, kitam turinio tekstui reikia Lc 60, antraštėms ir dideliam tekstui – Lc 45, lengvai įskaitomam tekstui, pavyzdžiui, vietaženkliams, – Lc 30, o netekstiniams elementams – Lc 15. Šrifto dydis ir storis taip pat svarbūs, todėl šiuos lygius laikykite atskaitos taškais, o ne galutiniu vertinimu.
Kuri APCA versija įgyvendinta?
Naudojamos APCA-W3 versijos 0.0.98 G 4g pataisos konstantos, paprastasis 2.4 eksponentas sRGB kanaluose, švelnus juodos spalvos ribojimas ir mažo kontrasto nukirpimas. Juodas tekstas baltame fone duoda maždaug Lc 106.0, o baltas tekstas juodame fone – Lc -107.9, kaip ir etaloninėje realizacijoje.
Kokius spalvų formatus galiu įvesti?
Šešioliktainiai kodai su # arba be jo, CSS spalvų pavadinimai, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() erdvės, pavyzdžiui, display-p3, ir cmyk(). Spalvos, esančios už sRGB ribų, pirmiausia perkeliamos į sRGB, nes abi formulės apibrėžtos sRGB ekrano spalvoms.
Kaip apdorojamos permatomos spalvos?
Prieš matuojant pusiau permatoma teksto spalva sumaišoma su fonu taip, kaip ją atvaizduoja naršyklė. Pusiau permatomas fonas pirmiausia sumaišomas su balta spalva. Rezultatuose pateikiamos nepermatomos teksto ir fono spalvos, kurios iš tikrųjų buvo palygintos.
Ar svarbi dviejų spalvų tvarka?
WCAG 2 atveju tvarka nesvarbi, nes šviesesnio ir tamsesnio skaistžio santykis abiem atvejais toks pats. APCA atveju ji svarbi, nes tekstas ir fonas vertinami skirtingai, todėl į pirmą lauką įveskite teksto spalvą, o į antrą – fono spalvą.