Contrast Checker izračunava WCAG 2.1 omjer kontrasta između dvije boje i ocjenjuje ih prema AA/AAA pragovima za normalan i velik tekst. Prikaz uživo prikazuje tekst prikazan u odabranim bojama, a gumb "odaberi pozadinu stranice" uzorkuje trenutnu stranicu.
Pristupačnost je sve više obavezna — usklađenost s WCAG smjernicama zakonska je obveza u mnogim jurisdikcijama, a i tamo gdje nije, loš kontrast odbija korisnike. Contrast Checker vam odmah govori odgovaraju li bilo koje dvije boje WCAG standardima. Odaberite boju teksta i pozadine putem birača boja ili zalijepite heksadecimalne vrijednosti; alat izračunava omjer kontrasta koristeći službenu WCAG formulu za luminanciju i ocjenjuje ga prema četiri praga: AA normalan (≥4.5:1), AA velik (≥3:1), AAA normalan (≥7:1) i AAA velik (≥4.5:1). Svaki prag prikazuje jasnu oznaku Pass/Fail. Prikaz uživo prikazuje velik i normalan tekst u odabranim bojama kako biste vidjeli stvarni vizualni učinak. Gumb za praktičnost uzorkuje pozadinsku boju tijela trenutne stranice — korisno pri provjeri prolazi li kombinacija boja na stvarnoj stranici. Sve se izvršava lokalno u vašem pregledniku, bez slanja podataka.
Koristi službenu WCAG formulu za luminanciju za izračun omjera kontrasta. Rezultat je točan i podudara se sa svakim usklađenim alatom za pristupačnost.
Prolaz/pad za AA normalan (≥4.5:1), AA velik (≥3:1), AAA normalan (≥7:1), AAA velik (≥4.5:1) — sve prikazano kao mreža.
Prikazuje stvarni velik i normalan tekst u vašim odabranim bojama kako biste uz numerički omjer vidjeli i vizualni učinak.
Jednim klikom uzorkuje izračunatu pozadinsku boju tijela trenutne stranice — korisno za testiranje kombinacija iz stvarnog svijeta.
Upišite heksadecimalnu vrijednost ili koristite izvorni birač boja. Vrijednosti se sinkroniziraju u oba smjera dok uređujete bilo koju.
Jednim klikom zamjenjuju se boja teksta i pozadine — korisno pri provjeri obrnutih tema ili stanja lebdenja (hover).
Prije finalizacije palete boja, provjerite svaku boju teksta u odnosu na pozadinu kako biste osigurali usklađenost s WCAG AA — izbjegava naknadnu doradu.
Koristite "odaberi pozadinu stranice" na aktivnoj stranici, zatim zalijepite stvarnu boju teksta — pronađite kršenja pristupačnosti u minutama bez otvaranja Lighthousea.
Kada brend odabere boju koja bi mogla ne zadovoljiti pristupačnost, koristite provjeru za pronalaženje najbliže usklađene varijante (tamnije/svjetlije nijanse).
Provjerite ispunjavaju li boje stanja lebdenja/aktivnosti/onemogućenosti i dalje zahtjeve kontrasta, ne samo zadano stanje.
Tamne teme često ne prolaze kontrast za sivi tekst na sivoj pozadini. Provjerite svoje najtamnije sive nijanse u odnosu na najtamnije pozadine kako biste to uhvatili.
Kliknite ikonu Contrast u DevSuite Pro doku. Otvara se panel s poljima za boju teksta i pozadine.
Koristite birač boja ili zalijepite heksadecimalnu vrijednost za svaku. Prikaz uživo ažurira se dok mijenjate boje.
Veliki broj (npr. 4.8:1) predstavlja omjer kontrasta. Veći je bolji. 3 je apsolutni minimum; 4.5 je ciljna vrijednost za normalan tekst.
Oznake prolaz/pad za AA i AAA, normalan i velik tekst, na prvi pogled pokazuju za što vaša kombinacija zadovoljava uvjete.
Ako ne prolazi, prilagodite boje. Potamnite boju teksta ili posvijetlite pozadinu (ili obrnuto) dok ciljna razina ne prikaže Pass.
Instalirajte DevSuite Pro besplatno i otključajte 64+ razvojnih alata za svoj preglednik.
