Mengapa WCAG memerlukan kontras 4.5:1?
Ini adalah standar AA agar pengguna dengan penglihatan rendah dapat membaca teks tanpa alat bantu. Standar AAA yang lebih ketat mewajibkan 7:1.
Pemilih Warna
Pilih warna dan konversi antara HEX, RGB, HSL
Rasio Kontras
⬜ ⬛
Warna Komplementer & Warna Analog
Pemilih Warna
Haruskah menggunakan HEX atau RGB?
HEX lebih ringkas dan umum di CSS. Gunakan rgba() saat membutuhkan transparansi, misalnya rgba(0,0,0,0.5) untuk hitam 50% transparan.
Bagaimana menerapkan warna dark mode?
Gunakan CSS custom properties dengan @media (prefers-color-scheme: dark). Definisikan variabel warna untuk mode terang secara default, lalu timpa di media query gelap.
Kode Warna: HEX, RGB, dan HSL
HEX, RGB, dan HSL adalah tiga cara merepresentasikan warna di komputer. HEX (contoh: #FF5733) paling umum di web, RGB (contoh: rgb(255,87,51)) menggunakan nilai merah-hijau-biru, HSL (contoh: hsl(11,100%,60%)) menggunakan hue-saturasi-kecerahan. Ketiganya mendeskripsikan warna yang sama dengan cara berbeda.
Apa itu rasio kontras WCAG?
Standar WCAG AA mensyaratkan rasio kontras minimal 4.5:1 antara teks dan latar belakang. Ini adalah batas minimum agar pengguna dengan gangguan penglihatan sedang dapat membaca tanpa alat bantu. Standar AAA yang lebih ketat mewajibkan 7:1.
HSL: Model Warna yang Intuitif
HSL menggunakan Hue (warna: 0-360°), Saturation (saturasi: 0-100%), dan Lightness (kecerahan: 0-100%) untuk mendeskripsikan warna lebih intuitif dari RGB. Untuk membuat varian lebih terang dari warna brand, cukup naikkan nilai L tanpa perlu menghitung RGB yang rumit. HSL banyak digunakan dalam design system karena mudah disesuaikan.
Penerapan Warna Komplementer dan Analog
Warna komplementer berseberangan 180° di roda warna (seperti biru dan oranye, merah dan hijau), menciptakan kontras tinggi dan ketegangan visual. Warna analog berdekatan (seperti biru, biru-ungu, ungu), menciptakan palet yang harmonis. Sistem warna UI yang baik biasanya terdiri dari warna primer, aksen (komplementer), netral, dan warna semantik (sukses/peringatan/kesalahan).
Mengelola Warna dengan CSS Custom Properties
CSS Custom Properties (variabel CSS) memungkinkan manajemen warna terpusat: deklarasikan --color-primary: #2563EB; lalu gunakan background-color: var(--color-primary); di seluruh situs. Saat ingin mengubah warna brand, cukup ganti di satu tempat. Kombinasikan dengan @media (prefers-color-scheme: dark) untuk beralih ke dark mode dengan mudah.
Pertanyaan yang Sering Diajukan
Haruskah menggunakan HEX atau RGB?
HEX lebih ringkas dan umum di CSS. Gunakan rgba() saat membutuhkan transparansi, misalnya rgba(0,0,0,0.5) untuk hitam 50% transparan.
Mengapa WCAG memerlukan kontras 4.5:1?
Ini adalah standar AA agar pengguna dengan penglihatan rendah dapat membaca teks tanpa alat bantu. Standar AAA yang lebih ketat mewajibkan 7:1.
Bagaimana menerapkan warna dark mode?
Gunakan CSS custom properties dengan @media (prefers-color-scheme: dark). Definisikan variabel warna untuk mode terang secara default, lalu timpa di media query gelap.