Pas Warna Accent Cakep di Dark Mode Tapi Pudar di Light

Blog udah terasa utuh di dark mode. Badge, nav aktif, focus ring search, semua nyala. Terus saya buka light mode buat cek, dan langsung kerasa aneh: badge sama nav aktif keliatan pudar, kayak layar HP dibaca di terik matahari. Awalnya dugaan saya: monitor atau mata lagi lelah. Ternyata masalahnya di math, bukan mata.

Saya pilih warna accent oranye #FF570A (mirip Hacker News) demi nuansa agregator link. Waktu itu blog baru dark mode doang, dan oranye di latar gelap memang enak. Pas saya tambahin light mode, oranye itu di background putih susah dibaca, makanya light mode keliatan pucat. Commit a16f470 repo my-apps ganti seluruh accent ke mint CodeRabbit #25E2A8, tapi dengan satu detail yang gak boleh kelewat.

Hitung-hitungan kontras

Saya hitung rasio kontras pakai rumus relative luminance WCAG. Mint #25E2A8 di background putih cuma 1.68:1, praktis nggak kebaca. Di emerald-600 #059669 dia naik ke 3.77:1, dan di dark mode dengan background #0d1117 mint tembus 11.29:1. Oranye lama #FF570A di dark #0d1117 nilainya 6.24:1, tapi di putih cuma 3.17:1.

Sesuai W3C WCAG 2.2 Contrast Minimum, teks normal butuh minimal 4.5:1 (Success Criterion 1.4.3), sedangkan teks besar dan elemen non-teks cukup 3:1. Jadi emerald-600 di 3.77:1 sah buat badge dan heading kecil yang tebal (large text / UI component), tapi nggak buat body text 4.5:1. Mint murni cuma selamat di dark mode.

Satu const, dua mode

Kuncinya: jangan kasih satu warna buat semua mode. ACCENT dan ACCENT_BG saya jadiin satu tempat di komponen, terus pakai variant dark: dari Tailwind dark mode biar beda per mode. Hex custom kayak #25E2A8 pakai arbitrary value text-[#25E2A8].

// Sebelum: satu accent buat semua mode, gagal di light
const ACCENT = "text-[#FF570A]";
const ACCENT_BG = "bg-[#FF570A]/10";

// Sesudah: emerald-600 di light, mint asli di dark
const ACCENT = "text-emerald-600 dark:text-[#25E2A8]";
const ACCENT_BG = "bg-[#25E2A8]/10";

Nav aktif, badge, sampai focus ring search ikut ganti karena semuanya nyerap dua const itu. Saya gak perlu sentuh tiap elemen satu-satu. Light mode sekarang baca badge-nya tanpa squint, dark mode tetap dapet nuansa mint yang saya mau.

Warna brand itu bukan cuma selera. Accent yang cakep di satu background belum tentu selamat di background lain. Saya sekarang ngecek dua mode tiap kali ganti palet, bukan cuma screenshot dark. Pilih accent sekali, uji dua mode, baru rilis.