Provera kontrasta boja

Odmah proverite odnos kontrasta između boje teksta i boje pozadine i da li ispunjava standard čitljivosti (WCAG AA)

Informacije o ažuriranjimaDodaj Proveravač kontrasta boja, proceni čitljivost boje teksta i boje pozadinePogledaj ažuriranja

Karakteristike

Odmah proverite odnos kontrasta

Unesite boju teksta i boju pozadine da vidite da li zadovoljavate WCAG AA standard

Podrška za birač i kod boja

Nalepite HEX, skraćeni oblik ili rgb() ili odaberite boju

Prikaz uzorka u 2 veličine

Odmah proverite kako izgleda obični tekst i naslov

Primeni zadovoljavajuću boju jednim klikom

Odmah primeni predloženu boju sa promenjenom osvetljenjem dok čuva ton boje

Kako se koristi

Navedite boju teksta

Odaberite sa birač boja ili unesite kod boje u obliku #333333, #333 ili rgb(51, 51, 51)

Navedite boju pozadine

Navedite boju pozadine na isti način. Rezultati se ažuriraju odmah dok tipkate, bez potrebe za pritiskom dugmeta

Proverite odnos, rezultat i uzorak

Proverite odnos kontrasta, rezultat za obični i veliki tekst, kraću evaluaciju i kako uzorak teksta izgleda

Primenite predloženu boju i ponovo proverite

Ako je neuspešno, primenite zadovoljavajuću boju sa dugmeta kao što je "Promenite boju teksta na ...". Takođe možete zameniti boju teksta i boje pozadine

Slučajevi upotrebe

Provera boja na prezentacijama i materijalima

Proverite da li su boje teksta i pozadine čitljive u internim materijalima i prezentacijama pre nego što ih napravite

Provera boja na veb sajtovima

Proverite da li boje veb sajta ili banera ispunjavaju pristupačnost standard (WCAG AA)

Odluka o upotrebi boje brenda u glavnom tekstu

Kada koristite boju brenda kao boju teksta, odredite koliko tamna treba da bude da bi bila upotrebljiva u glavnom tekstu

Ispravka boja koje nisu uspešne

Ispravite naznačene boje u uspešne boje dok čuvate ton boje

Osnovno znanje

Šta je odnos kontrasta

Odnos kontrasta je pokazatelj koji izražava razliku u osvetljenosti između boje teksta i boje pozadine numerički od 1:1 do 21:1. Kombinacija crne i bele ima maksimalno 21:1, a iste boje imaju minimalno 1:1.

Kako se računa：Odnos kontrasta se dobija konverzijom dve boje u relativnu luminoznost sRGB, i deljenjem luminoznosti svetlije boje i tamniju boju, svakoga plus 0.05.
Primer vrednosti：U odnosu na belu pozadinu (#FFFFFF), siva #777777 ima odnos kontrasta 4.47:1, #999999 ima 2.84:1, a crna (#000000) ima 21:1.

Razlika između WCAG AA i AAA

WCAG je međunarodni standard za pristupačnost veb sadržaja, koji određuje dva nivoa minimalnog odnosa kontrasta: AA i AAA.

AA (standardni nivo)：AA zahteva 4.5:1 ili više za obični tekst i 3.0:1 ili više za veliki tekst, što je standard koji većina veb sajtova pokušava da postigne.
AAA (stroži nivo)：AAA zahteva 7:1 ili više za obični tekst i 4.5:1 ili više za veliki tekst, što je nivo namenjen da bude čitljiv čak i za osobe sa slabijim vidom.

Definicija velikog teksta

Veliki tekst prema WCAG znači tekst od otprilike 18 poena (24px) ili veći, ili teški tekst od 14 poena (otprilike 18.7px) ili veći.

Obični tekst：Obični tekst je tekst koji ne spada u kategoriju velikog teksta i pojavljuje se u glavnom tekstu i napomenama, što zahteva odnos kontrasta od 4.5:1 ili više.
Odnos prema naslovima：Čak i ako je naslov, ako je manji od 24px i nije teški, tretira se kao obični tekst, pa je potrebno proveriti i veličinu i težinu.