Kif niċċekkja jekk il-kuluri tat-test u tal-isfond tiegħi jgħaddux mill-WCAG?

Daħħal kodiċijiet hex f'Kulur tat-test u Kulur tal-isfond, jew uża l-pickers. Il-Proporzjon tal-kuntrast jidher b'Għadda jew Falla għal test normali u kbir ta' AA u AAA, kif ukoll għal komponenti tal-UI.

X'proporzjon ta' kuntrast jirrikjedi l-WCAG AA?

AA jeħtieġ 4,5:1 għal test normali u 3:1 għal test kbir. AAA jeħtieġ 7:1 għal test normali u 4,5:1 għal test kbir. Komponenti tal-UI u oġġetti grafiċi jeħtieġu 3:1.

X'jgħodd bħala test kbir?

L-għodda tqis test regolari ta' 18pt (24px), jew test b'tipa grassa ta' 14pt (18,66px), bħala kbir. Test iżgħar irid jilħaq il-limiti ogħla tat-test normali.

Il-kuluri tiegħi jfallu l-AA. Kif nista' nirranġahom?

Uża s-suġġerimenti bi klikk waħda Aġġusta l-kulur tal-test jew Aġġusta l-isfond. Dawn jaġġustaw il-luminożità filwaqt li jżommu l-istess lewn sakemm il-par jilħaq 4,5:1.

Liema formati ta' kulur jaċċetta, u nista' nagħżel kulur mill-iskrin?

Jaċċetta valuri hex bi 3 ċifri u b'6 ċifri, bħal #abc jew #1e293b. Buttuna Agħżel kulur mill-iskrin tidher fi browsers li jappoġġjaw l-EyeDropper API, bħal Chromium.

Iva. Kull għodda tista' tintuża b'xejn, mingħajr kont u mingħajr karta ta' kreditu. Ix-xogħol isir fuq it-tagħmir tiegħek minflok fuq is-servers tagħna, u huwa dan li jippermettilha tibqa' taħdem b'xejn.

Taħdem fuq il-mowbajl?

Iva. Jaħdem fil-browsers moderni tal-mowbajl fuq iOS u Android, mingħajr xejn x'tinstalla.

🌓

Iċċekkja l-Kuntrast tal-Kuluri WCAG b'xejn

Iċċekkja jekk żewġ kuluri jissodisfawx l-istandards tal-kuntrast WCAG AA u AAA għall-aċċessibbiltà. Preview ħaj f'daqsijiet ta' test multipli b'suġġerimenti awtomatiċi meta l-kuntrast ikun baxx wisq.

Jaħdem fil-browser tiegħekMingħajr reġistrazzjoni, mingħajr pop-upsEbda login meħtieġĦieles għal dejjem

Jaħdem offline ladarba mgħobbi

Kulur tat-test

Kulur tal-isfond

Intestatura kbira

Test tal-ġisem medju (18px) għall-qari.

Test tal-ġisem normali (16px) għall-paragrafi.

Test tal-ġisem żgħir (14px) għall-kapsjonijiet u metadata.

14.63:1

Proporzjon tal-kuntrast

✓WCAG AA — test normali

Jeħtieġ 4.5:1 · Għandek 14.63:1

✓WCAG AA — test kbir

Jeħtieġ 3.0:1 · Għandek 14.63:1

✓WCAG AAA — test normali

Jeħtieġ 7.0:1 · Għandek 14.63:1

✓WCAG AAA — test kbir

Jeħtieġ 4.5:1 · Għandek 14.63:1

✓Komponenti UI / oġġetti grafiċi

Jeħtieġ 3.0:1 · Għandek 14.63:1

Presets mgħaġġla

Ibbażat fuq il-linji gwida tal-kuntrast WCAG 2.1. Test kbir = 18pt (24px) normali jew 14pt (18.66px) bold. Il-kodiċijiet HEX jaġġornaw fiż-żewġ direzzjonijiet: ikteb HEX jew agħżel kulur, iż-żewġ inputs jibqgħu sinkronizzati.

Użi komuni

Audit Web Pages għal WCAG ComplianceIvverifika li l-kuluri tat-test tal-websajt tiegħek jissodisfu WCAG AA jew AAA contrast standards għall-aċċessibilità.
Ivverifika Brand Color CombinationsIttestja l-brand color palette pairings tiegħek biex tiżgura li jaħdmu għall-accessible UI design.
Test Dark Mode Color PalettesTest li light text fuq dark backgrounds jista' jfalli l-contrast - ċċekkja l-pairings tal-palette dark mode tiegħek hawn.
Color Pairings għal Print MaterialsPosters, signs, u printed materials bħalħekk jeħtieġu readable contrast - speċjalment għall-older viewers.
Iddisinja Kuluri tal-Buttun AċċessibbliKun żgur li CTAs, buttuni ta' azzjoni, u links jippassaw WCAG kontra l-isfond tagħhom.

Kif Taħdem

L-iċċekkjar tal-kuntrast jaħdem kompletament fil-browser tiegħek bl-użu tal-algoritmu tal-luminanza relattiva WCAG 2.1 — l-ebda librerija, l-ebda server, sempliċement matematika miktuba bl-idejn li ssegwi l-ispeċifikazzjoni eżattament. Kull riżultat jiġi aġġornat f'ħin reali hekk kif tittajpja jew tagħżel kulur.

1
Dħul u normalizzazzjoni tal-hex
Kemm valuri hex ta' 3 ċifri (#abc) kif ukoll ta' 6 ċifri (#aabbcc) huma aċċettati u normalizzati għal triplets RGB sħaħ. Dħul mhux validu jiġi miċħud minnufih minflok ma jaqleb siekta għall-iswed, biex tidher bordura ħamra minflok riżultat qarrieqi li jgħaddi.
2
Kalkolu tal-luminanza WCAG
Kull kulur jiġi konvertit għal luminanza relattiva bl-użu tal-formula WCAG 2.1: il-valuri tal-kanal sRGB jiġu linearizzati b'korrezzjoni gamma f'biċċiet (diviżjoni b'12.92 taħt 0.03928, elevazzjoni għall-poter ta' 2.4 fuqha), imbagħad ippeżati bħala 0.2126R + 0.7152G + 0.0722B.
3
Proporzjon tal-kuntrast u ċekkijiet ta' konformità
Il-proporzjon tal-kuntrast jiġi kkalkulat bħala (l-aktar ħafif + 0.05) / (l-aktar skur + 0.05) u jiġi mqabbel mal-ħames limiti WCAG kollha: test normali AA (4.5:1), test kbir AA (3:1), test normali AAA (7:1), test kbir AAA (4.5:1), u komponenti tal-UI (3:1). Ir-riżultati jiġu aġġornati f'kull ħabta tat-tastiera.
4
Suġġerimenti ta' rranġar li jżommu l-hue
Meta l-par jonqos milli jgħaddi minn WCAG AA, l-għodda tfittex fl-ispazju tad-dawl HSL — timxi 'l barra mid-dawl oriġinali fiż-żewġ direzzjonijiet — biex issib l-eqreb varjant ta' kull kulur li jgħaddi 4.5:1 filwaqt li żżomm l-istess hue u saturazzjoni. L-API EyeDropper (Chromium) hija disponibbli wkoll biex tikkampjuna kwalunkwe kulur direttament mill-iskrin tiegħek.

Għodod Relatati

👁️

Simulatur tal-Għama tal-Kuluri

Ara kif jidher id-disinn tiegħek lil persuni b'defiċjenzi fid-dawl tal-kuluri. Isimula protanopia, deuteranopia, tritanopia, achromatopsia, u anomaliji aktar ħfief.

IpprovaIl-fajls jibqgħu lokali

📐

X'inhi r-Riżoluzzjoni tal-Iskrin Tiegħi?

Ara r-riżoluzzjoni tal-iskrin tiegħek f'CSS u f'pixels reali, id-daqs tat-tieqa, il-pixel ratio, il-fond tal-kulur, l-HDR, l-appoġġ għat-touch u r-refresh rate, u kkopja kollox.

Ipprova

🖥️

Test għal Dead Pixels

Iċċekkja l-iskrin tiegħek għal pixels mejta jew imwaħħla b'kulur iswed, abjad, aħmar, aħdar, blu u griż fuq skrin sħiħ, flimkien ma' għodda fakultattiva biex issewwi pixels imwaħħla.