Bezmaksas pārveidotājs

Krāsu kontrasts pārbaudītājs (WCAG)

Pārbaudiet kontrasta attiecību starp divām krāsām, lai nodrošinātu atbilstību WCAG AA un AAA pieejamībai. Bezmaksas, tūlītēja un pilnībā darbojas jūsu pārlūkprogrammā.

Teksta paraugs — parastais izmērs

Maza teksta paraugs — 14px

Kontrasta attiecība:21.00:1
WCAG AAParasts tekstsPass
WCAG AALiels tekstsPass
WCAG AAAParasts tekstsPass
WCAG AAALiels tekstsPass

Par šo rīku

Pārbaudiet krāsu kontrasta attiecības starp priekšplāna tekstu un fona krāsām saskaņā ar WCAG 2.1 pieejamības vadlīnijām. Ievadiet krāsas kā heksadecimālos kodus, RGB vērtības vai HSL vērtības un uzreiz skatiet kontrasta attiecību, kā arī sekmīgi/nesekmīgus rezultātus WCAG AA un AAA atbilstībai gan parastajos, gan lielos teksta izmēros.

Kā lietot

  1. Ievadiet vai izvēlieties priekšplāna (teksta) krāsu, izmantojot krāsu atlasītāju vai heksadecimālo ievadi.
  2. Ievadiet vai izvēlieties fona krāsu.
  3. Nekavējoties skatiet kontrasta attiecību un WCAG 2.1 AA/AAA rezultātus/nepietiekamības rezultātus.
  4. Pielāgojiet krāsas, līdz sasniedzat vēlamo atbilstības līmeni.

Bieži uzdotie jautājumi

Kāda kontrasta attiecība ir nepieciešama WCAG atbilstībai?
WCAG AA prasa 4,5:1 parastam tekstam un 3:1 lielam tekstam (18 pt+ vai 14 pt+ treknrakstā). WCAG AAA prasa 7:1 parastam tekstam un 4,5:1 lielam tekstam. Maksimālā iespējamā attiecība ir 21:1 (melns uz balta).
Kāpēc krāsu kontrastam ir nozīme?
Pietiekams kontrasts nodrošina, ka teksts ir lasāms lietotājiem ar vāju redzi, krāsu aklumu vai tiem, kuri skatās ekrānus spilgtā saules gaismā. Tā ir arī juridiska prasība saskaņā ar ADA un ES pieejamības noteikumiem daudzām vietnēm.
Kas WCAG tiek uzskatīts par “lielu tekstu”?
Liels teksts ir definēts kā 18 pt (24 pikseļi) un vairāk parastajam svaram vai 14 pt (18,66 pikseļi) un vairāk treknrakstā. Lielam tekstam ir zemākas kontrasta prasības, jo to pēc būtības ir vieglāk lasīt.
Vai šis rīks pārbauda neteksta elementu kontrastu?
WCAG 2.1 pieprasa 3:1 kontrasta attiecību UI komponentiem un grafiskajiem objektiem (pogām, ikonām, veidlapu laukiem). Varat arī izmantot šo rīku, lai pārbaudītu tos — vienkārši ievadiet komponentu un fona krāsas.