Provjera kontrasta boja

Na mjestu odredite omjer kontrasta između boje teksta i pozadine te kriterije čitljivosti (WCAG AA)

Informacije o ažuriranjimaDodaj Color Contrast Checker, provjeri čitljivost boje teksta i boje pozadinePogledaj vijesti o ažuriranju

Karakteristike

Trenutna provjera omjera kontrasta

Prikazuje prolazak ili neuspjeh WCAG AA samo unosom boje teksta i pozadine

Podrška za birač i kod

Unesite pomoću HEX, skraćenog oblika, rgb() ili biranjem boje

Prikaz uzorka u 2 veličine

Na mjestu provjerite kako izgleda obični tekst i naslov

Primijenite odgovarajuću boju jednim klikom

Odmah primijenite prijedlog boje koja čuva ton, ali mijenja svjetlinu

Kako koristiti

Odredite boju teksta

Odaberite pomoću birača boja ili unesite kod boje u jednom od sljedećih formata: #333333, #333 ili rgb(51, 51, 51)

Odredite boju pozadine

Odredite boju pozadine na isti način. Rezultati se ažuriraju tijekom unosa, bez potrebe za pritiskom na gumb

Provjerite omjer, prolazak/neuspjeh i uzorak

Provjerite omjer kontrasta, prolazak/neuspjeh za obični i veliki tekst, ocjenu i kako izgleda primjer teksta

Primijenite prijedlog boje i ponovno provjerite

Ako je neuspješno, primijenite boju koja prolazi pomoću gumba 'Promijenite boju teksta na ...' ili sličnog. Možete i zamijeniti boju teksta i pozadine pomoću gumba za zamjenu

Slučajevi upotrebe

Provjera boja prezentacija i materijala

Prije kreiranja provjerite jesu li boja teksta i pozadine internih materijala i prezentacija čitljive

Provjera boja web-mjesta

Provjerite zadovoljavaju li boje vašeg web-mjesta ili banera standarde pristupačnosti (WCAG AA)

Određivanje primjene boje marke u tekstu

Kada koristite boju marke kao boju teksta, odredite koliko mora biti tamna za upotrebu u matičnom tekstu

Ispravljanje neuspješnih boja

Ispravite boje na koje je ukazano čuvajući ton, ali mijenjajući ih da prođu

Osnovno znanje

Što je omjer kontrasta

Omjer kontrasta je pokazatelj koji izražava razliku u svjetlini između boje teksta i pozadine od 1:1 do 21:1. Kombinacija crne i bijele je maksimalna 21:1, a ista boja je minimalna 1:1.

Kako se računa：Omjer kontrasta se izračunava pretvaranjem dvije boje u relativnu luminanciju sRGB-a, zatim dijeljenjem s 0,05 dodanom svjetlijoj i tamnijoj luminanciji.
Smjernice za brojeve：Za bijelu pozadinu (#FFFFFF), siva #777777 ima omjer kontrasta 4,47:1, #999999 je 2,84:1, a crna (#000000) je 21:1.

Razlika između WCAG AA i AAA

WCAG je međunarodni standard pristupačnosti web sadržaja koji postavlja dvije razine standarda za omjer kontrasta: AA i AAA.

AA (standardna razina)：AA je standard koji zahtijeva 4,5:1 ili više za obični tekst i 3,0:1 ili više za veliki tekst, što je razina koju većina web-mjesta pokušava postići.
AAA (stroža razina)：AAA je standard koji zahtijeva 7:1 ili više za obični tekst i 4,5:1 ili više za veliki tekst, što je razina koja cilj da bude čitljiva čak i za osobe sa slabijim vidom.

Definicija velikog teksta

Veliki tekst prema WCAG je tekst od otprilike 18 točaka (24px) ili više, ili tekst od 14 točaka (oko 18,7px) ili više ako je boldan.

Obični tekst：Obični tekst je tekst koji nije u kategoriji velikog teksta, kao što su tjelesni ili bilješke, i zahtijeva omjer kontrasta od 4,5:1 ili više.
Veza s naslovima：Čak i naslovi ispod 24px koji nisu boldani trebaju biti tretirani kao obični tekst, pa je potrebno provjeriti i veličinu i težinu.