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