Aturan Kontras Warna yang Wajib Diketahui Desainer

Warna adalah salah satu hal pertama yang diperhatikan orang dalam sebuah desain, sekaligus salah satu yang paling mudah keliru. Palet bisa terlihat indah di monitormu, tetapi tetap sulit dibaca di layar ponsel di bawah terik matahari atau oleh orang dengan penglihatan rendah. Kabar baiknya, warna yang mudah dibaca bukan sekadar soal selera. Ada beberapa angka jelas yang bisa dijadikan pegangan.

Apa yang sebenarnya diukur oleh rasio kontras

Rasio kontras membandingkan luminans relatif, atau tingkat terang yang dirasakan mata, dari dua warna, biasanya teks dan latar belakangnya. Nilainya berkisar dari 1:1 (dua warna identik) hingga 21:1 (hitam pekat di atas putih bersih). Semakin tinggi rasionya, semakin mudah teks dibaca.

Angka WCAG yang perlu kamu hafal

Web Content Accessibility Guidelines (WCAG) yang diterbitkan W3C adalah standar yang paling banyak dipakai. Berikut target untuk level AA, level yang umumnya dikejar oleh banyak organisasi.

Teks isi: 4,5:1

Teks ukuran normal membutuhkan rasio kontras minimal 4,5:1 terhadap latar belakangnya, sesuai Kriteria Keberhasilan WCAG 1.4.3.

Teks besar: 3:1

Teks berukuran minimal 18 poin (sekitar 24 px), atau 14 poin tebal (sekitar 18,5 px), boleh turun hingga 3:1, karena bentuk huruf yang lebih besar lebih mudah dikenali.

Ikon dan komponen UI: 3:1

Garis tepi tombol, kolom input, indikator fokus, dan ikon yang bermakna memerlukan kontras minimal 3:1 terhadap warna di sekitarnya, menurut Kriteria Keberhasilan 1.4.11 tentang kontras non-teks.

Pada level AAA yang lebih ketat, targetnya naik menjadi 7:1 untuk teks isi dan 4,5:1 untuk teks besar.

Jangan hanya mengandalkan warna

Gangguan penglihatan warna dialami sekitar 1 dari 12 pria dan 1 dari 200 wanita, menurut Colour Blind Awareness. Status error berwarna merah yang hanya berbeda rona dari status normal bisa jadi tidak terlihat oleh banyak dari mereka. Kriteria Keberhasilan WCAG 1.4.1 meminta agar warna tidak pernah menjadi satu-satunya cara menyampaikan informasi. Tambahkan ikon, label teks, garis bawah, atau pola.

Aturan 60-30-10 untuk palet yang seimbang

Dipinjam dari dunia desain interior, aturan 60-30-10 adalah titik awal sederhana untuk membagi porsi warna:

• 60% warna dominan, biasanya warna netral yang tenang untuk latar belakang.

• 30% warna sekunder untuk bagian halaman, kartu, dan navigasi.

• 10% warna aksen untuk tombol ajakan bertindak dan sorotan.

Ini panduan, bukan hukum, tetapi aturan ini mencegah kesalahan umum berupa memberi bobot yang sama pada semua warna. Gunakan warna aksen secukupnya agar benar-benar menarik perhatian, dan tetap periksa kontrasnya terhadap latar seperti warna teks lainnya.

Tes cepat yang bisa kamu lakukan hari ini

• Periksa setiap pasangan teks dan latar dengan WebAIM Contrast Checker.

• Gunakan alat pengecek kontras di DevTools browser. Panduan kontras warna dari MDN menjelaskan cara rasio tersebut dihitung.

• Ubah desainmu ke mode grayscale. Jika hierarki visualnya hilang, berarti kamu terlalu bergantung pada rona, bukan pada tingkat terang.

• Lihat tampilanmu di ponsel saat berada di luar ruangan atau dengan kecerahan layar rendah.

Kontras yang baik tidak terasa saat berhasil. Orang cukup membaca, mengklik, lalu melanjutkan.

Jelajahi lebih lanjut

Kontras hanyalah satu bagian dari keterampilan visual yang lebih luas. Jika kamu menyukai sisi teknis dari visual, baca cara kami membuat tanah liat dari shader, atau pahami mengapa kecepatan juga penting bagi desain lewat panduan sederhana tentang Core Web Vitals. Temukan eksperimen lainnya di beranda Ryuartistry.