WCAG provjera kontrasta boja

Procijenite omjer kontrasta teksta i boja pozadine na temelju smjernica WCAG 2.1. Trenutačno generirajte pristupačne prilagodbe boja.

HEX/RGB/HSL
HEX/RGB/HSL
Sve se radi lokalno u vašem pregledniku.

Prikaz teksta uživo

Veliki naslov (18pt podebljano / 24pt obično)

Ovo je pregled stila velikog naslovnog teksta.

Normalni tekst (ispod 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Omjer kontrasta

18.6:1

WCAG 2.1 Status usklađenosti

WCAG AA zahtjevi
Normalni tekst (4.5:1) PASS
Veliki tekst (3.0:1) PASS
WCAG AAA zahtjevi
Normalni tekst (7.0:1) PASS
Veliki tekst (4.5:1) PASS

WCAG 2.1 Smjernice

Jednostavno provjerite standarde kontrasta kako biste izgradili pristupačne sučelje koje se pridržavaju smjernica odjeljka 508, ADA i WCAG AA ili AAA.

Motor prijedloga

Automatski prilagodi boje postupno duž HSL koordinata kako bi pronašao najbliže alternative koje zadovoljavaju kriterije omjera kontrasta.

Potpuno na strani klijenta

Izračuni se izvode lokalno u kontekstu vašeg preglednika. Nijedna boja, datoteke ili telemetrijske koordinate ne prenose se na naše poslužitelje.

Povezani alati za boje

HEX RGB HSL pretvarač boja
Pretvorite boje i prilagodite koordinate svjetline.
Birač boja slike
Izdvoj palete boja iz dizajnerskih maketa.
CSS pretvarač boja
Konvertirati između CMYK, HSV, RGB, HSL i HEX formata.

Provjera kontrasta boja

Izračunajte WCAG omjere kontrasta za boje prednjeg plana i pozadine te prikažite uobičajene rezultate veličine teksta.

Ulaz
Dvije valjane CSS boje i izborni tekst za pregled.
Izlaz
Omjer kontrasta s indikatorima prolaza ili neuspjeha za WCAG AA i AAA.
Stvarna ograničenja
Izračun pokriva samo kontrast svjetline; ne potvrđuje sučelje niti uzima u obzir prikaz fonta, pokret, fokus ili znakove koji nisu u boji.
Privatnost i obrada podataka
dvije valjane CSS boje i opcionalni tekst za pregled obrađuju se u ovoj kartici preglednika. Convertr ih ne prima niti pohranjuje; zatvaranje ili ponovno učitavanje stranice briše radno stanje, osim ako alat izričito nudi lokalno preuzimanje.

Kako koristiti ovaj alat

  1. Navedite dvije valjane CSS boje i neobavezni tekst za pregled u kontrolama alata.
  2. Odaberite postavke koje utječu na omjer kontrasta s WCAG AA i AAA prolaz ili neuspjeh indikatorima, a zatim pokrenite alat.
  3. Pregledajte omjer kontrasta s WCAG AA i AAA indikatorima prolaza ili neuspjeha prije kopiranja ili preuzimanja.

Uobičajeni načini kvara

Nevažeće boje se ne mogu mjeriti, a transparentnost bez riješene pozadine može učiniti omjer besmislenim.

Korisni primjer

Usporedite tekst #1f2937 na #ffffff kako biste provjerili njegov omjer za normalni i veliki tekst.