Mulai dengan pilihan pengguna dan sistem token
Gunakan pengaturan sistem sebagai default dengan prefers-color-scheme. Jika Anda menawarkan sakelar, gunakan kontrol yang dapat dioperasikan melalui keyboard dengan nama yang dapat diakses dan ekspos pilihan aktif secara programatik. Beri prioritas pilihan manual dalam konteks browser itu; jangan janjikan pilihan itu mengikuti seseorang ke perangkat lain atau sesi privat.
Beri nama warna berdasarkan peran, bukan penampilan: canvas, surface, text, muted text, border, link, accent, error, success, focus, dan disabled. Pemetakan harus tersedia untuk setiap peran di kedua tema. Ini mencegah abu-abu khusus terang bocor ke mode gelap dan membuat perbaikan dapat digunakan ulang. Mode gelap bukan secara inheren lebih aksesibel atau disukai semua orang; ini pengalaman lain yang harus dibuat dapat digunakan.
Dokumentasikan urutan, misalnya pilihan tersimpan terlebih dahulu dan preferensi sistem kedua, sehingga tim menguji hasil yang sama.
Sertakan hover, focus, selected, invalid, disabled, loading, empty, dan visited-link states, bukan hanya default.
Ukur kontras pada tema yang dirender
WCAG 2.2 Success Criterion 1.4.3 menetapkan minimum 4.5:1 untuk teks normal dan gambar berupa teks, serta 3:1 untuk teks besar. Jangan membulatkan: 4.499:1 tidak memenuhi 4.5:1. Jenis huruf tipis bisa tampak lebih lemah daripada warna yang dihitungnya, jadi gunakan font yang lebih tebal atau margin tambahan.
Periksa setiap foreground yang dirender dan background yang berdekatan. Teks di atas foto, gradien, panel translusen, atau video memiliki latar yang berubah-ubah, sehingga satu perhitungan token tidak dapat membuktikan keterbacaan. Gunakan backing yang opak, overlay yang memadai, atau penempatan berbeda, lalu inspeksi pada viewport yang realistis.
Di bawah WCAG 2.1 Success Criterion 1.4.11, informasi visual yang diperlukan untuk mengidentifikasi kontrol aktif, status yang diwajibkan, atau grafik bermakna membutuhkan 3:1 terhadap warna yang berdekatan.
Padankan perubahan warna dengan teks, ikon, pola, posisi, atau petunjuk jelas lain; status error dan terpilih tidak boleh bergantung pada rona yang halus.
Lindungi fokus keyboard, formulir, dan perubahan status
Navigasikan dengan Tab di kedua tema. Fokus harus terlihat pada tautan, tombol, input, menu, dialog, widget kustom, dan kontrol tema. Jangan menghapus outline browser kecuali penggantinya diuji pada setiap permukaan dan status. Outline bergeser seringkali lebih jelas daripada glow yang bercampur.
WCAG 2.2 Focus Appearance adalah kriteria AAA, bukan bukti bahwa situs memenuhi AA. Ini adalah target berguna: area indikator setidaknya sebesar perimeter 2 CSS-pixel dan kontras 3:1 antara piksel yang difokuskan dan tidak difokuskan. Juga verifikasi bahwa status error, wajib, terpilih, dan tidak tersedia mempertahankan makna.
Uji hint input, nilai yang dimasukkan, label, teks bantuan, teks error, border invalid, tanda centang checkbox, seleksi radio, dan status submit secara terpisah.
Untuk checkout atau alur teregulasi lain, gunakan sandbox penyedia dan dapatkan tinjauan aksesibilitas dan keamanan yang memenuhi syarat bila perlu. Ini panduan edukatif, bukan penilaian kepatuhan atau keamanan.
Tangani gambar, aset tertanam, dan UI yang disediakan browser
Tinjau logo, ilustrasi, screenshot, grafik, ikon, dan teks yang tersemat dalam gambar di kedua tema. Logo terang yang digunakan ulang bisa hilang dan legend grafik bisa gagal meskipun HTML di sekitarnya lulus. Sediakan aset yang sesuai tujuan atau latar yang stabil. Gambar yang menyampaikan instruksi, status, atau data harus tetap dapat dipahami.
Deklarasikan dukungan untuk skema light dan dark, lalu gaya konten halaman untuk tema yang dipilih. Properti color-scheme menyelaraskan canvas browser, scrollbar, kontrol formulir, dan UI browser lain. Tempatkan metadata terkait lebih awal dalam dokumen. SVG tersemat dapat merespons skema orang tua; uji iframe dan widget pihak ketiga secara end-to-end.
Utamakan kontrol HTML semantik. Perilaku forced-color menggunakan semantik native, bukan peran ARIA yang ditambahkan ke elemen generik.
Periksa kondisi diunduh, di-cache, memuat lambat, dan gambar gagal, terutama di tempat teks atau petunjuk aksi berada di atas media.
Hormati forced-colors dan uji rilis sebagai sistem
Forced-colors mode menerapkan palet terbatas pilihan pengguna, seperti Windows High Contrast. Browser dapat mengganti warna, menghapus bayangan, dan menambahkan backplate teks. Jangan blok override. Lakukan perbaikan terarah di mana sebuah komponen kehilangan batas atau makna, seperti menambahkan border nyata ketika bayangan membawa affordance. Emulasi tidak dapat mewakili setiap perangkat, browser, ekstensi, level zoom, atau kombinasi teknologi bantu.
Jalankan matriks rute dan interaksi dalam pengaturan light, dark, dan forced-colors sebelum rilis. Chrome DevTools dapat meniru kedua kondisi; gunakan itu untuk mempercepat tinjauan, lalu navigasikan alur prioritas secara manual. Pemindai menemukan kandidat tetapi tidak dapat menentukan aksesibilitas sendirian. SIU preflights aset dan interaksi tema kritis, mencatat gate rilis, dan menyimpan jalur rollback yang diuji untuk regresi presentasi serius; ini bukan pemantauan waktu-henti.
Sertakan landing, navigasi, pencarian, akses akun, formulir, halaman error, layar otentikasi, dan alur konversi materi.
Simpan URL yang diuji, versi browser, pengaturan, pengecualian, pemilik, dan trigger rollback sehingga remediasi dimulai dari fakta.