Kontrasto Tikrintuvas apskaičiuoja WCAG 2.1 kontrasto santykį tarp dviejų spalvų ir įvertina jas pagal AA/AAA slenksčius įprastam ir dideliam tekstui. Gyva peržiūra rodo tekstą, atvaizduotą pasirinktomis spalvomis, o mygtukas „pick page background“ nuskaito dabartinio puslapio foną.
Prieinamumas tampa vis dažniau privalomas — WCAG atitiktis daugelyje jurisdikcijų yra teisinis reikalavimas, o net kur tai nėra privaloma, prastas kontrastas atbaido naudotojus. Kontrasto Tikrintuvas iškart pasako, ar bet kurios dvi spalvos atitinka WCAG standartus. Pasirinkite priekinę ir foninę spalvas naudodami spalvų parinkiklį arba įklijuokite hex reikšmes; įrankis apskaičiuoja kontrasto santykį pagal oficialią WCAG šviesumo formulę ir įvertina jį pagal keturis slenksčius: AA normal (≥4,5:1), AA large (≥3:1), AAA normal (≥7:1) ir AAA large (≥4,5:1). Kiekvienas slenkstis rodo aiškų Pass/Fail ženkliuką. Gyva peržiūra atvaizduoja didelį ir įprastą tekstą pasirinktomis spalvomis, kad matytumėte realų vizualų poveikį. Patogus mygtukas nuskaito dabartinio puslapio body fono spalvą — naudinga tikrinant, ar spalvų derinys realiame svetainėje atitinka reikalavimus. Viskas veikia lokaliai jūsų naršyklėje, jokių įkėlimų į serverį.
Naudoja oficialią WCAG šviesumo formulę kontrasto santykiui apskaičiuoti. Rezultatas tikslus ir sutampa su kiekvienu atitinkamu prieinamumo tikrintuvu.
Pass/fail rezultatai AA normal (≥4,5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4,5:1) — visi rodomi lentelėje.
Atvaizduoja tikrą didelį ir įprastą tekstą jūsų pasirinktomis spalvomis, kad matytumėte vizualų poveikį kartu su skaitine reikšme.
Vienu paspaudimu nuskaitoma dabartinio puslapio apskaičiuota body fono spalva — naudinga tikrinant realius spalvų derinius.
Įveskite hex reikšmę arba naudokite gimtąjį spalvų parinkiklį. Reikšmės sinchronizuojasi abipusiai redaguojant bet kurią.
Vienu paspaudimu sukeičiamos priekinė ir foninė spalvos — naudinga tikrinant invertuotas temas ar hover būsenas.
Prieš tvirtindami spalvų paletę, patikrinkite kiekvieną teksto spalvą su jos fonu, kad užtikrintumėte WCAG AA atitiktį — taip išvengsite perdarymo vėliau.
Naudokite „pick page background“ realioje svetainėje, tada įklijuokite tikrą teksto spalvą — per kelias minutes rasite a11y pažeidimų neatidarę Lighthouse.
Kai prekės ženklas pasirenka spalvą, kuri gali neatitikti a11y reikalavimų, naudokite tikrintuvą, kad rastumėte artimiausią atitinkantį variantą (tamsesnį/šviesesnį atspalvį).
Patikrinkite, ar hover/active/disabled būsenų spalvos vis dar atitinka kontrasto reikalavimus, o ne tik numatytoji būsena.
Tamsios temos dažnai neatitinka kontrasto pilkas-ant-pilko tekstui. Patikrinkite savo tamsiausius pilkus atspalvius su tamsiausiais fonais, kad tai pastebėtumėte.
Spustelėkite Contrast piktogramą DevSuite Pro doke. Atsiveria skydelis su priekinės ir foninės spalvos laukais.
Naudokite spalvų parinkiklį arba įklijuokite hex reikšmę kiekvienai. Gyva peržiūra atsinaujina keičiant spalvas.
Didelis skaičius (pvz., 4,8:1) yra kontrasto santykis. Kuo didesnis, tuo geriau. 3 yra absoliutus minimumas; 4,5 — tikslinė reikšmė įprastam tekstui.
Pass/fail ženkliukai AA ir AAA lygiams, įprastam ir dideliam tekstui, vienu žvilgsniu parodo, kam tinka jūsų derinys.
Jei neatitinka, keiskite spalvas. Patamsinkite priekinę arba pašviesinkite foninę spalvą (ar atvirkščiai), kol tikslinis lygis parodys Pass.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 64+ kūrėjų įrankius savo naršyklei.
