ImageColorPicker.com

Preverjalnik kontrasta barv

Preizkusi kontrastno razmerje med barvami ospredja in ozadja za zagotavljanje dostopnosti.

Preveri svoje barve

Preizkusi barvne kombinacije, da zagotoviš, da ustrezajo WCAG standardom dostopnosti za berljivost besedila.

1.00:1
Kontrast
Neuspešno
Zelo slabo

Navadno besedilo

AA (4.5:1)
Neuspešno
AAA (7:1)
Neuspešno

Veliko besedilo

AA (3:1)
Neuspešno
AAA (4.5:1)
Neuspešno

Hitri popravki

Aa
Naslov predogleda

Hiter rjav lisjak skoči čez lenega psa

Primer majhnega besedila (12px)

Besedilo
#ffffff
Ozadje
#018786

WCAG standardi

Raven AA

Minimalno kontrastno razmerje 4.5:1 za navadno besedilo in 3:1 za veliko besedilo. Zahtevano za večino spletnih mest.

Raven AAA

Izboljšano kontrastno razmerje 7:1 za navadno besedilo in 4.5:1 za veliko besedilo. Priporočeno za optimalno dostopnost.

Nezadosten kontrast za vse velikosti besedila - ne ustreza WCAG standardom.

Preverjevalnik barvnega kontrasta

Izračunaj kontrastno razmerje med barvami besedila in ozadja.

Izberi barvo s pomočjo barvnega izbirnika za besedilo in ozadje ali vnesi barvo v RGB šestnajstiški obliki (npr. #259 ali #2596BE). Lahko prilagodiš drsnik za izbiro barve. Smernice za dostopnost spletnih vsebin (WCAG) vključujejo smernice za zagotavljanje berljivosti besedila za uporabnike s pregledom. Ta kriterij uporablja poseben algoritem za preslikavo barvnih kombinacij v primerljiva razmerja. Po tej formuli WCAG navaja, da je 4.5:1 barvno kontrastno razmerje z besedilom in njegovim ozadjem primerno za običajno (telo) besedilo, velika besedila (18+ pt navadno, ali 14+ pt krepko) pa morajo imeti najmanj 3:1 barvno kontrastno razmerje.

Ključne funkcije

  • Izračun kontrastnega razmerja v realnem času
  • Preverjanje skladnosti z WCAG AA & AAA
  • HSL drsniki za fino nastavitev
  • Več formatov predogleda

Napredna orodja

  • Samodejno popravljanje barv
  • Vzorci besedila in ozadja
  • Zaznavanje imena barve
  • Izvoz rezultatov

Pogosta vprašanja

Za skladnost z WCAG AA zahteva običajno besedilo najmanjše kontrastno razmerje 4,5:1, veliko besedilo (18pt ali krepko 14pt) pa 3:1.

WCAG AAA zahteva višja kontrastna razmerja: 7:1 za običajno besedilo in 4,5:1 za veliko besedilo, v primerjavi z 4,5:1 in 3:1 pri AA.

Uporabi našo funkcijo samodejnega popravljanja za prilagoditev barve besedila ali ozadja ob ohranjanju tvojega oblikovalskega namena ali pa barve ročno prilagodi z drsniki HSL z vizualnimi kazalniki, ki prikazujejo optimalna območja za skladnost AA/AAA.

Zelena območja in oznake AA/AAA kažejo optimalna območja za doseganje skladnosti z WCAG. Namigi za smer (Bolj svetlo/Bolj temno) te vodijo k boljšemu kontrastu glede na tvojo trenutno kombinacijo barv.

Da, vneseš lahko poljubne kode HEX ali izbereš svoje barve z izbirnikom barv. URL se samodejno posodablja, da lahko deliš določene kombinacije barv.