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 običajno)

To je predvidena zgodba o velikem naslovnem besedilnem slogu.

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

HEX RGB HSL barvni pretvornik
Pretvorite barve in prilagodite koordinate svetlosti.
Fotografija barve Picker
Izvlecite barvne palete iz maket oblikovanja.
CSS Barvni pretvornik
Konvertirate med formati CMYK, HSV, RGB, HSL in HEX.

Preverjanje barvnega kontrasta

Izračunajte kontrastne razmerja WCAG za prednjega in ozadje barve in prikažite skupne rezultate velikosti besedila.

Vhod
Dve veljavni CSS barvi in predogled besedila.
Izhod
Kontrastni razmerje z WCAG AA in AAA prehod ali pomanjkanje kazalnikov.
Resnične omejitve
Izračun zajema le svetlobni kontrast; ne potrjuje vmesnika ali računa za font rendering, gibanje, osredotočenost ali brezbarvne zglede.
Zasebnost in obdelava podatkov
dve veljavni CSS barvi in opcionalni preview besedilo se obdeluje v tej zavihki brskalnika. Converter ne prejme ali shrani; zapiranje ali ponovno naložba strani očisti delovni status, razen če orodje izrecno ponuja lokalno prenos.

Kako uporabljati to orodje

  1. Dve veljavni barvi CSS in predogled besedila v kontrolnikih orodja.
  2. Izberite nastavitve, ki vplivajo na razmerje kontrasta z WCAG AA in AAA prehod ali neuspešni kazalniki, nato pa izvajajo orodje.
  3. Preverite razmerje kontrasta z WCAG AA in AAA prehod ali neuspešni kazalniki pred kopiranjem ali prenosom.

Skupni načini neuspeha

Neupravičeno barvo ni mogoče meriti, in preglednost brez rešene ozadja lahko naredi razmerje brez pomena.

Koristni primer

Primerjajte besedilo #f2937 na #ffffff, da preučite razmerje med normalnim in velikim besedilom.