CSS Color Contrast Prefers Color Scheme Dark Mode Accessibility

Definisi

Aksesibilitas warna berpusat pada contrast ratio (minimal 4.5:1 untuk teks, 3:1 besar) dan dukungan dark mode via @media (prefers-color-scheme: dark). Tanpa kontras cukup, teks sulit dibaca penyandang low-vision.

Kapan dipakai

Pakai saat mendesain tema: tentukan palette yang lolos WCAG, dan sediakan dark mode agar nyaman di lingkungan redup. Jangan gunakan warna sebagai satu-satunya penanda (misal error hanya merah).

Cara kerja

Contrast & tokens

css

:root {
  --text: #1a1a1a;
  --bg: #ffffff; /* kontras ~16:1 */
}

Dark mode

css

@media (prefers-color-scheme: dark) {
  :root { --text: #eee; --bg: #121212; }
}

Jangan hanya warna

css

.error { color: #d00; font-weight: 700; } /* tebal + warna, bukan cuma warna */

Struktur alur

Catatan implementasi

• Gunakan CSS custom properties agar tema mudah di-switch.
• prefers-color-scheme hanya petunjuk OS; izinkan override manual (toggle) bila perlu.
• Cek contrast dengan tools (axe, contrast checker) — jangan tebak.
• Jangan sembunyikan elemen penting lewat display:none di dark mode tanpa alasan.

Kesalahan umum

• Kontras abu-abu muda di putih: gagal WCAG.
• Hanya warna untuk state: pengguna buta warna kehilangan info.
• Hardcode warna di banyak tempat: sulit ganti tema; pakai token.
• Dark mode lupa image: logo/gambar jadi terlalu terang/terang.

Referensi terkait

• CSS Specificity dan Cascade
• CSS Responsive Layout: Media Queries, Container Queries
• HTML Form Accessibility Lanjut