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.

13.58 proti 1
Kontrast
AAA
Rezultat besedila
Super

Primerjano: #000000 na #CDD0D6

Besedilo

16px, Navadno (400)

Šteje kot običajno besedilo.

  • AA (WCAG 1.4.3): vsaj 4.5:1

    Ustreza

  • AAA (WCAG 1.4.6): vsaj 7:1

    Ustreza

Uporabniški vmesnik in grafika

Ikone, robovi polj, indikatorji fokusa in drugi deli, ki jih moraš videti, da lahko uporabljaš vmesnik.

  • AA (WCAG 1.4.11): vsaj 3:1

    Ustreza
13.58 proti 1. Besedilo: izpolnjuje AA, izpolnjuje AAA. UI komponente: ustreza.
Kako se to preveri
Barve primerjane (po mešanju)
Besedilo #000000 na ozadju #CDD0D6
Relativna svetlost
Besedilo 0.0000, ozadje 0.6294
Formula
(L1 + 0.05) / (L2 + 0.05) pri čemer je L1 svetlejša barva in L2 temnejša.
Točno razmerje
13.5891 proti 1, prikazano kot 13.58 proti 1. Prikazana vrednost je odrezana, ne zaokrožena, zato nikoli ne izgleda bolje, kot je. Za primerjavo z zahtevami se uporabi točna vrednost.

Velikost besedila: 16px, Navadno (400)

Šteje kot običajno besedilo. Veliko besedilo je vsaj 24px (18pt) ali vsaj 18.67px (14pt), če je krepko (teža 700 ali več). Velikosti so prikazane odrezane, ne zaokrožene.

Šteje kot običajno besedilo. Veliko besedilo je vsaj 24px (18pt) ali vsaj 18.67px (14pt), če je krepko (teža 700 ali več). Velikosti so prikazane odrezane, ne zaokrožene.

Aa
Naslov predogleda

Hiter rjav lisjak skoči čez lenega psa

Primer majhnega besedila (12px)

Besedilo
#000000
Ozadje
#cdd0d6

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.

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.