Anza na chaguo la mtumiaji na mfumo wa tokeni
Tumia mpangilio wa mfumo kama chaguo la msingi kwa prefers-color-scheme. Ikiwa unatoa swichi, tumia udhibiti unaoweza kuendeshwa kwa kibodi, unaonayo jina linalofikiwa, na funua chaguo kilichochaguliwa kwa mpangilio wa kivinjari programmatically. Toa utekelezaji wa kuchagua kwa mkono utakaokuwa wa msingi katika muktadha huo wa kivinjari; usiahidi kwamba itafuata mtu hadi kifaa kingine au kikao cha faragha.
Panga majina ya rangi kwa jukumu, si kwa muonekano: canvas, surface, text, muted text, border, link, accent, error, success, focus, na disabled. Ramisha kila jukumu katika mitindo yote miwili. Hii inazuia kijivu kilicho kwa mwanga tu kuteleza ndani ya hali ya giza na hufanya marekebisho yawe ya matumizi kwa sehemu nyingi. Giza si moja kwa moja lenye ufikikaji bora au linalopendwa na wote; ni uzoefu mwingine unaostahili kutengenezwa kwa matumizi.
Tambua mpangilio, kwa mfano chaguo lililohifadhiwa kwanza na upendeleo wa mfumo pili, ili timu zipime matokeo yale yale.
Jumlisha hali za hover, focus, selected, invalid, disabled, loading, empty, na visited-link, sio tu chaguo za msingi.
Pima tofauti kwenye mtindo uliotumiwa
WCAG 2.2 Success Criterion 1.4.3 inaweka angalau 4.5:1 kwa maandishi ya kawaida na picha zilizo na maandishi, na 3:1 kwa maandishi makubwa. Usizungumze kwa mviringo: 4.499:1 haiwezi kutimiza 4.5:1. Aina nyembamba inaweza kuonekana dhaifu kuliko rangi yake iliyoombwa, kwa hivyo tumia family thabiti au nyembamba zaidi au ukate zaidi.
Kagua kila maandishi yaliyotamkwa na background jirani. Maandishi juu ya picha, gradiente, paneli zilizo wazi kwa kiasi, au video yana maboresho ya background, hivyo hesabu ya tokeni moja hawezi kuthibitisha kusomeka. Tumia backingi isiyo wazi, overlay inayofaa, au muundo tofauti, kisha tazama kwa viewport halisi.
Chini ya WCAG 2.1 Success Criterion 1.4.11, taarifa za kuona zinazohitajika kutambua udhibiti uliotumika, hali inayohitajika, au mchoro wenye maana zinahitaji 3:1 dhidi ya rangi jirani.
Panga mabadiliko ya rangi pamoja na maandishi, ikoni, muundo, nafasi, au ishara nyingine wazi; hali za kosa na zilizochaguliwa hazipaswi kutegemea tu rangi nyepesi.
Lindeni mtazamo wa kibodi, fomu, na mabadiliko ya hali
Pitia kwa Tab kwenye mitindo yote miwili. Mtazamo (focus) lazima uwe unaonekana kwa viungo, vitufe, sehemu za kuingiza, menyu, madialogu, vidhibiti maalum, na udhibiti wa mtindo. Usiondoe outline ya kivinjari isipokuwa mbadala yake imethibitishwa kwenye kila uso na kila hali. Outline iliyokatishwa (offset) mara nyingi ni wazi zaidi kuliko mng'ao unaochanganyika.
WCAG 2.2 Focus Appearance ni kanuni ya kiwango cha AAA, si ushahidi kwamba tovuti inatimiza kiwango cha AA. Ni lengo linalofaa: eneo la kiashiria la angalau ukubwa unaolingana na mviringo wa mpaka wa 2 CSS-pixel na utofauti wa 3:1 kati ya pikseli zilizo na focus na zisizo nazo. Pia thibitisha kwamba hali za kosa, zinazohitajika, zilizochaguliwa, na zisizopatikana zinaendelea kuwa na maana.
Pima kwa tofauti vidokezo vya kuingiza, thamani iliyowekwa, lebo, maandishi ya msaada, maandishi ya kosa, border isiyo sahihi, alama ya checkbox, uteuzi wa radio, na hali ya kuwasilisha tofauti.
Kwa checkout au mtiririko mwingine uliodhibitiwa, tumia sandbox ya mtoa huduma na pata ukaguzi uliothibitishwa wa ufikikaji na usalama inapofaa. Hii ni mwanga wa mafunzo, sio tathmini ya uzingatiaji au usalama.
Shughulikia picha, mali zilizoambatanishwa, na UI inayotolewa na kivinjari
Kagua nembo, michoro, skrini, chati, ikoni, na maandishi yaliyoingizwa ndani ya picha katika mitindo yote miwili. Nembo nyepesi inayorejelewa inaweza kupotea na hadithi ya chati inaweza kushindwa hata wakati HTML ya karibu inafaulu. Wasilisha mali inayofaa kwa kusudi au background thabiti. Picha zinazoelezea maelekezo, hali, au data lazima zibaki kueleweka.
Tangaza msaada kwa mipangilio ya light na dark, kisha andaa mtindo wa kurasa kwa mtindo ulioteuliwa. Mali ya color-scheme inaoanisha canvas ya kivinjari, scrollbars, vidhibiti vya fomu, na UI nyingine za kivinjari. Weka metadata inayolingana mapema kwenye hati. SVG zilizowekwa ndani zinaweza kujibu mpangilio wa mzazi; pima iframe na widget za wahusika wengine (third-party) mpaka mwisho.
Pendelea vidhibiti vya HTML vya kisemantiki. Tabia ya forced-color inatumia semantiki asilia, si ARIA iliyoongezwa kwa kipengele cha jumla.
Chunguza hali za kupakuliwa, zilizohifadhiwa (cached), zinazoanzisha polepole, na picha zilizoshindwa kupakia, haswa pale maandishi au ishara za kitendo zikiwa juu ya media.
Heshimu forced colors na pima uzinduzi kama mfumo
Forced-colors mode inatumia paleti ndogo iliyochaguliwa na mtumiaji, kama Windows High Contrast. Vivinjari vinaweza kubadilisha rangi, kuondoa vivuli, na kuongeza backplates kwa maandishi. Usizuie override hiyo. Fanya marekebisho maalum pale ambapo sehemu hupoteza mpaka au maana, kama mpaka wa kweli pale kivuli kilichobeba affordance. Emulation haiwezi kuwakilisha kila kifaa, kivinjari, nyongeza, kiwango cha zoom, au mchanganyiko wa teknolojia ya msaada.
Fanya matrix ya njia na mwingiliano katika mipangilio ya light, dark, na forced-colors kabla ya uzinduzi. Chrome DevTools inaweza kuiga hali hizi zote mbili; itumie kuharakisha ukaguzi, kisha piga navigesheni kwa mikono katika mtiririko wa kipaumbele. Skana za kiotomatiki hupata wagombea lakini hawawezi kubaini ufikikaji peke yao. SIU inafanya preflight ya mali na mwingiliano muhimu ya mtindo, inarekodi lango la uzinduzi, na inahifadhi njia ya kurejesha iliyopimwa kwa kushuka kwa uwasilishaji; sio ufuatiliaji wa muda wa upatikanaji (downtime monitoring).
Jumuisha kurasa za kutua, urambazaji, utafutaji, upatikanaji wa akaunti, fomu, ukurasa wa makosa, skrini za kuthibitisha, na mitiririko ya ubadilishaji wa nyenzo.
Hifadhi URL zilizoangaliwa, toleo la kivinjari, mipangilio, mazuri, mmiliki, na kichocheo cha kurejesha ili urejeshaji uanze kutoka kwa ukweli.