CSS accent-color (Property)

TL;DR: CSS accent-color adalah properti CSS yang memungkinkan kontrol warna native pada form control seperti checkbox, radio button, range slider, dan progress bar hanya dengan satu deklarasi. Properti ini menghilangkan kebutuhan custom styling rumit dan secara otomatis menyesuaikan kontras teks untuk aksesibilitas.

Apa itu CSS accent-color?

CSS accent-color adalah properti CSS standar yang mengontrol warna aksen pada elemen form bawaan browser. Sebelum kehadiran properti ini, mengubah warna checkbox atau radio button memerlukan rewrite struktur HTML dan tambahan JavaScript. Konsep ini melengkapi CSS light-dark() untuk konsistensi tema gelap-terang.

Properti ini sudah didukung penuh di Chrome, Firefox, Safari sejak 2022. Cara pakai paling sederhana: accent-color: oklch(60% 0.15 250) atau hex/nama warna.

Cara Kerja

Empat elemen form yang merespons properti ini:

• <input type="checkbox">: warna centang
• <input type="radio">: warna dot ketika dipilih
• <input type="range">: warna track dan thumb
• <progress>: warna fill bar

Browser otomatis menghitung kontras teks dan border sekitarnya, jadi tidak perlu manual atur warna komplementer. Lihat dokumentasi resmi di MDN accent-color untuk detail behavior per browser.

Kenapa Penting?

Untuk marketer yang membangun landing page di Next.js, properti ini memangkas 30 sampai 60 baris CSS custom per form. Manfaat tambahan: konsisten dengan native accessibility (screen reader tetap mengenali form control), dan menghilangkan dependency library seperti Headless UI untuk styling form sederhana. Saat membangun form lead di proyek personal branding klien, mengganti custom checkbox dengan accent-color memangkas bundle JavaScript 8 sampai 12 KB.

Pertanyaan Umum

Apakah accent-color menggantikan custom styling sepenuhnya?

Tidak. Untuk desain rumit (custom shape, animasi), masih perlu ::before/::after. Tapi untuk warna saja, accent-color cukup.

Bagaimana fallback di browser lama?

Browser yang belum mendukung mengabaikan properti dan memakai warna default. Tidak ada breaking behavior.