Kontras Warna

Seluruh teknik di section ini — format warna, latar, gradien, border, opacity — bermuara pada satu ujian terakhir: apakah teksnya terbaca. Kontras antara warna teks dan latarnya bukan soal selera, melainkan angka yang terukur dan memiliki ambang resmi. Chapter ini membahas cara membaca rasio kontras, ambang WCAG yang perlu kita penuhi, alat pemeriksaannya, dan resep praktis agar palet yang kita pilih tetap nyaman dibaca oleh sebanyak mungkin orang.

Rasio Kontras dan Ambang WCAG #

Rasio kontras membandingkan luminans (tingkat terang) dua warna. Rentangnya dari 1:1 — dua warna identik — hingga 21:1 untuk hitam di atas putih. Web Content Accessibility Guidelines (WCAG) menetapkan ambang minimum pada level AA:

Teks besar mendapat ambang lebih longgar karena bentuk hurufnya sudah mudah dikenali. Ambang 3:1 untuk komponen antarmuka juga menjadi pegangan ring :focus-visible yang kita buat pada chapter Outline: garis fokus harus cukup kontras terhadap latarnya.

Mengapa Ambang Ini Penting #

Pengguna dengan penglihatan rendah, mata yang lelah, layar kusam, atau ponsel yang dipakai di bawah sinar matahari semuanya bergantung pada kontras yang cukup untuk membaca layar dengan nyaman. Teks yang lolos di ruangan teduh bisa gagal total di luar ruangan. Memenuhi ambang WCAG sekaligus meningkatkan keterbacaan bagi semua pengguna, bukan hanya yang berkebutuhan khusus.

Memeriksa Kontras #

Tiga cara yang paling praktis:

• DevTools. Pemilih warna pada DevTools Chrome menampilkan rasio kontras langsung di bawah palet, lengkap dengan tanda lolos AA atau AAA.
• Pemeriksa daring. Situs pemeriksa kontras menerima dua warna dan mengembalikan rasionya — cocok untuk menguji pasangan warna sebelum menulis kode.
• Ekstensi browser. Alat audit aksesibilitas dapat memindai seluruh halaman dan melaporkan semua teks yang gagal.

Kebiasaan yang sehat: periksa kontras setiap kali pasangan warna teks–latar baru dibuat, bukan setelah halaman selesai.

Resep Praktis #

Angka-angka berikut sudah dihitung — pakai sebagai patokan cepat:

• Latar terang, teks abu. #9ca3af pada #f9fafb hanya mencapai sekitar 2.4:1 — gagal bahkan untuk teks besar. Geser ke #374151 (sekitar 9.9:1) dan teks isi pun lolos dengan lega.
• Latar gelap, teks abu. Hindari abu menengah seperti #4b5563 di atas #111827 (sekitar 2.3:1). Untuk teks sekunder di latar gelap, #9ca3af (sekitar 7:1) adalah pilihan yang aman.
• Latar pastel butuh teks pekat. Pasangan #14503a pada #e7f4ec mencapai sekitar 8.3:1 — latar lembut tetap boleh dipakai asalkan teksnya gelap.
• Teks terang di atas latar terang. Kombinasi seperti teks putih di atas kuning muda nyaris selalu jauh di bawah ambang; bila butuh badge berlatar terang, gunakan teks gelap dari keluarga warna yang sama.

Pola yang berulang dari resep di atas: teks sekunder adalah titik yang paling sering gagal. Abu terang memang terlihat elegan di mock-up, tetapi jarang lolos 4.5:1.

Resep-resep itu berdampingan pada empat kartu berikut:

Geser satu tingkat lebih gelap — atau lebih terang pada latar gelap — biasanya sudah cukup untuk lolos.

Turunan Warna dengan color-mix() #

Saat palet membutuhkan gradasi turunan — teks utama, teks sekunder, teks nonaktif — fungsi color-mix() (didukung seluruh browser modern) memperolehnya dari satu warna dasar tanpa memilih nilai hex satu per satu:

:root {
  --teks-utama: #374151;
}

.teks-sekunder {
  color: color-mix(in oklab, var(--teks-utama), white 30%);
}

Deklarasi di atas mengambil 70% warna dasar dan 30% putih dalam ruang warna oklab, menghasilkan abu yang lebih terang namun masih mewarisi karakter warna dasarnya. Karena porsi dasar dominan, hasilnya umumnya masih lolos ambang — tetapi kebiasaan memeriksa dengan alat tetap wajib, sebab hasil campuran bisa mengejutkan.

/* Palet teks pada latar #f9fafb — rasio diperiksa dengan alat */
.teks-utama {
  color: #374151; /* sekitar 9.9:1 — teks isi */
}

.teks-pendukung {
  color: #475569; /* sekitar 7.2:1 — masih lega di atas ambang */
}

.teks-dekoratif {
  color: #9ca3af; /* sekitar 2.4:1 — hanya untuk garis atau dekorasi */
}

Ketiga tingkat itu pada latar yang sama:

Satu atau dua tingkat di bawah warna dasar biasanya masih aman, sedangkan tingkat paling terang sebaiknya disisakan untuk elemen non-teks.

Kesalahan Umum #

Ringkasan #

Kontras warna adalah ujian penutup untuk semua keputusan warna di section ini: teks normal menuntut rasio 4.5:1, teks besar dan komponen antarmuka 3:1, dan angka ini diperiksa dengan alat — bukan dengan mata. Resep amannya sederhana: abu terang disisakan untuk latar dan dekorasi, latar pastel berpasangan dengan teks pekat, dan color-mix() membantu menurunkan palet dari satu warna dasar yang sudah lolos. Dengan warna yang terbaca, fondasi visual course ini selesai — section berikutnya, Typography, mengambil alih bagaimana huruf itu sendiri disusun: ukuran, tinggi baris, dan pemilihan font.