Color Contrast

Teks yang berpasangan kurang kontras dengan latarnya adalah temuan aksesibilitas yang paling sering dilaporkan di web. Bagi pengguna dengan penglihatan rendah, teks abu terang di atas latar terang tidak sekadar kurang nyaman — teks itu tidak terbaca. Karena itu standar WCAG menetapkan rasio kontras minimum, angka yang terukur dan dapat diperiksa. Pada Chapter ini kita menetapkan ambang untuk tiap jenis konten, menghitung satu rasio dari rumusnya, lalu membiasakan pemeriksaan sebagai bagian dari kerja menata warna.

Ambang WCAG untuk Tiap Jenis Konten #

Rasio kontras dibandingkan sebagai L_terang : L_gelap, dengan rentang 1:1 (identik) hingga 21:1 (hitam di atas putih). Ambang minimumnya bergantung pada jenis konten:

Kategori “teks besar” penting dipahami dengan benar: judul font-size: 24px ke atas, atau teks bold mulai 18.7px, dianggap cukup besar sehingga matanya lebih lega membacanya. Ambang yang longgar ini bukan izin menurunkan kontras isi halaman — cukup terbatas pada judul, angka statistik, dan tombol besar. Batas input, ikon status, dan indikator fokus masuk kategori non-teks dengan ambang 3:1 (kriteria Non-text Contrast ).

Menghitung Satu Rasio #

Rasio diturunkan dari relative luminance — kecerahan yang ditimbang per kanal warna. Rumus lengkapnya kita bedah pada Chapter Color Contrast ; berikut ringkasannya untuk tombol putih di atas biru rgb(37 99 235):

Luminance putih  = 1.0
Luminance biru   = 0.2126·R' + 0.7152·G' + 0.0722·B' ≈ 0.153
Rasio = (1.0 + 0.05) / (0.153 + 0.05) ≈ 5.17:1  → lulus AA

Angka 0.05 adalah konstanta untuk mengantisipasi pantulan layar. Kita jarang perlu menghitung manual: DevTools menampilkan rasio langsung di samping swatch warna, dan banyak alat pemeriksa menandai pasangan yang gagal. Yang berharga dari rumus ini adalah arah perbaikannya — menaikkan rasio berarti menggelapkan teks atau mencerahkan latar (atau sebaliknya), dan setiap perubahan kanal berpengaruh sesuai bobotnya: kanal hijau paling berpengaruh, biru paling kecil.

Pasangan Warna dalam Praktik #

Demo chapter ini menampilkan empat panel dengan pasangan warna yang lazim kita temui:

Hasil di Browser:

Empat panel teks tampil berjajar. Nilai computed yang diperiksa harness:
panel-aman → color rgb(15, 23, 42) di atas rgb(248, 250, 252), rasio 17.1:1
(lulus AA dan AAA); tombol → rgb(255, 255, 255) di atas rgb(37, 99, 235),
rasio 5.2:1 (lulus AA); panel-besar → rgb(234, 88, 12) di atas putih dengan
font-size 26px, rasio 3.6:1 (lulus hanya ambang teks besar); panel-gagal →
rgb(148, 163, 184) di atas rgb(248, 250, 252), rasio 2.5:1 (gagal semua
ambang, ditampilkan sebagai contoh untuk dihindari).

Tabel keputusan keempat panel:

Kebiasaan yang paling menjaga kualitas: pemeriksaan dilakukan ketika memilih warna, bukan setelah halaman selesai. Simpan pasangan yang telah lolos sebagai custom properties tema — berkas contoh-pasangan-warna.css di atas adalah pola awalnya — sehingga komponen baru meminjam kombinasi yang telah teruji, dan pasangan mode gelap diperiksa dengan cara yang sama ketika tema gelap disusun.

/* Pasangan warna teks yang telah diperiksa rasio kontrasnya.
   Rasio dihitung dengan rumus WCAG (lihat chapter Color Contrast). */
:root {
  --teks-utama: rgb(15 23 42);        /* di atas --latar-halaman: 17,1:1 */
  --teks-redup: rgb(71 85 105);       /* di atas --latar-halaman: 7,2:1 */
  --latar-halaman: rgb(248 250 252);
  --tombol-latar: rgb(37 99 235);     /* putih di atasnya: 5,2:1 */
  --tombol-teks: rgb(255 255 255);
  /* Warna khusus teks besar (≥24px atau ≥18,7px bold): ambang 3:1 */
  --aksen-besar: rgb(234 88 12);      /* di atas putih: 3,6:1 */
}

.badan {
  background-color: var(--latar-halaman);
  color: var(--teks-utama);
}

.tombol {
  background-color: var(--tombol-latar);
  color: var(--tombol-teks);
}