Kikaguzi cha Tofauti ya Rangi

Zana zote

Kagua uwiano wa utofauti wa WCAG kati ya maandishi na rangi ya mandharinyuma — ona viwango vya kufaulu/kushindwa AA/AAA kwa maandishi ya kawaida, maandishi makubwa na vipengele vya UI, ukitumia onyesho la moja kwa moja na mapendekezo ya rangi zinazofikiwa.

Rangi ya maandishi
Tint
Rangi ya mandharinyuma
Tint
Uwiano wa utofauti
--:1
Maandishi ya kawaida
Maandishi ya mwili chini ya px 18 (au chini ya px 14 mnene)
AA AAA
Maandishi makubwa
px 18+ ya kawaida, au px 14+ mnene
AA AAA
Vipengele vya UI
Aikoni, mipaka, vidhibiti vya fomu na michoro
AA AAA
Onyesho la moja kwa moja

Mbweha mwepesi wa kahawia

Maandishi makubwa yanasomeka vizuri utofauti unapotosha.

Hii ni aya ya mfano ya maandishi ya mwili ya kawaida. Utofauti mzuri wa rangi huhifadhi maudhui yako yanayoweza kusomeka kwa kila mtu, ikiwa ni pamoja na watu wenye uoni hafifu au upofu wa rangi. kiungo cha mfano.

Maandishi madogo na manukuu ndiyo magumu zaidi kusoma — yanahitaji utofauti zaidi.
Kitufe cha mfano Kitufe cha mfano
Pendekezo

Kila kitu kinakokotolewa moja kwa moja kwenye kivinjari chako kwa kutumia fomula ya mwangaza wa jamaa ya WCAG 2.x — hakuna upakiaji, hakuna usajili, bila malipo kabisa.

Kuhusu Kikaguzi cha Tofauti ya Rangi

Kikagua Utofautishaji wa Rangi (Color Contrast Checker) hupima uwiano wa utofautishaji wa WCAG kati ya rangi ya maandishi na rangi ya usuli, kisha hupanga jozi hiyo dhidi ya viwango vya ufikivu vya AA na AAA kwa maandishi ya kawaida, maandishi makubwa na vipengele vya kiolesura. Uwiano na kila hukumu ya kufaulu/kufeli husasishwa papo hapo unaporekebisha rangi yoyote.

Kikundi cha muonekano halisi huonyesha vichwa vya habari, maandishi ya mwili, herufi ndogo, kitufe na kiungo katika mchanganyiko uliochagua, ili uweze kuhukumu usomekaji kwa maudhui halisi badala ya rangi za mfano tu. Jozi inapofeli, chombo hupendekeza rangi ya maandishi ya karibu inayofikivu inayofikia kizingiti cha AA cha 4.5:1, tayari kutumika kwa mbofyo mmoja.

Hesabu hufuata fomula ya WCAG 2.x ya mwangaza wa jamaa na huendeshwa kabisa kwenye kivinjari chako — hakuna kinachopakiwa na ukaguzi ni bure. Unaweza pia kunakili ripoti fupi ya maandishi ya uwiano na madaraja ili kubandika kwenye ukaguzi wa ufikivu au ombi la kuunganisha msimbo (pull request).

Jinsi ya kutumia Kikaguzi cha Tofauti ya Rangi

  1. Weka rangi ya maandishi yako na rangi ya usuli kwa vitafuta rangi au kwa kuandika thamani.
  2. Soma uwiano wa utofautishaji na matokeo ya AA/AAA kwa maandishi ya kawaida, maandishi makubwa na vipengele vya kiolesura.
  3. Kagua muonekano halisi ili kuona vichwa vya habari, aya, vitufe na viungo halisi katika rangi zako.
  4. Ikiwa jozi imefeli, tumia rangi ya maandishi iliyopendekezwa inayofikivu au badilishana rangi mbili hizo.
  5. Bofya "Copy report" ili kushiriki uwiano na matokeo ya kufuata viwango.

Maswali yanayoulizwa mara kwa mara

WCAG AA inahitaji 4.5:1 kwa maandishi ya kawaida na 3:1 kwa maandishi makubwa na vipengele vya kiolesura kama vile ikoni na mipaka ya fomu. Kiwango kikali zaidi cha AAA kinahitaji 7:1 kwa maandishi ya kawaida na 4.5:1 kwa maandishi makubwa.

Maandishi ya 18px au zaidi kwa uzito wa kawaida, au 14px na zaidi yakiwa mazito. Kwa kuwa herufi kubwa ni rahisi zaidi kutambulika, WCAG huruhusu uwiano mdogo zaidi wa utofautishaji wa 3:1 katika kiwango cha AA.

Ndiyo. Kila ukaguzi hukokotolewa papo hapo kwenye kivinjari chako kwa kutumia fomula ya mwangaza wa jamaa wa WCAG, bila kujisajili, bila kikomo cha matumizi na bila gharama.

Tumia pendekezo lililojengwa ndani: chombo hutafuta toleo la karibu la rangi yako ya maandishi linalofaulu AA dhidi ya usuli wa sasa na kukuwezesha kulitumia moja kwa moja. Ikiwa hakuna toleo la rangi ya maandishi linaloweza kufaulu, rekebisha usuli badala yake.

Unashughulikia vigezo vya utofautishaji wa rangi, ambavyo ni miongoni mwa mapungufu ya kawaida zaidi ya ufikivu, lakini si kila kitu. Bado unapaswa kuangalia hali za mkazo (focus states), uwezo wa habari kutoeleweka bila rangi, saizi za herufi, na jinsi palette inavyofanya kazi chini ya kuiga upofu wa rangi.

Hapana. Rangi mbili, uwiano na mapendekezo yote hukokotolewa ndani ya kivinjari chako — ukurasa haufanyi ombi lolote la seva unapofanya kazi.
Shiriki hii
Zana Zinazohusiana
Kisimulizi cha Upofu wa Rangi Ona picha yako au rangi kama wanavyoona watu wenye protanopia, deuteranopia, tritanopia au achromatopsia — inafanya kazi kabisa kwenye kivinjari chako, hakuna kinachopakiwa. Bila Malipo
Kisafirishaji cha Rangi Bandika au ingiza seti ya rangi na uzisafirisha papo hapo kwa CSS variables, SCSS, Tailwind config, JSON au SVG swatches — hatua ya mwisho kwa rangi yoyote. Bila Malipo
Skrini Nyekundu Kamili Jaza skrini yako yote kwa wekundu safi ili kujaribu kituo cha sub-pixel chekundu na kufichua pikseli zilizokufa kwenye uwanja wa rangi. Bila malipo na hufanya kazi kwenye kivinjari chako. Bila Malipo
Kibadilishaji cha Msimbo wa Rangi Badilisha rangi kati ya HEX, RGB, RGBA, HSL, HSLA, HSV na CMYK — chagua rangi, rekebisha alfa, na nakili muundo wowote papo hapo. Bila Malipo
Kizalishi cha Vivuli vya Rangi Zalisha safu kamili ya tints na vivuli kutoka rangi moja — chagua hatua ya kutiua/kuangaza na idadi ya vivuli, kisha nakili thamani yoyote papo hapo. Bila Malipo
Paji la Rangi Salama za Wavuti Vinjari rangi 216 za kawaida salama za wavuti kama gridi ya sampuli zinazoweza kubofywa — panga kwa rangi au mpangilio wa mchemraba, chuja kwa hex, na nakili thamani yoyote ya HEX au rgb() papo hapo. Bila Malipo
Utafutaji maarufu
kikagua tofauti ya rangi uwiano wa tofauti wa wcag kikagua tofauti ufikiaji kikagua tofauti ya maandishi jaribio la tofauti aa aaa angalia tofauti ya rangi mtandaoni
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.