§

Ingizo la rangi

§

Hakiki ya moja kwa moja

§

Kila muundo wa kawaida

§

Kikaguzi cha tofauti cha WCAG

Uwiano wa tofauti —
Maandishi ya kawaida —
Maandishi makubwa —
Mbwa mwenye nguvu anaruka juu ya paka mvivu.

Wasanifu wa bidhaa barani Afrika Mashariki wanaofanya kazi kwenye miradi ya Figma na mifumo ya muundo kwa mara nyingi wanahitaji kutafsiri kati ya muundo wa rangi tofauti wakizingatia mahitaji ya upatikanaji wa WCAG. Zana hii inakimbia mabadiliko yote kwenye kivinjari chako — rangi ya chapa yako haisafiri nje ya kifaa chako, jambo muhimu wakati wa kufanya kazi kwenye maboresho ya chapa ambayo bado hayajatolewa.

// Zana Zinazohusiana

./url-encoder
Kisimbaji cha URL
Simba mifuatano kwa asilimia kwa usafirishaji salama kwenye URL.
→
./base64-encoder
Msimbaji Base64
Simba maandishi na faili kwenye muundo wa Base64.
→
./gzip-compressor
Kikandamizaji GZIP
Kandamiza maandishi na faili kwa GZIP kwenye kivinjari chako.
→
./
Zana Zote
Vinjari mkusanyiko kamili wa zana za mtandaoni za Ultim8Soft.
→

Ubadilishaji wa rangi ni nini?

Kila rangi inayowakilishwa na kivinjari chako hatimaye ni tatu ya sRGB — nambari tatu kati ya 0 na 255 kwa njia nyekundu, kijani, na bluu, pamoja na alpha ya hiari. Maelezo ya Kiwango cha 4 cha Rangi ya CSS yanafafanua muundo kadhaa wa maandishi unaosafirisha kwenye tatu hiyo hiyo, pamoja na nafasi ya OKLCH inayounganika kwa mtazamo. Zana hii husoma yoyote ya muundo huo, hubadilisha kwenye muundo wote, na kuripoti uwiano wa tofauti wa WCAG 2.1 dhidi ya rangi ya pili ili uweze kutoa miingiliano inayopatikana kwa ujasiri.

Ubadilishaji wa rangi hufanyaje kazi?

Ubadilishaji ni mfululizo wa mabadiliko ya laini na yasiyo laini yaliyofafanuliwa vizuri. Kila hatua inafanya kazi kwenye kivinjari chako — hakuna ingizo linalofikia seva zetu:

  1. Ingizo lako linachambua. Zana hugunduliwa kiotomatiki HEX ya tarakimu 3, 4, 6, au 8, muundo wa kazi rgb()/rgba()/hsl()/hsla()/hsv()/hwb() katika muundo wa zamani wa comma au muundo wa kisasa wa slash-alpha, au yoyote ya rangi 150 za CSS zilizopewa jina (rebeccapurple imejumuishwa).
  2. Rangi iliyochambuliwa inafanywa kawaida kwa sRGB ya kanoni — floats nne {r, g, b, a} kila moja katika safu 0–1. Hii ndiyo chanzo kimoja cha ukweli ambacho kila muundo wa matokeo unatokana nacho.
  3. HEX inatoka kwa kupanga kila njia kwenye thamani yake ya baiti 0–255 na kuunganisha tarakimu za hex. RGB / RGBA huchapisha baiti sawa. HSL na HSV hutumia algorithms za kawaida za W3C za kuratibu silinda; HWB hutoa toni kutoka HSV, weupe kutoka min(r, g, b), na weusi kutoka 1 - max(r, g, b).
  4. CMYK ni makadirio ya nadharia — k = 1 - max(r, g, b), kisha c, m, y kutoka kwa njia zilizobaki. Inafaa kwa hakiki ya skrini lakini si kwa uchapishaji: matokeo ya kweli ya CMYK yanahitaji wasifu wa ICC ambao zana hii haijumuishi kwa makusudi.
  5. OKLCH hufuata njia ya mbele ya css-color-4: sRGB inaenezwa mstari, kuzidishwa kupitia matrix ya LMS, mzizi wa nguvu tatu, kuzidishwa kupitia matrix ya LMS-hadi-OKLab, na hatimaye kubadilishwa kutoka OKLab ya mstatili hadi OKLCH ya mviringo. OKLCH inaunganika kwa mtazamo, ambayo inafanya iwe nafasi sahihi ya kubuni rangi zinazoonekana kuwa na usawa kwa jicho la binadamu.

Kwa nini kutumia kibadilishi hiki cha rangi?

  • Faragha: kila ubadilishaji hufanya kazi kwenye kivinjari chako ukitumia JavaScript wazi. Rangi unayobandika haiwahi kutoka kwenye kifaa chako, jambo muhimu kwa kazi ya chapa isiyotolewa, mifumo ya ndani ya muundo, na mifano ya mteja chini ya NDA.
  • Uhamishaji wa msanifu kwenda msanidi: bandika HEX kutoka Figma na soma tena kamba ya rgb() kwa usanidi wa Tailwind, kamba ya hsl() kwa mali ya desturi ya CSS, au kamba ya oklch() kwa rangi ya kisasa — kila muundo mahali pamoja, bila kunakili kati ya vichupo.
  • Usahihi wa WCAG: kikaguzi cha tofauti hutumia fomula ya luminance ya jamaa ya WCAG 2.1 halisi na vipimo vilivyochapishwa vya AA (4.5 / 3.0) na AAA (7.0 / 4.5) kwa maandishi ya kawaida na makubwa. Uwiano ulioripotiwa unalingana na mahesabu ya mkono ndani ya 0.01.
  • Hali ya giza na utokaji wa rangi: HSL na OKLCH huonyesha mwangaza kama njia moja, kwa hivyo ni rahisi kuhamisha rangi ya chapa juu au chini ya mhimili wa mwangaza ili kupata tokeni zinazolingana za hali ya giza au kuzalisha ramp ya rangi ya hatua 10 kutoka mbegu moja.

Matumizi ya kawaida ya ubadilishaji wa rangi ni yapi?

Ubadilishaji wa rangi huonekana kwenye maendeleo ya wavuti, muundo, na kazi ya upatikanaji:

  • Mifumo ya muundo: kubadilisha HEX ya chapa kwenye tokeni zilizolingana za HSL na OKLCH kwa kipimo cha mali ya desturi ya CSS, kisha kuthibitisha kwamba kila mchanganyiko wa tokeni unapita WCAG AA dhidi ya mandharinyuma ya ukurasa.
  • Ukaguzi wa upatikanaji: kubandika jozi ya mbele na mandharinyuma kutoka skrini ya kweli ya bidhaa na kusoma uwiano wa tofauti pamoja na hukumu za AA/AAA kwa maandishi ya uzito wa kawaida na wa makubwa kwa mtazamo mmoja.
  • Safari za kupita zana nyingi: kuvuta rangi kutoka kichaguzi cha picha (HEX), kuibandika hapa, na kunakili kamba ya hsl() au oklch() moja kwa moja kwenye Tailwind, tokeni za Figma, au mandhari ya CSS-in-JS.

Mfano wa ubadilishaji wa rangi unaonekanaje?

Chukua rebeccapurple maarufu. Utafutaji wa rangi iliyopewa jina hutatua kwenye #663399. Ubadilishaji wa RGB hutoa rgb(102, 51, 153). Ubadilishaji wa HSL hutoa hsl(270, 50%, 40%) — toni ya violet, iliyojaa nusu, sehemu nne za kumi angavu. Kuangalia rangi hiyo dhidi ya nyeupe safi na zana ya tofauti kunapata uwiano karibu na 7.39, ambao unapita AAA (7.0) kwa maandishi ya kawaida na AAA (4.5) kwa maandishi makubwa — chaguo kali la mbele kinachoweza kupatikana. Kupita #663399 kupitia RGB → HSL → RGB → HEX hurudisha mfuatano wa awali hasa, baiti kwa baiti.

Tumia kibadilishi hiki kama marejeleo ya haraka kwa rangi yoyote unayokutana nayo — kwenye msimbo, kwenye faili za muundo, au kwenye picha — na kikaguzi cha tofauti kama ukaguzi wa afya kabla ya kutuma. Kila kitu kinafanya kazi ndani ya kompyuta, hakuna kinachorekodiwa, na hisabati ya ubadilishaji inafuata maelezo yaliyochapishwa ya W3C na WCAG kwa hivyo nambari zinalingana na zana yako ya ukaguzi au devtools ya kivinjari itakachoripoti.