Kontras Teks

Chapter Kontras Warna sudah memperkenalkan rasio 4.5:1 dan 3:1 sebagai ambang keterbacaan. Kali ini kontras kita perlakukan sebagai sistem utuh: level WCAG tempat angka-angka itu berasal, cakupan yang sering terlewat — elemen non-teks — nuansa placeholder dan disabled, lalu alur pemeriksaan hariannya. Setelahnya, setiap keputusan warna kita punya dasar yang bisa dipertanggungjawabkan.

Level WCAG: A, AA, dan AAA #

Kriteria kontras tersusun pada tiga level: A fondasi minimum, AA standar mayoritas regulasi, dan AAA disebut enhanced — sulit dipenuhi untuk semua konten. Ambangnya:

Target realistis hampir semua proyek: AA penuh; AAA diincar selektif — warna brand kadang tak mungkin mencapai 7:1.

Kontras Non-teks: 3:1 untuk Elemen Antarmuka #

Kriteria yang paling sering terlewat bukan teks, melainkan elemen di sekelilingnya: kriteria Non-text Contrast menuntut 3:1 untuk bagian antarmuka yang dibutuhkan untuk memahami dan mengoperasikan halaman:

• garis tepi (border) input;
• ikon yang membawa makna — status, tutup, panah dropdown;
• lingkar checkbox dan radio custom beserta tandanya;
• track slider;
• indikator fokus — termasuk ring dari chapter Outline.

Dekorasi murni tidak tunduk pada ambang ini:

.input-kode {
  border: 1px solid #6b7280; /* garis input ikut ambang 3:1 */
}

.ikon-status {
  color: #52606d; /* ikon yang membawa informasi wajib terbaca */
}

.garis-dekoratif {
  border-top: 1px solid #e5e7eb; /* dekorasi murni: bebas ambang */
}

Garis dekoratif bebas memilih warna lembut karena tidak membawa informasi. Demo berikut menampilkan elemen non-teks yang sama dalam dua versi, dengan perkiraan rasio terhadap latar putih di badan tiap elemen:

Pilih warna setara teks sekunder untuk garis dan ikon UI agar elemen tetap terbaca pada kondisi terburuk.

Placeholder dan State Disabled #

Pertama, placeholder: teks petunjuk di kolom input adalah teks sungguhan sehingga tunduk pada ambang 4.5:1 — abu terang ala mock-up hampir selalu gagal. Placeholder juga menghilang saat pengguna mengetik, jadi jangan menaruh informasi penting di dalamnya.

.kolom-kupon::placeholder {
  color: #6b7280; /* placeholder adalah teks: wajib lolos 4.5:1 */
}

Kedua, disabled: WCAG mengecualikan komponen yang tidak aktif dari syarat kontras, karena pengguna memang tidak dapat berinteraksi dengannya:

.tombol-simpan:disabled {
  color: #9ca3af;            /* komponen inactive: dikecualikan */
  background-color: #f3f4f6;
  cursor: not-allowed;
}

Pengecualian ini bukan izin menata elemen aktif seolah disabled — tombol yang bisa diklik tetap wajib kontras. Pembahasan penuhnya ada pada chapter Disabled dan Readonly States.

Alur Pemeriksaan: DevTools, Lighthouse, dan Alat Palet #

Pemeriksaan paling bertahan lama adalah yang menyatu dengan alur kerja. Tiga lapisnya:

1. Satu pasangan warna — DevTools. Pemilih warna di panel Styles menampilkan rasio teks–latar saat itu, lengkap tanda lolos AA atau AAA.
2. Seluruh halaman — Lighthouse. Audit kategori Accessibility melaporkan semua pasangan warna yang gagal — jalankan berkala.
3. Sebelum menulis kode — alat palet. Pemeriksa kontras menguji kombinasi lebih dulu, sehingga kombinasi yang lolos tersimpan sebagai warna teks, sekunder, dan disabled.

Kebiasaan penopangnya: setiap pasangan warna baru diperiksa pada hari ia lahir — menambal empat puluh pasangan saat audit jauh lebih mahal daripada memeriksa satu.

Kesalahan Umum #

Ringkasan #

Kontras bukan satu angka, melainkan tiga lapis aturan: 4.5:1 untuk teks normal level AA, 3:1 untuk teks besar, dan 3:1 untuk elemen non-teks yang membawa makna — dengan AAA 7:1 sebagai target selektif. Placeholder tetap teks; disabled dikecualikan, bukan izin menata elemen aktif seolah mati. Pemeriksaan terbaik menyatu dalam alur kerja: DevTools untuk satu pasangan warna, Lighthouse untuk seluruh halaman, alat palet sebelum kode. Dari warna kita berpindah ke arah: chapter berikutnya melihat halaman dari mata pengguna keyboard.