Kaip patikrinti, ar mano teksto ir fono spalvos atitinka WCAG reikalavimus?

Įveskite šešioliktainius kodus į Teksto spalva ir Fono spalva laukelius arba naudokite spalvų parinkiklius. Kontrasto santykis rodomas su įvertinimu Praeina arba Netinka AA ir AAA normaliam bei dideliam tekstui, taip pat ir UI komponentams.

Kokio kontrasto santykio reikalauja WCAG AA?

AA reikalauja 4,5:1 normaliam tekstui ir 3:1 dideliam tekstui. AAA reikalauja 7:1 normaliam tekstui ir 4,5:1 dideliam tekstui. UI komponentams ir grafiniams objektams reikia 3:1.

Kas laikoma dideliu tekstu?

Įrankis laiko 18 pt (24 px) įprastą tekstą arba 14 pt (18,66 px) paryškintą tekstą dideliu. Mažesnis tekstas turi atitikti aukštesnes normaliam tekstui taikomas ribas.

Mano spalvos neatitinka AA. Kaip jas pataisyti?

Naudokite vieno paspaudimo Pataisyti teksto spalvą arba Pataisyti foną pasiūlymus. Jie koreguoja šviesumą išlaikydami tą patį atspalvį, kol pora pasiekia 4,5:1.

Kokius spalvų formatus jis priima ir ar galiu pasirinkti spalvą iš ekrano?

Priima 3 ir 6 skaitmenų šešioliktaines reikšmes, pvz., #abc ar #1e293b. Mygtukas Pasirinkti spalvą iš ekrano rodomas naršyklėse, palaikančiose EyeDropper API, pvz., Chromium.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia.

🌓

WCAG spalvų kontrasto tikrintuvas nemokamai

Patikrinkite, ar dvi spalvos atitinka WCAG AA ir AAA kontrasto standartus prieinamumui. Gyva peržiūra keliais teksto dydžiais su automatiniais pasiūlymais, kai kontrastas per mažas.

Veikia jūsų naršyklėjeBe registracijos, be iššokančių langųPrisijungimo nereikiaNemokamai amžinai

Veikia neprisijungus, kai įkeliama

Teksto spalva

Fono spalva

Didelis antraštės tekstas

Vidutinis teksto dydis (18px) skaitymui ir turiniui.

Įprastas teksto dydis (16px) pastraipoms.

Mažas teksto dydis (14px) parašams ir metaduomenims.

14,63:1

Kontrasto santykis

✓WCAG AA — įprastas tekstas

Reikalinga 4.5:1 · Jūsų santykis 14,63:1

✓WCAG AA — didelis tekstas

Reikalinga 3.0:1 · Jūsų santykis 14,63:1

✓WCAG AAA — įprastas tekstas

Reikalinga 7.0:1 · Jūsų santykis 14,63:1

✓WCAG AAA — didelis tekstas

Reikalinga 4.5:1 · Jūsų santykis 14,63:1

✓Sąsajos komponentai / grafiniai objektai

Reikalinga 3.0:1 · Jūsų santykis 14,63:1

Greiti išankstiniai nustatymai

Remiantis WCAG 2.1 kontrasto gairėmis. Didelis tekstas = 18pt (24px) įprastas arba 14pt (18,66px) pusjuodis. HEX kodai atnaujinami abiem kryptimis: įveskite HEX arba pasirinkite spalvą, abu laukai sinchronizuojami.

Dažniausi naudojimo būdai

Patikrinkite zitiatiinklo puslapius WCAG atitiktimiPatikrinkite, ar jusiju vietos teksto spalvos atitinka WCAG AA arba AAA kontrastso standartus pasiekiamumui.
Patvirtinkite prekes zenklo spalvij kombinacijasTestuokite prekes zenklo spalvij palet poras, kad isitikintumete, jog jos veikia prieig vartotojo sasajos dizajng.
Testuokite tamsaugo rezimo spalvij paletesSviesita tekstas ant tamsaugo fono vis tiek gali nepavykti kontrastas - patikrinkite tamsausio rezimo palet poras cia.
Spalvij poros spauditams medziagomsPlakatai, zenklai ir spauditi medziagai taip pat rejkalingi skaiataus kontasto - ypisiai vvyresimiij skaitytojams.
Suprojektuokite prieinamus mygtukų spalvasĮsitikinkite, kad CTA, veiksmų mygtukai ir nuorodos praeina WCAG pagal jų fonus.

Kaip tai veikia

Kontrasto tikrinimas veikia visiškai jūsų naršyklėje, naudojant WCAG 2.1 santykinio šviesumo algoritmą — jokios bibliotekos, jokio serverio, tik rankomis parašyta matematika, tiksliai atitinkanti specifikaciją. Kiekvienas rezultatas atsinaujina realiu laiku, kol rašote ar renkatės spalvą.

1
HEX įvestis ir normalizavimas
Priimamos ir normalizuojamos į pilnus RGB trejetus tiek 3 skaitmenų (#abc), tiek 6 skaitmenų (#aabbcc) HEX reikšmės. Neteisinga įvestis iš karto atmetama, o ne tyliai nustatoma į juodą, todėl vietoj klaidinančio teigiamo rezultato pasirodo raudonas rėmelis.
2
WCAG šviesumo skaičiavimas
Kiekviena spalva konvertuojama į santykinį šviesumą naudojant WCAG 2.1 formulę: sRGB kanalų reikšmės linearizuojamos dalimis apibrėžta gama korekcija (dalijant iš 12,92 žemiau 0,03928, keliant laipsniu 2,4 aukščiau), tada sveriamos kaip 0,2126R + 0,7152G + 0,0722B.
3
Kontrasto santykis ir atitikties patikros
Kontrasto santykis apskaičiuojamas kaip (šviesesnis + 0,05) / (tamsesnis + 0,05) ir tikrinamas pagal visas penkias WCAG ribas: AA įprastas tekstas (4,5:1), AA didelis tekstas (3:1), AAA įprastas tekstas (7:1), AAA didelis tekstas (4,5:1) ir sąsajos komponentai (3:1). Rezultatai atsinaujina su kiekvienu paspaudimu.
4
Atspalvį išlaikantys taisymo pasiūlymai
Kai pora nepraeina WCAG AA testo, įrankis ieško HSL šviesumo erdvėje — žingsniuodamas nuo pradinio šviesumo abiem kryptimis — kad rastų artimiausią kiekvienos spalvos variantą, kuris praeina 4,5:1, išlaikant tą patį atspalvį ir sodrumą. Taip pat prieinamas EyeDropper API (Chromium), leidžiantis paimti bet kokią spalvą tiesiai iš jūsų ekrano.

Susiję įrankiai

👁️

Daltonizmo simuliatorius

Peržiūrėkite, kaip jūsų dizainas atrodo žmonėms, turintiems spalvų regėjimo sutrikimų. Imituoja protanopiją, deuteranopiją, tritanopiją, achromatopsiją ir švelnesnius sutrikimus.

IšbandykiteFailai lieka vietiškai

📐

Kokia mano ekrano skiriamoji geba

Pamatykite savo ekrano skiriamąją gebą CSS ir tikraisiais pikseliais, lango dydį, pikselių santykį, spalvų gylį, HDR, jutiklinio ekrano palaikymą ir atnaujinimo dažnį bei visa tai nukopijuokite.

Išbandykite

🖥️

Neveikiančių pikselių testas

Patikrinkite, ar ekrane nėra neveikiančių arba užstrigusių pikselių, naudodami viso ekrano juodą, baltą, raudoną, žalią, mėlyną ir pilką spalvas bei pasirenkamą užstrigusių pikselių taisyklę.