Alat koristi zvaničnu WCAG formulu za relativnu luminancu, pa se vrednosti poklapaju sa WebAIM checkerom i većinom pristupačnosnih revizija. Sve se izvršava u pregledaču - boje se nikada ne otpremaju, bez ograničenja broja provera.
Color contrast checker
Radi u celosti u pregledaču - bez otpremanja i bez registracije.
Veliki = 18pt (24px), ili 14pt (18,66px) podebljano.
Šta je color contrast checker?
Color contrast checker meri odnos kontrasta između boje teksta i pozadine i pokazuje da li kombinacija ispunjava WCAG standarde pristupačnosti. Rezultat je broj od 1:1 do 21:1, uz oznake prolaz ili pad za AA i AAA nivo - posebno za normalan i za veliki tekst.
Kako se koristi
- 1Unesite boje. Ukucajte hex kod, rgb() vrednost ili CSS naziv boje za tekst i pozadinu, ili izaberite boju pomoću birača.
- 2Pročitajte odnos. Odnos kontrasta se osvežava uživo, uz pregled teksta na odabranoj pozadini.
- 3Proverite oznake. Svaka oznaka pokazuje prolaz ili pad za WCAG AA i AAA nivo, za normalan i za veliki tekst.
Kome je namenjen
- Dizajneri koji testiraju boje brenda pre nego što dođu do razvoja.
- Front-end programeri koji proveravaju boje dugmadi, linkova i labela prema WCAG AA.
- Revizori pristupačnosti koji dokumentuju neispravne odnose kontrasta sa tačnim vrednostima.
- Timovi za sadržaj i mejling koji proveravaju da li tekst ostaje čitljiv na obojenoj pozadini.
Česta pitanja
Da li je color contrast checker besplatan?
Jeste - potpuno je besplatan, bez registracije i bez ograničenja. Radi u celosti u vašem pregledaču.
Koji odnos kontrasta je potreban za WCAG AA?
WCAG 2.1 nivo AA zahteva odnos kontrasta od najmanje 4,5:1 za normalan tekst i 3:1 za veliki tekst. Nivo AAA podiže te granice na 7:1 za normalan tekst i 4,5:1 za veliki tekst.
Šta se smatra velikim tekstom?
Veliki tekst je najmanje 18pt (oko 24px) pri regularnoj debljini, ili 14pt (oko 18,66px) kada je podebljao. Za veliki tekst dozvoljava se niži odnos kontrasta jer su veći znakovi lakši za čitanje.
Kako se izračunava odnos kontrasta?
Formula je (L1 + 0,05) / (L2 + 0,05), gde su L1 i L2 relativna luminanca svetlije i tamnije boje. Luminanca se izračunava iz sRGB crvenog, zelenog i plavog kanala prema WCAG 2.x definiciji.
Podržava li hex, RGB i nazive boja?
Da. Možete uneti 3-, 4-, 6- ili 8-cifreni hex, rgb() i rgba() vrednosti, ili bilo koji CSS naziv boje kao što je 'teal'. Boju možete izabrati i pomoću birača.
Zašto isti odnos kontrasta nekad prolazi, a nekad pada?
Traženi odnos zavisi od veličine teksta i ciljnog nivoa. Odnos 3,5:1 pada AA za normalan tekst, ali prolazi AA za veliki tekst - uvek proveravajte prema veličini i nivou koji zaista koristite.