Izaberite boju teksta i boju pozadine i vidite njihov odnos kontrasta, kao i da li par prolazi WCAG AA i AAA za običan i veliki tekst. Živi pregled prikazuje dve boje zajedno da procenite čitljivost na prvi pogled. Sve radi u vašem pregledaču.
Veliki uzorak teksta
Sitan uzorak teksta za pregled kontrasta
Odnos kontrasta
17,4:1
Kako radi
Odnos kontrasta poredi relativnu luminansu dve boje. Luminansa svake boje se računa iz njenih crvenog, zelenog i plavog kanala po WCAG formuli, a odnos je (svetlija + 0,05) ÷ (tamnija + 0,05). Rezultat ide od 1:1 (identične) do 21:1 (crno na belom).
WCAG postavlja pragove: običan tekst traži 4,5:1 za AA i 7:1 za AAA, dok veliki tekst (oko 18pt ili 14pt podebljano) traži samo 3:1 za AA i 4,5:1 za AAA. Alat označava svaku od četiri provere kao prolaz ili pad u odnosu na vaš odnos.
Boje unosite kao heks — #RGB ili #RRGGBB, sa ili bez taraba — ili koristite birače boja. Za kontrast su bitne samo RGB vrednosti; svaka providnost (alfa) se zanemaruje, pa testirajte na stvarnoj punoj boji na kojoj tekst stoji.
Primeri iz prakse
Tekst na belom
Tamnosiva #595959 na belom daje oko 7:1 — prolazi AAA za običan tekst, siguran izbor za pasuse. Posvetlite je na #767676 i pada na ~4,5:1: samo AA.
Brend boja za dugmad
Beli tekst na srednjeplavoj #3b82f6 sleće na oko 3,7:1 — u redu za velike natpise na dugmadima (AA veliki), ali pada za sitan tekst, znak da potamnite plavu ili povećate natpis.
Siva za placeholder koja pada
Svetlosiva #bbbbbb na belom je otprilike 1,9:1 i pada na svakom nivou. Pregled čini problem očiglednim, a možete tamniti dok se AA oznaka ne zazeleni.
Česta pitanja
Šta je odnos kontrasta?
Broj od 1:1 do 21:1 koji opisuje koliko se dve boje razlikuju po svetlini. Veće je čitljivije. Računa se iz relativne luminanse boja, ne samo iz nijanse, pa dve žive boje i dalje mogu imati loš kontrast.
Koji odnos treba da prođe WCAG?
Za običan tekst: 4,5:1 za AA i 7:1 za AAA. Za veliki tekst (≈18pt ili 14pt podebljano): 3:1 za AA i 4,5:1 za AAA. AA je uobičajeni pravni i praktični cilj; AAA je stroži.
Šta se računa kao „veliki“ tekst?
Otprilike 18pt (24px) naviše, ili 14pt (oko 18,66px) ako je podebljan. Veća slova se lakše čitaju, pa WCAG za njih dozvoljava niži prag kontrasta.
Koja boja je tekst (prvi plan)?
Prvo polje je tekst (prvi plan), a drugo pozadina, ali je kontrast simetričan — zamena daje isti odnos. Redosled utiče samo na to koju pregled koristi za tekst.
Da li providnost utiče na rezultat?
Ovaj alat zanemaruje alfu i poredi pune boje. Ako je tekst ili pozadina poluprovidna, prvo izračunajte efektivnu boju u koju se stapa preko onoga iza nje, pa nju testirajte.
Da li je AA dovoljno ili da ciljam AAA?
AA (4,5:1) je široko zahtevana osnova i dovoljan je za većinu sajtova. AAA (7:1) se preporučuje gde je čitljivost presudna — dugačko čitanje, publika slabijeg vida — ali nije obavezan za opštu usklađenost.
Zašto šaren par i dalje može da padne?
Kontrast zavisi od svetline, ne od šarenila. Crveno na zelenom deluje upadljivo ali može imati nizak odnos luminanse, zbog čega ih i korisnici sa daltonizmom teško razlikuju. Uvek proverite broj, ne samo izgled.
Da li prolaz na kontrastu čini sajt potpuno pristupačnim?
Ne — pokriva jedan važan kriterijum. Pristupačnost uključuje i upotrebu tastature, stanja fokusa, alt tekstove, semantički markap i još toga. Kontrast je nužan, ali ne i dovoljan sam po sebi.
Da li se moje boje šalju negde?
Ne. Poređenje se dešava u potpunosti u vašem pregledaču; ništa što unesete se ne otprema niti čuva.
Srodni alati
Konverter boja
Pretvarajte boje između HEX, RGB i HSL, sa podrškom za providnost i živim uzorkom. Radi u pregledaču.
Alati za programere
Generator meta tagova
Napravite SEO, Open Graph i Twitter meta tagove za vašu stranicu — kopirajte HTML pravo u <head>.
Alati za programere
HTML entiteti
Kodirajte tekst u HTML entitete ili dekodirajte imenovane, decimalne i heks entitete nazad u znakove. U pregledaču.
Alati za programere
Provera jačine lozinke
Proverite koliko je lozinka jaka u pregledaču — vidite entropiju, procenu vremena za probijanje i šta popraviti. Ništa ne napušta vaš uređaj.
Alati za programere
Kalkulator odnosa stranica
Nađite pojednostavljen odnos stranica za bilo koju širinu i visinu i promenite veličinu uz očuvanje tog odnosa. Radi u pregledaču.
Alati za programere
Provera prostog broja
Proverite da li je broj prost, uz faktorizaciju na proste činioce i najbliže proste brojeve. Radi u pregledaču.
Matematika i obrazovanje