Provjera kontrasta boja

Provjeri svoje boje

Testiraj kombinacije boja kako bi osigurao da zadovoljavaju WCAG standarde pristupačnosti za čitljivost teksta.

1.00:1

Kontrast

Nije prošlo

Vrlo loše

Normalan tekst

AA (4.5:1)

AAA (7:1)

Veliki tekst

AA (3:1)

AAA (4.5:1)

Boja teksta

Boja pozadine

Brza rješenja

Naslov pregleda

Brza smeđa lisica skače preko lijenog psa

Primjer malog teksta (12px)

Tekst

#ffffff

Pozadina

#018786

WCAG standardi

Razina AA

Minimalni omjer kontrasta od 4.5:1 za obični tekst i 3:1 za veliki tekst. Potrebno za većinu web-mjesta.

Razina AAA

Poboljšani omjer kontrasta od 7:1 za obični tekst i 4.5:1 za veliki tekst. Preporučuje se za optimalnu pristupačnost.

Nedovoljan kontrast za sve veličine teksta - ne zadovoljava WCAG standarde.

Izračunaj omjer kontrasta između boje teksta i pozadine.

Odaberite boju pomoću odabirača boja za boju teksta i pozadine ili unesite boju u RGB heksadecimalnom formatu (npr. #259 ili #2596BE). Možete prilagoditi klizač za odabir boje. Smjernice za web sadržaj (WCAG) imaju specifične smjernice kako bi pomogle u određivanju je li tekst čitljiv za korisnike s vidom. Ovi kriteriji koriste određen algoritam za mapiranje kombinacija boja u usporedive omjere. Korištenjem ove formule, WCAG navodi da 4.5:1 omjer kontrasta boja između teksta i njegove pozadine zadovoljava za obični (tijelo) tekst, a veliki tekst (18+ pt obični ili 14+ pt podebljani) trebao bi imati barem 3:1 omjer kontrasta.

Ključne značajke

Izračun omjera kontrasta u stvarnom vremenu
Provjera usklađenosti s WCAG AA i AAA
HSL klizači za fino podešavanje
Višestruki formati pregleda

Napredni alati

Automatsko popravljanje boja
Uzorkovanje teksta i pozadine
Detekcija naziva boja
Izvoz rezultata

Često postavljana pitanja

Za WCAG AA usklađenost, običan tekst zahtijeva minimalni omjer kontrasta 4,5:1, dok veliki tekst (18pt ili 14pt podebljano) zahtijeva 3:1.

WCAG AAA zahtijeva veće omjere kontrasta: 7:1 za običan tekst i 4,5:1 za veliki tekst, u usporedbi s 4,5:1 i 3:1 za AA.

Koristi našu funkciju automatskog ispravljanja za prilagodbu boje teksta ili pozadine uz očuvanje tvoje namjere dizajna, ili ručno prilagodi boje HSL klizačima s vizualnim indikatorima koji pokazuju optimalna područja za AA/AAA usklađenost.

Zelena područja i oznake AA/AAA pokazuju optimalne raspone za postizanje WCAG usklađenosti. Smjerne oznake (Svjetlije/Tamnije) vode te prema boljem kontrastu na temelju tvoje trenutne kombinacije boja.

Da, možeš unijeti bilo koji HEX kod boje ili odabrati vlastite boje pomoću birača boja. URL se automatski ažurira pa možeš podijeliti određene kombinacije boja.