Kontrasta pārbaudītājs aprēķina WCAG 2.1 kontrasta attiecību starp divām krāsām un novērtē tās pret AA/AAA sliekšņiem gan parastam, gan lielam tekstam. Reāllaika priekšskatījums parāda tekstu izvēlētajās krāsās, un poga "izvēlēties lapas fonu" paņem paraugu no pašreizējās lapas.
Pieejamība kļūst arvien svarīgāka — WCAG atbilstība ir juridiska prasība daudzās jurisdikcijās, un pat tur, kur tā nav, slikts kontrasts atbaida lietotājus. Kontrasta pārbaudītājs tūlītēji pasaka, vai jebkuras divas krāsas atbilst WCAG standartiem. Izvēlieties priekšplāna un fona krāsu ar krāsu izvēlni vai ielīmējiet heksadecimālās vērtības; rīks aprēķina kontrasta attiecību, izmantojot oficiālo WCAG spilgtuma formulu, un novērtē to pret četriem sliekšņiem: AA parasts (≥4,5:1), AA liels (≥3:1), AAA parasts (≥7:1) un AAA liels (≥4,5:1). Katrs slieksnis parāda skaidru Nokārtots/Nenokārtots nozīmīti. Reāllaika priekšskatījums atveido lielu un parastu tekstu izvēlētajās krāsās, lai jūs redzētu faktisko vizuālo ietekmi. Ērtības poga paņem paraugu no pašreizējās lapas body fona krāsas — noderīgi, pārbaudot, vai krāsu kombinācija reālā vietnē atbilst prasībām. Viss darbojas lokāli jūsu pārlūkā, bez augšupielādēm.
Izmanto oficiālo WCAG spilgtuma formulu, lai aprēķinātu kontrasta attiecību. Rezultāts ir precīzs un atbilst katram atbilstošam pieejamības pārbaudītājam.
Nokārtots/nenokārtots statuss AA parastam (≥4,5:1), AA lielam (≥3:1), AAA parastam (≥7:1), AAA lielam (≥4,5:1) — viss parādīts kā režģis.
Atveido reālu lielu un parastu tekstu jūsu izvēlētajās krāsās, lai redzētu vizuālo ietekmi līdzās skaitliskajai attiecībai.
Viena klikšķa paraugs no pašreizējās lapas aprēķinātās body fona krāsas — noderīgi reālu kombināciju testēšanai.
Ierakstiet heksadecimālo vērtību vai izmantojiet natīvo krāsu izvēlni. Vērtības sinhronizējas abpusēji, jums rediģējot jebkuru no tām.
Viena klikšķa apmaiņa apmaina priekšplānu un fonu — noderīgi, pārbaudot invertētas tēmas vai hover stāvokļus.
Pirms krāsu paletes pabeigšanas pārbaudiet katru teksta krāsu pret tās fonu, lai nodrošinātu WCAG AA atbilstību — izvairās no vēlākas pārstrādes.
Izmantojiet "izvēlēties lapas fonu" reālā vietnē, tad ielīmējiet faktisko teksta krāsu — atrodiet a11y pārkāpumus dažu minūšu laikā bez Lighthouse atvēršanas.
Ja zīmols izvēlas krāsu, kas var neatbilst a11y prasībām, izmantojiet pārbaudītāju, lai atrastu tuvāko atbilstošo variantu (tumšāku/gaišāku toni).
Pārliecinieties, ka hover/aktīvā/atspējotā stāvokļa krāsas joprojām atbilst kontrasta prasībām, ne tikai noklusējuma stāvoklis.
Tumšās tēmas bieži nenokārto kontrastu pelēkam tekstam uz pelēka fona. Pārbaudiet savus tumšākos pelēkos toņus pret tumšākajiem foniem, lai atklātu šīs problēmas.
Noklikšķiniet uz Kontrasta ikonas DevSuite Pro dokā. Atveras panelis ar priekšplāna un fona krāsu laukiem.
Izmantojiet krāsu izvēlni vai ielīmējiet heksadecimālo vērtību katram. Reāllaika priekšskatījums atjauninās, mainot krāsas.
Lielais skaitlis (piem., 4,8:1) ir kontrasta attiecība. Jo augstāka, jo labāk. 3 ir absolūtais minimums; 4,5 ir mērķis parastam tekstam.
Nokārtots/nenokārtots nozīmītes AA un AAA, parastam un lielam teksta izmēram, uzreiz parāda, kam jūsu kombinācija atbilst.
Ja nesekmīgi, mainiet krāsas. Padariet priekšplānu tumšāku vai fonu gaišāku (vai otrādi), līdz mērķa pakāpe rāda Nokārtots.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 64+ izstrādātāju rīkus savam pārlūkam.
