Kako preverim, ali barvi mojega besedila in ozadja ustrezata WCAG?

V polji Barva besedila in Barva ozadja vnesite šestnajstiške kode ali uporabite izbirnika barv. Kontrastno razmerje se prikaže z oznako Uspešno ali Neuspešno za AA in AAA pri običajnem in velikem besedilu ter za elemente uporabniškega vmesnika.

Kakšno razmerje kontrasta zahteva WCAG AA?

AA zahteva 4,5:1 za običajno besedilo in 3:1 za veliko besedilo. AAA zahteva 7:1 za običajno besedilo in 4,5:1 za veliko besedilo. Elementi uporabniškega vmesnika in grafični objekti zahtevajo 3:1.

Kaj šteje kot veliko besedilo?

Orodje obravnava 18pt (24px) običajno besedilo ali 14pt (18,66px) krepko besedilo kot veliko. Manjše besedilo mora izpolnjevati višje pragove za normalno besedilo.

Moje barve ne ustrezajo AA. Kako jih popravim?

Uporabite predloga Popravite barvo besedila ali Popravite ozadje z enim klikom. Prilagodita svetlost, medtem ko ohranita isti odtenek, dokler par ne doseže 4,5:1.

Katere barvne formate sprejema in ali lahko izberem barvo z zaslona?

Sprejema 3-mestne in 6-mestne šestnajstiške vrednosti, kot sta #abc ali #1e293b. Gumb Izberite barvo s zaslona se prikaže v brskalnikih, ki podpirajo EyeDropper API, kot je Chromium.

Ali je res brezplačno?

Da. Vsako orodje je brezplačno za uporabo, brez računa in kreditne kartice. Delo poteka na vaši napravi in ne na naših strežnikih, kar omogoča brezplačno delovanje.

Ali deluje na mobilniku?

Da. Deluje v sodobnih mobilnih brskalnikih na iOS in Androidu, brez namestitve.

🌓

Preverjevalnik barvnega kontrasta WCAG — brezplačno

Preverite, ali dve barvi izpolnjujeta standarde kontrasta WCAG AA in AAA za dostopnost. Živi predogled v več velikostih besedila s samodejnimi predlogi, ko je kontrast prenizek.

Deluje v vašem brskalnikuBrez registracije, brez pojavnih okenPrijava ni potrebnaBrezplačno za vedno

Deluje brez povezave po nalaganju

Barva besedila

Barva ozadja

Velika naslovna besedila

Srednje besedilo (18px) za branje in vsebino.

Normalno besedilo (16px) za odstavke.

Majhno besedilo (14px) za napise in metapodatke.

14,63:1

Razmerje kontrasta

✓WCAG AA — navadno besedilo

Zahteva 4.5:1 · Vaše razmerje je 14,63:1

✓WCAG AA — veliko besedilo

Zahteva 3.0:1 · Vaše razmerje je 14,63:1

✓WCAG AAA — navadno besedilo

Zahteva 7.0:1 · Vaše razmerje je 14,63:1

✓WCAG AAA — veliko besedilo

Zahteva 4.5:1 · Vaše razmerje je 14,63:1

✓Komponente vmesnika / grafični elementi

Zahteva 3.0:1 · Vaše razmerje je 14,63:1

Hitre prednastavitve

Temelji na smernicah WCAG 2.1 za kontrast. Veliko besedilo = 18pt (24px) navadno ali 14pt (18,66px) krepko. HEX kode se posodabljajo v obe smeri: vnesite HEX ali izberite barvo, oba vnosa ostaneta usklajena.

Pogosta področja uporabe

Revidirajte spletne strani za skladnost WCAGPreverite, da barve besedila vaše spletne strani izpolnjujejo standarde kontrasta WCAG AA ali AAA za dostopnost.
Preverite kombinacije barv blagovne znamkeTestirajte kombinacije palete barv blagovne znamke, da zagotovite, da delujejo za dostopne oblikovanje uporabniškega vmesnika.
Testirajte palete barv temnega načinaSvetlo besedilo na temni ozadju se še vedno lahko ne ujema s kontrastom - preverite kombinacije palete temnega načina tukaj.
Kombinacije barv za tiskane materialePlakati, znaki in tiskani materiali tudi potrebujejo berljiv kontrast - posebej za starejše bralce.
Oblikovanje dostopnih barv gumbovPoskrbite, da CTA, akcijski gumbi in povezave preidejo WCAG glede na njihova ozadja.

Kako deluje

Preverjanje kontrasta poteka v celoti v vašem brskalniku z uporabo algoritma relativne svetlosti WCAG 2.1 — brez knjižnice, brez strežnika, le ročno napisana matematika, ki natanko sledi specifikaciji. Vsak rezultat se posodobi v realnem času med tipkanjem ali izbiro barve.

1
Šestnajstiški vnos in normalizacija
Sprejete so tako 3-mestne (#abc) kot 6-mestne (#aabbcc) šestnajstiške vrednosti, normalizirane na polne trojke RGB. Neveljaven vnos se takoj zavrne namesto tihega privzetka na črno, tako da se prikaže rdeč obrobek namesto zavajajočega rezultata uspešno.
2
Izračun svetlosti WCAG
Vsaka barva se pretvori v relativno svetlost z uporabo formule WCAG 2.1: vrednosti kanalov sRGB se linearizirajo z odsekovno popravo gama (deljenje z 12,92 pod 0,03928, dvig na potenco 2,4 nad tem), nato uteži kot 0,2126R + 0,7152G + 0,0722B.
3
Razmerje kontrasta in preverjanje skladnosti
Razmerje kontrasta se izračuna kot (svetlejša + 0,05) / (temnejša + 0,05) in preveri glede na vseh pet pragov WCAG: AA navadno besedilo (4,5:1), AA veliko besedilo (3:1), AAA navadno besedilo (7:1), AAA veliko besedilo (4,5:1) in komponente uporabniškega vmesnika (3:1). Rezultati se posodobijo ob vsakem pritisku tipke.
4
Predlogi popravkov ob ohranjanju odtenka
Ko par ne uspe pri WCAG AA, orodje preišče prostor svetlosti HSL — koraka navzven od prvotne svetlosti v obe smeri — da najde najbližjo različico vsake barve, ki uspe pri 4,5:1 ob ohranjanju enakega odtenka in nasičenosti. API EyeDropper (Chromium) je prav tako na voljo za vzorčenje katere koli barve neposredno z zaslona.

Sorodna orodja

👁️

Simulator barvne slepote

Oglejte si, kako vaš dizajn izgleda osebam z motnjami barvnega vida. Simulira protanopijo, deuteranopijo, tritanopijo, ahromatopsijo in blažje anomalije.

PoskusiteDatoteke ostanejo lokalne

📐

Kakšna je ločljivost mojega zaslona

Oglejte si ločljivost zaslona v CSS in dejanskih slikovnih pikah, velikost okna, razmerje slikovnih pik, barvno globino, HDR, podporo za dotik in hitrost osveževanja ter vse kopirajte.

Poskusite

🖥️

Preizkus mrtvih pik

Preverite, ali so na zaslonu mrtve ali zataknjene pike, s celozaslonskimi barvami: črno, belo, rdečo, zeleno, modro in sivo ter z neobveznim odpravljalcem zataknjenih pik.