Alat koristi službenu WCAG formulu relativne luminancije, pa se dobiveni brojevi podudaraju s WebAIM provjerom i većinom pristupačnosnih revizija. Sve se izvodi u pregledniku - boje se ne šalju na poslužitelj i nema ograničenja korištenja.
Provjera kontrasta boja
Radi u cijelosti u pregledniku - bez slanja podataka i bez registracije.
Omjer kontrasta
Prolazipotrebno 4.5:1
Prolazipotrebno 3:1
Padapotrebno 7:1
Prolazipotrebno 4.5:1
Veliki = 18 pt (24 px), ili 14 pt (18,66 px) podebljano.
Što je provjera kontrasta boja?
Provjera kontrasta boja mjeri omjer kontrasta između boje teksta i pozadine te pokazuje zadovoljava li kombinacija WCAG standarde pristupačnosti. Rezultat je omjer od 1:1 do 21:1, uz prikaz prolaza ili pada za razine AA i AAA za normalni i veliki tekst.
Kako se koristi
- 1Unesite boje. Upišite hex kod, rgb() vrijednost ili CSS naziv boje za tekst i pozadinu, ili ih odaberite biranjem boja.
- 2Očitajte omjer. Omjer kontrasta ažurira se uživo, uz pretpregled teksta na odabranoj pozadini.
- 3Provjerite oznake. Svaka oznaka prikazuje prolaz ili pad za WCAG AA i AAA za normalni i veliki tekst.
Za koga je
- Dizajneri koji testiraju boje brenda prije nego što dođu do razvoja.
- Frontend programeri koji provjeravaju boje gumba, poveznica i oznaka prema WCAG AA.
- Revizori pristupačnosti koji dokumentiraju greške kontrasta s točnim omjerima.
- Urednici i email timovi koji potvrđuju da tekst ostaje čitljiv na obojanoj pozadini.
Česta pitanja
Je li provjera kontrasta boja besplatna?
Da - potpuno je besplatna, bez prijave i bez ograničenja. Radi isključivo u pregledniku.
Koji omjer kontrasta je potreban za WCAG AA?
WCAG 2.1 razina AA zahtijeva omjer kontrasta od najmanje 4,5:1 za normalni tekst i 3:1 za veliki tekst. Razina AAA podiže to na 7:1 za normalni tekst i 4,5:1 za veliki tekst.
Što se smatra velikim tekstom?
Veliki tekst je najmanje 18 pt (oko 24 px) normalne težine, ili 14 pt (oko 18,66 px) podebljano. Za veliki tekst dopušten je niži omjer kontrasta jer su veće znakove lakše čitati.
Kako se izračunava omjer kontrasta?
Formula je (L1 + 0,05) / (L2 + 0,05), gdje su L1 i L2 relativna luminancija svjetlije i tamnije boje. Luminancija 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 unijeti 3-, 4-, 6- ili 8-znamenkasti hex, rgb() i rgba() vrijednosti, ili bilo koji CSS naziv boje poput 'teal'. Boje možete odabrati i izvornim biraćem boja.
Zašto isti omjer ponekad prolazi, a ponekad pada?
Potrebni omjer ovisi o veličini teksta i razini koja se cilja. Omjer 3,5:1 pada za AA kod normalnog teksta, ali prolazi AA za veliki tekst - uvijek provjeravajte prema veličini i razini koje stvarno koristite.