1. Weka rangi ya maandishi
Weka msimbo wa rangi (mfano #333333) kwa muundo wa HEX, RGB, au HSL – au chagua rangi kutoka kichaguzi cha rangi.
Kikaguzi cha utofautishaji na usomekaji wa rangi
Weka rangi ya maandishi na mandharinyuma, na zana itaonyesha kama utofautishaji unatosha. Mahesabu yanategemea kiwango cha kimataifa cha ufikivu WCAG 2.1.
Uwiano wa tofauti
21.00 : 1
Maandishi ya kawaida
AA (min. 4.5:1)AAA (min. 7:1)
Maandishi ya mfano ya tofauti ya WCAG 2.1
Maandishi makubwa / yaliyokozeshwa
AA (min. 3:1)AAA (min. 4.5:1)
Maandishi ya mfano ya tofauti ya WCAG 2.1
Ikoni
AA (min. 3:1)
Kwa nini usomekaji wa rangi ni muhimu?
Usomekaji ni tofauti ya mwangaza kati ya rangi ya maandishi na rangi ya mandharinyuma. Kadri tofauti inavyokuwa kubwa, ndivyo inavyokuwa rahisi kusoma maandishi. Utofautishaji wa chini sana hufanya maudhui kuwa magumu kusoma – hasa kwa watu wenye ulemavu wa macho, wazee, au katika hali ngumu za mwanga (mfano kwenye simu kwenye jua kali).
Kulingana na Shirika la Afya Duniani (WHO), takriban watu bilioni 2.2 duniani kote wana aina fulani ya ulemavu wa macho. Zaidi ya hayo, mamilioni wana upofu wa rangi (takriban 8% ya wanaume na 0.5% ya wanawake).
Zana huhesabu uwiano wa utofautishaji kwa kutumia fomula iliyoainishwa katika WCAG 2.1 (Web Content Accessibility Guidelines) – miongozo ya kimataifa ya ufikivu wa kidijitali.
Jinsi ya kutumia kikaguzi cha utofautishaji wa rangi
Kuangalia usomekaji kunachukua sekunde chache tu:
2. Weka rangi ya mandharinyuma
Weka rangi ya mandharinyuma ambayo maandishi yataonyeshwa – inaweza kuwa rangi ya sehemu, kipande, au ukurasa mzima.3. Soma matokeo
Zana itahesabu uwiano wa utofautishaji na kuonyesha kama rangi zinakidhi mahitaji ya WCAG kwa maandishi ya kawaida, maandishi makubwa, na ikoni.4. Rekebisha rangi
Ikiwa utofautishaji ni wa chini sana, kipengele cha Match kinapendekeza kiotomatiki toleo la rangi linalokidhi kizingiti kilichochaguliwa.
Miundo gani ya rangi inaungwa mkono?
HEX
Muundo wa heksadesimali – wa kawaida zaidi katika muundo wa tovuti. Huanza na # na ina herufi 3 au 6 (tarakimu 0-9 na herufi A-F).
#fff– nyeupe (muundo mfupi)#ffffff– nyeupe (muundo kamili)#1a73e8– bluu
Uwiano wa utofautishaji
8.59:1
Maandishi ya kawaida
AA (min. 4.5:1)AAA (min. 7:1)
Jinsi ya kutafsiri matokeo ya jaribio la usomekaji
Baada ya kuweka rangi, zana inaonyesha matokeo katika sehemu tatu:
- Maandishi ya kawaida – yanahitaji utofautishaji wa 4.5:1 (AA) au 7:1 (AAA). Inatumika kwa maandishi chini ya 18pt (24px) au chini ya 14pt bold.
- Maandishi makubwa / bold – yanahitaji utofautishaji wa 3:1 (AA) au 4.5:1 (AAA). Inatumika kwa vichwa, vitufe, na maeneo yaliyoangaziwa.
- Ikoni – zinahitaji utofautishaji wa 3:1 (AA). Inatumika kwa ikoni na vipengele vya UI vinavyowasilisha habari.
Kiashiria kijani kinamaanisha sharti limekidhiwa. Kiashiria nyekundu kinamaanisha utofautishaji ni wa chini sana na unahitaji kuboreshwa.
Kulinganisha rangi kiotomatiki kwa mahitaji ya WCAG
Ikiwa utofautishaji ni wa chini sana, huhitaji kutafuta rangi sahihi kwa kujaribu na kukosea. Kipengele cha Match kinapata kiotomatiki toleo la rangi ya maandishi linalokidhi kizingiti kilichochaguliwa cha utofautishaji.
Jinsi kulinganisha kunafanya kazi:
- Chagua shabaha ya kulinganisha kutoka orodha – mfano AA kwa maandishi ya kawaida au AAA kwa maandishi makubwa.
- Bofya kitufe cha Match.
- Zana itatafuta toleo la mwanga wa rangi ya maandishi na kupendekeza lililo karibu zaidi linalokidhi mahitaji.
- Rangi iliyopendekezwa inaweza kunakiliwa kwenye ubao wa kunakili au kuwekwa mara moja kama rangi mpya ya maandishi.
Algorithm inahifadhi hue na saturation ya rangi ya asili, ikibadilisha mwanga tu. Rangi iliyopendekezwa inabaki kulingana na utambulisho wa kuona huku ikikidhi kiwango cha ufikivu.
Viwango vya AA na AAA vinamaanisha nini katika kiwango cha WCAG?
| Funkcja | Kiwango AA (chini) | Kiwango AAA (juu) |
|---|---|---|
| Maandishi ya kawaida – min. 4.5:1 | ||
| Maandishi ya kawaida – min. 7:1 | ||
| Maandishi makubwa / bold – min. 3:1 | ||
| Maandishi makubwa / bold – min. 4.5:1 | ||
| Ikoni na vipengele vya UI – min. 3:1 | ||
| Inahitajika kisheria (maagizo ya EU) | ||
| Inapendekezwa kwa maudhui muhimu |
Kiwango AA (chini)
- Maandishi ya kawaida – min. 4.5:1
- Maandishi ya kawaida – min. 7:1
- Maandishi makubwa / bold – min. 3:1
- Maandishi makubwa / bold – min. 4.5:1
- Ikoni na vipengele vya UI – min. 3:1
- Inahitajika kisheria (maagizo ya EU)
- Inapendekezwa kwa maudhui muhimu
Kiwango AAA (juu)
- Maandishi ya kawaida – min. 4.5:1
- Maandishi ya kawaida – min. 7:1
- Maandishi makubwa / bold – min. 3:1
- Maandishi makubwa / bold – min. 4.5:1
- Ikoni na vipengele vya UI – min. 3:1
- Inahitajika kisheria (maagizo ya EU)
- Inapendekezwa kwa maudhui muhimu
Ni nini kinachofanya kikaguzi hiki cha utofautishaji kuwa maalum?
Tathmini ya kilengo kulingana na fomula ya hisabati
Uwiano wa utofautishaji unahesabiwa kwa kutumia fomula ya WCAG – matokeo hayategemei mipangilio ya skrini au mtazamo binafsi wa rangi.Kufuata kiwango cha kimataifa cha WCAG
Matokeo yanalingana na mahitaji ya WCAG 2.1, ambayo ni msingi wa kanuni za ufikivu wa kidijitali katika EU na nchi nyingine nyingi.Kulinganisha rangi kiotomatiki kwa kizingiti
Kipengele cha Match kinapata toleo la rangi ya maandishi linalokidhi kizingiti kilichochaguliwa cha utofautishaji – huhifadhi hue, hubadilisha mwanga tu.Miundo mitano ya rangi
Miundo inayoungwa mkono: HEX, RGB, RGBA, HSL, na HSLA. Msimbo wa rangi unaweza kubandikwa moja kwa moja kutoka Figma, Photoshop, au CSS.Aina tatu za maudhui katika jaribio moja
Ukaguzi mmoja unaonyesha matokeo kwa maandishi ya kawaida, maandishi makubwa (vichwa, vitufe), na ikoni – hakuna haja ya kupima kila aina tofauti.
Maswali yanayoulizwa mara kwa mara kuhusu kikaguzi cha utofautishaji wa rangi
Gundua zana nyingine bure
Kibadilishaji JPG/PNG hadi WebP
Punguza ukubwa wa faili za picha bila kupoteza ubora. Badilisha JPG na PNG kuwa WebP na kuharakisha tovuti yako.
Kihariri cha picha
Andaa upunguzi kamili wa picha kwa mitandao ya kijamii au tovuti yako. Chagua muundo uliokuwa tayari au weka vipimo maalum.
Kitengenezaji favicon
Tengeneza favicon.ico na ikoni za PNG kutoka picha moja, kulingana na mahitaji ya kivinjari na Lighthouse.
Kikaguzi cha meta kichwa na maelezo
Angalia idadi ya herufi na uone jinsi ukurasa wako unavyoonekana kwenye Google. Epuka vichwa na maelezo yaliyokatwa kwenye matokeo ya utafutaji.
Kihesabuji maneno na herufi
Angalia urefu wa maandishi na utathmini kama yanafaa kwa ukurasa wa nyumbani, huduma, chapisho la blogu au maelezo ya bidhaa.
Kitengenezaji saini barua pepe
Tengeneza saini ya barua pepe ya kitaalamu kwa dakika chache. Nakili msimbo wa HTML uliokuwa tayari kwenye Gmail au Outlook.
Kikaguzi cha utofautishaji rangi
Angalia kama rangi za maandishi na mandharinyuma zinasomeka. Zana huhesabu utofautishaji kulingana na WCAG na husaidia kuchagua rangi sahihi.
Kitoa rangi kutoka picha
Pakia picha au nembo na zana itatoa rangi kuu. Nakili misimbo ya rangi iliyotengenezwa kwa kubofya moja.
Kitengenezaji paleti za rangi
Chagua rangi moja na utengeneze paleti 9: rangi moja, nyongeza, tatu na zaidi.
Kitengenezaji msimbo QR bure
Tengeneza msimbo QR kwa tovuti, vCard, menyu au kipeperushi. Hamisha kama PNG na SVG, bila kuingia, bila kikomo.