WCAG preverjanje barvnega kontrasta

Ocenite kontrastno razmerje besedila in barv ozadja v skladu s smernicami WCAG 2.1. Takoj ustvarite dostopne barvne prilagoditve.

HEX/RGB/HSL
HEX/RGB/HSL
Vse se izvaja lokalno v vašem brskalniku.

Predogled besedila v živo

Velik naslov (18pt krepko / 24pt navadno)

To je predogled sloga velikega naslovnega besedila.

Običajno besedilo (pod 18pt)

Lorem ipsum dolor sit amet, konzectetur adipiscing elita.

Kontrastno razmerje

18.6:1

Status skladnosti z WCAG 2.1

Zahteve WCAG AA
Običajno besedilo (4.5:1) PASS
Veliko besedilo (3.0:1) PASS
Zahteve WCAG AAA
Običajno besedilo (7.0:1) PASS
Veliko besedilo (4.5:1) PASS

Smernice WCAG 2.1

Preprosto preverite standarde kontrasta za izdelavo dostopnih vmesnikov, ki so skladni s smernicami Section 508, ADA in WCAG AA ali AAA.

Motor za predloge

Samodejno prilagodite barve incurzivno vzdolž koordinat HSL, da bi našli najbližje alternative, ki izpolnjujejo merila razmerja kontrasta.

Popolnoma na strani odjemalca

Izračuni se izvajajo lokalno v kontekstu vašega brskalnika. Na naše strežnike se ne prenašajo barve, datoteke ali telemetrične koordinate.

Sorodna barvna orodja

Pretvornik barv HEX, RGB in HSL
Pretvorite barve in prilagodite koordinate svetlosti.
Izbirnik barv slike
Izvlecite barvne palete iz maket oblikovanja.
CSS barvni pretvornik
Konvertirate med formati CMYK, HSV, RGB, HSL in HEX.

Preverjanje barvnega kontrasta

Izračunajte kontrastna razmerja WCAG za barve ospredja in ozadja ter prikažite običajne rezultate velikosti besedila.

Vhod
Dve veljavni barvi CSS in izbirno besedilo predogleda.
Izhod
Kontrastno razmerje z indikatorji uspešnosti ali neuspešnosti WCAG AA in AAA.
Resnične omejitve
Izračun zajema le svetlobni kontrast; ne potrjuje vmesnika ali upošteva prikazovanja pisave, gibanja, fokusa ali nebarvnih namigov.
Zasebnost in ravnanje s podatki
dve veljavni CSS barvi in neobvezno predogledno besedilo se obdelujeta v tem zavihku brskalnika. Convertr ju ne prejme ali shrani; zapiranje ali ponovno nalaganje strani počisti delovno stanje, razen če orodje izrecno ponuja lokalni prenos.

Kako uporabljati to orodje

  1. Ponudite dve veljavni barvi CSS in izbirno besedilo za predogled v kontrolnikih orodja.
  2. Izberite nastavitve, ki vplivajo na kontrastno razmerje z indikatorji uspešnosti ali neuspešnosti WCAG AA in AAA, nato zaženite orodje.
  3. Preglejte razmerje kontrasta z indikatorji uspešnosti ali neuspešnosti WCAG AA in AAA, preden ga kopirate ali prenesete.

Pogosti načini napak

Neveljavnih barv ni mogoče izmeriti in preglednost brez določenega ozadja lahko naredi razmerje brez pomena.

Koristni primer

Primerjajte besedilo #1f2937 na #ffffff, da preverite njegovo razmerje za običajno in veliko besedilo.