Contrast Checker arvutab kahe värvi vahelise WCAG 2.1 kontrastisuhte ning hindab neid AA/AAA lävendite alusel nii tavalise kui suure teksti jaoks. Reaalajas eelvaade näitab teksti valitud värvides ning "pick page background" nupp proovib lehe hetkevärvi.
Ligipääsetavus on üha enam nõutav — WCAG vastavus on paljudes jurisdiktsioonides seadusest tulenev nõue ja isegi kui mitte, siis peletab halb kontrast kasutajaid eemale. Contrast Checker ütleb koheselt, kas kaks värvi vastavad WCAG standarditele. Valige esiplaani ja tausta värv värvivalija abil või kleepige heksväärtused; tööriist arvutab kontrastisuhte ametliku WCAG heleduse valemi järgi ja hindab seda nelja lävendi alusel: AA tavaline (≥4,5:1), AA suur (≥3:1), AAA tavaline (≥7:1) ja AAA suur (≥4,5:1). Iga lävend kuvab selge Pass/Fail märgise. Reaalajas eelvaade renderdab suurt ja tavalist teksti valitud värvides, et näeksite tegelikku visuaalset mõju. Mugavusnupp proovib lehe body-elemendi arvutatud taustavärvi — kasulik, kui kontrollite, kas päris saidil kasutatav värvikombinatsioon läbib. Kõik toimub kohalikult teie brauseris, ilma üleslaadimiseta.
Kasutab kontrastisuhte arvutamiseks ametlikku WCAG heleduse valemit. Tulemus on täpne ja ühtib iga nõuetele vastava ligipääsetavuse kontrollijaga.
Pass/fail AA tavalise (≥4,5:1), AA suure (≥3:1), AAA tavalise (≥7:1) ja AAA suure (≥4,5:1) jaoks — kõik kuvatud tabelina.
Renderdab tegeliku suure ja tavalise teksti valitud värvides, et näeksite visuaalset mõju koos numbrilise suhtega.
Ühe klõpsuga proovib lehe body-elemendi arvutatud taustavärvi — kasulik päris kombinatsioonide testimiseks.
Kirjutage heksväärtus või kasutage sisseehitatud värvivalijat. Väärtused sünkroonitakse kahesuunaliselt, kui muudate kumbagi.
Üheklõpsuline vahetus vahetab esiplaani ja tausta ära — kasulik pööratud teemade või hover-olekute kontrollimisel.
Enne värvipaleti lõplikuks kinnitamist kontrollige iga tekstivärvi selle tausta vastu, et tagada WCAG AA vastavus — väldib hilisemat ümbertegemist.
Kasutage "pick page background" nuppu töötaval saidil, seejärel kleepige tegelik tekstivärv — leidke a11y rikkumised minutitega, ilma Lighthouse'i avamata.
Kui bränd valib värvi, mis võib a11y kontrolli mitte läbida, kasutage kontrollijat lähima vastava variandi (tumedam/heledam toon) leidmiseks.
Kontrollige, et hover/active/disabled olekute värvid vastavad endiselt kontrastinõuetele, mitte ainult vaikimisi olek.
Tumedad teemad ei läbi sageli kontrastikontrolli halli teksti hallil taustal puhul. Kontrollige oma tumedamaid halle toone tumedamate taustade vastu, et need vead avastada.
Klõpsake DevSuite Pro dokis Contrast ikooni. Avaneb paneel esiplaani ja tausta värviväljadega.
Kasutage värvivalijat või kleepige kummalegi heksväärtus. Reaalajas eelvaade uueneb värvide muutmisel.
Suur number (nt 4,8:1) on kontrastisuhe. Kõrgem on parem. 3 on absoluutne miinimum; 4,5 on siht tavalise teksti jaoks.
Pass/fail märgised AA ja AAA jaoks, tavalise ja suure teksti suuruste jaoks, näitavad ühe pilguga, milleks teie kombinatsioon kvalifitseerub.
Kui ei läbi, muutke värve. Tumendage esiplaani või heledustage tausta (või vastupidi), kuni sihtaste näitab Pass.
Paigaldage DevSuite Pro tasuta ja avage 64+ arendustööriista oma brauserile.
