Palet warna yang menarik belum berarti apa-apa bila teksnya sulit dibaca — terutama bagi pengguna dengan penglihatan terbatas atau saat layar terkena pantulan cahaya. Keterbacaan ini terukur: standar WCAG menyatakan kontras sebagai rasio antara luminance (kecerahan) warna teks dan warna latarnya, mulai dari 1:1 (identik) hingga 21:1 (hitam pekat di atas putih). Pada Chapter ini kita memahami cara rasio tersebut dihitung, menetapkan ambang yang harus dipenuhi, lalu menerapkannya pada kode yang setiap hari kita tulis.
Menghitung Rasio Kontras #
Rasio kontras diturunkan dari relative luminance — kecerahan yang ditimbang sesuai sensitivitas mata terhadap tiap kanal. Rumus ringkasnya:
Linearisasi tiap kanal (0–255 menjadi 0–1):
c' = c / 12.92 bila c ≤ 0.03928 (nilai 0–255: ≤ 10)
c' = ((c + 0.055) / 1.055) ^ 2.4 untuk kanal lainnya
L = 0.2126·R' + 0.7152·G' + 0.0722·B'
Rasio = (L_terang + 0.05) / (L_gelap + 0.05)Sebagai contoh, teks putih (L = 1.0) pada tombol biru rgb(37 99 235): luminance biru tersebut sekitar 0.153, sehingga rasionya (1.0 + 0.05) / (0.153 + 0.05) ≈ 5,2:1. Angka ini memenuhi ambang AA untuk teks normal. Kita tidak perlu menghitung manual setiap saat — panel DevTools menampilkan rasio kontras dan tanda peringatan bila gagal — tetapi memahami rumusnya membuat keputusan penyesuaian warna terarah: menaikkan rasio berarti menurunkan luminance teks atau menaikkan luminance latar.
Ambang minimum menurut WCAG:
| Jenis teks | AA (minimum) | AAA (dianjurkan) |
|---|---|---|
| Normal (di bawah sekitar 24px) | 4.5:1 | 7:1 |
| Besar (sekitar 24px ke atas, atau 18,7px bold ke atas) | 3:1 | 4.5:1 |
Menerapkan pada Kode #
Empat pasangan warna berikut menunjukkan rentang hasil yang biasa kita temui:
.panel-aman { color: rgb(15 23 42); background-color: rgb(248 250 252); } /* ±17:1 */
.tombol { color: rgb(255 255 255); background-color: rgb(37 99 235); } /* ±5,2:1 */
.panel-abu { color: rgb(100 116 139); background-color: rgb(248 250 252); } /* ±4,5:1 */
.panel-gagal { color: rgb(148 163 184); background-color: rgb(248 250 252); } /* ±2,4:1 */Hasil di Browser:
Empat panel teks tampil berjajar dengan pasangan warna di atas.
Nilai computed yang diperiksa harness: panel-aman color rgb(15, 23, 42)
di atas rgb(248, 250, 252); tombol color rgb(255, 255, 255) di atas
rgb(37, 99, 235); panel-abu color rgb(100, 116, 139); panel-gagal
color rgb(148, 163, 184). Tiga panel pertama lolos ambang AA;
panel keempat sengaja ditampilkan sebagai contoh yang belum lolos.Dua panel terakhir mengajarkan pelajaran penting: abu rgb(100 116 139) masih lolos AA dengan selisih tipis, sedangkan abu satu tingkat lebih terang rgb(148 163 184) gagal total — bahkan untuk teks besar. Ketika desain menuntut teks redup, turunkan kecerahan sampai rasionya kembali melewati ambang, bukan sekadar “sedikit diredupkan”.
Perhitungan arah sebaliknya memberi gambaran yang sama. Teks rgb(15 23 42) di atas latar rgb(248 250 252) menghasilkan rasio sekitar 17:1 — jauh melampaui AAA — karena luminance keduanya berada di ujung rentang yang berlawanan. Semakin dekat luminance teks dan latar, semakin kecil rasionya; itulah mengapa teks abu terang di atas latar terang selalu berakhir di bawah ambang.
Ambang kontras juga berlaku di luar teks. Elemen antarmuka yang membawa makna — batas kolom input, ikon di dalam tombol, indikator status, dan garis fokus — dianjurkan memenuhi rasio 3:1 terhadap latar di sekitarnya, sehingga batas komponen tetap terlihat oleh pengguna dengan penglihatan rendah. Pengecualian teks besar pada tabel di atas sebaiknya dimanfaatkan untuk judul dan tombol berukuran besar, bukan sebagai alasan menurunkan kontras teks isi.
Kebiasaan Kerja yang Membantu #
Tiga kebiasasan berikut menjaga kontras tetap terjaga tanpa menghambat ritme kerja:
- Periksa saat memilih warna, bukan saat selesai membangun. Panel DevTools menampilkan rasio di samping swatch warna; keputusan menyesuaikan satu kanal lebih cepat dilakukan di tahap ini.
- Simpan pasangan yang lolos sebagai token. Catat kombinasi teks–latar yang lolos pada custom properties tema, sehingga komponen baru meminjam pasangan yang telah teruji.
- Uji kedua mode terang dan gelap. Pasangan yang lolos di mode terang belum tentu lolos di mode gelap; strateginya dibahas pada Chapter tema di Section Themes dan Design Systems .
Demo chapter ini membawa empat panel dengan delapan penanda data-expected pada properti color dan background-color — klaim rasio di teks dihitung dari pasangan computed tersebut.