Je, ninakaguaje kama rangi za maandishi na usuli wangu zinapitisha WCAG?

Ingiza misimbo ya hex kwenye Rangi ya maandishi na Rangi ya mandhari nyuma, au tumia viteuzi. Uwiano wa utofauti utaonekana pamoja na Kupita au Imeshindwa kwa AA na AAA maandishi ya kawaida na makubwa, pamoja na vipengele vya UI.

Je, WCAG AA inahitaji uwiano gani wa utofauti?

AA inahitaji 4.5:1 kwa maandishi ya kawaida na 3:1 kwa maandishi makubwa. AAA inahitaji 7:1 kwa maandishi ya kawaida na 4.5:1 kwa maandishi makubwa. Vipengele vya UI na vitu vya michoro vinahitaji 3:1.

Ni nini kinachohesabiwa kama maandishi makubwa?

Zana hii inachukulia maandishi ya kawaida ya 18pt (24px), au maandishi ya koze ya 14pt (18.66px), kama makubwa. Maandishi madogo lazima yafikie vizingiti vya juu vya maandishi ya kawaida.

Rangi zangu hazikupita AA. Je, ninazirekebishaje?

Tumia mapendekezo ya kubofya mara moja ya Rekebisha rangi ya maandishi au Rekebisha muundo wa nyuma. Yanarekebisha mwangaza huku yakihifadhi hue ileile hadi jozi ifikie 4.5:1.

Je, inakubali miundo gani ya rangi, na ninaweza kuchagua kutoka skrini?

Inakubali thamani za hex za tarakimu 3 na 6, kama vile #abc au #1e293b. Kitufe cha Chagua rangi kutoka kwa skrini huonekana kwenye vivinjari vinavyounga mkono API ya EyeDropper, kama vile Chromium.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

🌓

Mkaguzi wa Utofauti wa Rangi wa WCAG bila malipo

Angalia kama rangi mbili zinakidhi viwango vya utofauti wa AA na AAA vya WCAG kwa upatikanaji. Mwonekano wa moja kwa moja kwa ukubwa wa maandishi mengi na mapendekezo ya kiotomatiki wakati utofauti ni mdogo sana.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

Rangi ya maandishi

Rangi ya mandhari nyuma

Maandishi makubwa ya kichwa

Maandishi ya kati ya mwili (18px) kwa usomaji na maudhui.

Maandishi ya kawaida ya mwili (16px) kwa aya.

Maandishi madogo ya mwili (14px) kwa manukuu na metadata.

14.63:1

Uwiano wa utofauti

✓WCAG AA — Maandishi ya kawaida

Inahitaji 4.5:1 · Una 14.63:1

✓WCAG AA — Maandishi makubwa

Inahitaji 3.0:1 · Una 14.63:1

✓WCAG AAA — Maandishi ya kawaida

Inahitaji 7.0:1 · Una 14.63:1

✓WCAG AAA — Maandishi makubwa

Inahitaji 4.5:1 · Una 14.63:1

✓Vipengele vya UI / vitu vya picha

Inahitaji 3.0:1 · Una 14.63:1

Mipangilio ya awali ya haraka

Kulingana na mwongozo wa utofauti wa WCAG 2.1. Maandishi makubwa = 18pt (24px) ya kawaida au 14pt (18.66px) nzito. Nambari za hex husasishwa pande zote mbili: andika hex au chagua rangi, ingizo zote mbili zinabaki zilizosawazishwa.

Matumizi ya kawaida

Ukaguzi wa Kurasa za Wavuti kwa Kuzingatia WCAGThibitisha kuwa rangi za matini ya wavuti yako zinafuata WCAG AA au AAA viwango vya kubadilishana.
Thibitisha Mchanganyiko wa Rangi ya ChapaJaribu mchanganyiko wa njia ya rangi ya chapa yako ili kuhakikisha wanafanya kazi kwa muundo wa UI unaopatikana.
Jaribu Njia za Rangi ya Modi ya GizaMatini ya anga kwa nyuma nyeusi inaweza bado kushindwa katika kubadilishana — kaguza mchanganyiko wa modi ya giza yako.
Mchanganyiko wa Rangi kwa Nyenzo za ChapaMijalada, alama, na nyenzo za chapa pia hnahitaji kubadilishana kinachosomeka — haswa kwa waongofu zaidi.
Andaa rangi za kitufe zinazoweza kufikiaHakikisha kwamba CTA, vitufe vya hatua, na kiungo hupitia WCAG kwa njia ya nyuma zao.

Jinsi Inavyofanya Kazi

Ukaguzi wa mkanganyiko unafanyika kikamilifu kwenye kivinjari chako kwa kutumia alkoritimu ya mwangaza wa jamaa wa WCAG 2.1 — hakuna maktaba, hakuna seva, ni hesabu iliyoandikwa mwenyewe inayofuata kiwango kwa usahihi. Kila matokeo yanasasishwa papo hapo unapoandika au kuchagua rangi.

1
Uingizaji wa hex na usanifishaji
Thamani zote za hex za tarakimu 3 (#abc) na tarakimu 6 (#aabbcc) zinakubalika na kusanifishwa kuwa vipande vitatu kamili vya RGB. Uingizaji batili unakataliwa papo hapo badala ya kurudi kimya kimya kuwa nyeusi, kwa hiyo mpaka mwekundu unaonekana badala ya matokeo ya kufaulu yanayopotosha.
2
Hesabu ya mwangaza wa WCAG
Kila rangi inabadilishwa kuwa mwangaza wa jamaa kwa kutumia fomula ya WCAG 2.1: thamani za chaneli za sRGB zinasawazishwa kwa urekebishaji wa gamma wa vipande (kugawanya kwa 12.92 chini ya 0.03928, kuinua hadi nguvu ya 2.4 juu yake), kisha kupimwa kama 0.2126R + 0.7152G + 0.0722B.
3
Uwiano wa mkanganyiko na ukaguzi wa ufuasi
Uwiano wa mkanganyiko unahesabiwa kama (nyepesi zaidi + 0.05) / (nzito zaidi + 0.05) na kukaguliwa dhidi ya vikomo vyote vitano vya WCAG: maandishi ya kawaida ya AA (4.5:1), maandishi makubwa ya AA (3:1), maandishi ya kawaida ya AAA (7:1), maandishi makubwa ya AAA (4.5:1), na vipengele vya UI (3:1). Matokeo yanasasishwa kwa kila mgusano wa kitufe.
4
Mapendekezo ya kurekebisha yanayodumisha rangi
Wakati jozi inashindwa WCAG AA, kifaa kinatafuta katika nafasi ya mwanga wa HSL — kikienda nje kutoka mwanga wa asili pande zote mbili — kupata tofauti ya karibu zaidi ya kila rangi inayofaulu 4.5:1 huku ikidumisha rangi na mchanganyiko ule ule. EyeDropper API (Chromium) pia inapatikana kuchukua sampuli ya rangi yoyote moja kwa moja kutoka skrini yako.

Zana Zinazohusiana

👁️

Kiigaji cha Upofu wa Rangi

Ona jinsi muundo wako unavyoonekana kwa watu wenye upungufu wa maono ya rangi. Huiga protanopia, deuteranopia, tritanopia, achromatopsia, na upungufu mdogo zaidi.

JaribuFaili ni za ndani

📐

Ubora wa Skrini Yangu ni Gani

Ona ubora wa skrini yako katika pikseli za CSS na halisi, ukubwa wa dirisha, uwiano wa pikseli, kina cha rangi, HDR, usaidizi wa kugusa na kiwango cha uonyeshaji upya, na unakili yote.

Jaribu

🖥️

Jaribio la Pikseli Zilizokufa

Angalia skrini yako kwa pikseli zilizokufa au zilizokwama kwa rangi nyeusi, nyeupe, nyekundu, kijani, bluu na kijivu za skrini nzima, pamoja na kirekebisha pikseli zilizokwama cha hiari.