Magsimula sa pagpipilian ng gumagamit at sistema ng token
Gamitin ang setting ng sistema bilang default gamit ang prefers-color-scheme. Kung magbibigay ng switch, gumamit ng keyboard-operable na kontrol na may naa-access na pangalan at i-expose ang aktibong pagpili programmatically. Bigyan ng prayoridad ang manwal na seleksyon sa loob ng browser context na iyon; huwag ipangako na susundan nito ang isang tao sa ibang device o private session.
Pangalanan ang mga kulay ayon sa papel (role), hindi sa hitsura: canvas, surface, text, muted text, border, link, accent, error, success, focus, at disabled. I-map ang bawat papel sa parehong tema. Pinipigilan nito na ang kulay-abong para lamang sa light na kumalat sa dark mode at ginagawa itong muling magagamit ang mga pag-aayos. Hindi likas na mas accessible o tanyag ang dark; isa lamang itong karanasan na dapat gawing magagamit.
Itala ang isang pagkakasunod-sunod, tulad ng na-save na pagpili muna at kagustuhan ng sistema bilang pangalawa, upang subukan ng mga team ang parehong resulta.
Isama ang hover, focus, selected, invalid, disabled, loading, empty, at visited-link na mga estado, hindi lang ang mga default.
Sukatin ang kontrasta sa na-render na tema
Ang WCAG 2.2 Success Criterion 1.4.3 ay nagtatakda ng minimum na 4.5:1 para sa normal na teksto at mga imahe ng teksto, at 3:1 para sa malalaking teksto. Huwag mag-round: ang 4.499:1 ay hindi pumapasa sa 4.5:1. Ang manipis na typeface ay maaaring magmukhang mas mahina kaysa sa kinukuwenta nitong kulay, kaya gumamit ng mas matibay na font o dagdagan ang margin.
Suriin ang bawat na-render na foreground at katabing background. Ang teksto sa ibabaw ng mga litrato, gradient, translucent na panel, o video ay may nagbabagong background, kaya hindi sapat ang isang token na kalkulasyon upang patunayan na nababasa ito. Gumamit ng opaque na backing, sapat na overlay, o ibang paglalagay, at pagkatapos ay inspeksyunin sa makatotohanang mga viewport.
Ayon sa WCAG 2.1 Success Criterion 1.4.11, ang visual na impormasyon na kailangan para tukuyin ang aktibong kontrol, kinakailangang estado, o makabuluhang grapiko ay nangangailangan ng 3:1 laban sa katabing mga kulay.
Isabay ang pagbabago ng kulay sa teksto, icon, pattern, posisyon, o ibang malinaw na pahiwatig; ang mga estado ng error at selected ay hindi dapat umasa sa banayad na tint.
Pangalagaan ang keyboard focus, mga form, at mga pagbabagong estado
Mag-tab sa buong parehong tema. Dapat nakikita ang focus sa mga link, button, input, menu, dialog, custom widget, at ang control ng tema. Huwag alisin ang browser outline maliban kung nasubukan ang kapalit nito sa bawat surface at estado. Mas malinaw ang offset outline kaysa sa isang glow na humahalo.
Ang WCAG 2.2 Focus Appearance ay isang AAA criterion, hindi patunay na ang isang site ay nakakatugon sa AA. Ito ay isang kapaki-pakinabang na target: isang indicator area na hindi bababa sa kasing laki ng 2 CSS-pixel na perimeter at 3:1 na kontrasta sa pagitan ng focused at unfocused na pixels. Beripikahin din na ang mga estado ng error, required, selected, at unavailable ay nananatiling may kahulugan.
Subukan nang hiwalay ang input hint, ipinasok na value, label, help text, error text, invalid border, marka ng checkbox, pagpili sa radio, at submit state.
Para sa checkout o ibang regulated na flow, gumamit ng sandbox ng provider at kumuha ng kwalipikadong accessibility at security review kung kinakailangan. Ito ay pang-edukasyong gabay, hindi isang pagsuri ng pagsunod o seguridad.
Pangasiwaan ang mga imahe, naka-embed na asset, at UI na ibinibigay ng browser
Suriin ang mga logo, ilustrasyon, screenshot, chart, icon, at text na naka-bake sa mga imahe sa parehong tema. Maaaring maglaho ang isang muling gamit na light na logo at maaaring mag-fail ang legend ng chart kahit na pumasa ang nakapaligid na HTML. Magbigay ng angkop na asset para sa layunin o manatiling stable ang background. Ang mga imahe na naglalahad ng mga instruksyon, status, o data ay dapat manatiling naiintindihan.
I-deklara ang suporta para sa light at dark na mga scheme, pagkatapos i-style ang nilalaman ng pahina para sa napiling tema. Ina-align ng color-scheme property ang browser canvas, scrollbars, form controls, at iba pang browser UI. Ilagay ang katugmang metadata nang maagang bahagi ng dokumento. Ang naka-embed na SVG ay maaaring tumugon sa parent scheme; subukan nang end-to-end ang mga third-party na iframe at widget.
Mas piliin ang semantic HTML controls. Ang forced-color behavior ay gumagamit ng native semantics, hindi ng ARIA role na idinadagdag sa isang generic na elemento.
Suriin ang downloaded, cached, slow-loading, at failed-image na mga estado, lalo na kung saan nakalagay ang teksto o action cues sa ibabaw ng media.
Igalang ang forced colors at subukan ang release bilang isang sistema
Ang forced-colors mode ay naglalapat ng limitadong palette na pinili ng gumagamit, tulad ng Windows High Contrast. Maaaring palitan ng mga browser ang mga kulay, alisin ang mga shadow, at magdagdag ng text backplates. Huwag pigilan ang override. Gumawa ng pinagtuon na mga pag-aayos kapag ang isang component ay nawalan ng hangganan o kahulugan, tulad ng paggamit ng tunay na border kung saan nagbigay ng affordance ang shadow. Hindi kayang i-representa ng emulation ang bawat device, browser, extension, antas ng zoom, o kombinasyon ng assistive technology.
Patakbuhin ang route at interaction matrix sa light, dark, at forced-colors na mga setting bago ilabas. Kayang i-emulate ng Chrome DevTools ang parehong kondisyon; gamitin ito upang pabilisin ang review, pagkatapos manu-manong i-navigate ang mga priority na flow. Nakakakita ang mga scanner ng mga kandidato ngunit hindi nila matutukoy ang accessibility nang mag-isa. Ang SIU ay nag-preflight ng mga kritikal na theme asset at interaksyon, nagre-record ng release gate, at may iningatang sinubok na rollback path para sa malulubhang presentation regression; hindi ito downtime monitoring.
Isama ang landing page, navigasyon, paghahanap, pag-access ng account, mga form, mga pahina ng error, mga authenticated na screen, at mga flow ng material conversion.
I-save ang mga na-test na URL, bersyon ng browser, mga setting, mga exception, may-ari, at rollback trigger upang magsimula ang remediation mula sa mga totoong datos.