Cek kontras warna WCAG dan perbaiki kombinasi yang gagal dengan satu klik.
Terakhir diperbarui
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
*Pemeriksa kontras* adalah alat yang dipakai desainer dan developer sebelum merilis sebuah layar. Alat ini menghitung **rasio kontras** antara dua warna, yaitu teksmu dan latar belakang di belakangnya, memakai rumus yang didefinisikan dalam Web Content Accessibility Guidelines (WCAG). Makin besar rasionya, makin mudah teks dibaca.
WCAG menetapkan tiga ambang. **3:1** adalah minimum untuk judul besar (24px ke atas dengan ketebalan biasa atau 18,66px ke atas dengan huruf tebal) dan untuk batas yang terlihat dari komponen UI interaktif seperti tombol, field formulir, dan ikon. **4,5:1** adalah minimum AA untuk teks isi, batas yang dikejar kebanyakan tim. **7:1** adalah AAA, tingkat tertinggi, yang sangat membantu pembaca dengan penglihatan rendah.
Kontras **tidak** sama dengan seberapa mencolok dua warna terlihat. Dua warna merek yang mencolok tetap bisa sulit dibaca kalau *luminansi*-nya berdekatan. Alat ini menjalankan rumus luminansi WCAG pada setiap kanal, melaporkan rasio yang tepat, dan menilai setiap konteks, jadi kamu tidak perlu menebak.
Ketik atau tempel nilai HEX, atau pakai color picker. Latar depan adalah teks atau ikonmu; latar belakang adalah apa pun yang ada di belakangnya.
Angka besar di kiri adalah rasio kontras WCAG. Apa pun di bawah 3:1 berisiko untuk UI apa pun; di bawah 4,5:1 gagal untuk teks isi.
Tiga baris menunjukkan lulus/gagal untuk teks normal (4,5/7), teks besar (3/4,5), dan komponen UI (3:1). Kejar tanda centang hijau di setiap baris yang benar-benar dipakai desainmu.
Saat AA gagal, alat ini bisa menaikkan atau menurunkan kecerahan latar depanmu sedikit demi sedikit, dengan hue yang tetap, sampai pasangannya lulus. Klik lagi untuk AAA.
Begitu kedua warna lulus di konteks yang kamu butuhkan, salin cuplikan CSS-nya (color: + background:) lalu masukkan ke stylesheet atau file design token-mu.
Cocokkan apa yang sedang kamu tata dengan level yang kamu butuhkan. Sumber: WCAG 2.2 Understanding 1.4.3 dan 1.4.11.
| Target | Minimum AA | Minimum AAA | Catatan |
|---|---|---|---|
| Teks isi (< 18pt biasa) | 4,5 : 1 | 7 : 1 | Aturan default untuk paragraf, label, keterangan |
| Teks besar (≥ 18pt biasa atau ≥ 14pt tebal) | 3 : 1 | 4,5 : 1 | Judul, teks hero, kutipan besar |
| Komponen UI & objek grafis | 3 : 1 | - | Border tombol, field formulir, ikon, focus ring |
| Logo atau dekorasi murni | Dikecualikan | Dikecualikan | Logotype dan teks insidental dikecualikan, tapi kegunaannya tetap penting |
| Status nonaktif | Dikecualikan | Dikecualikan | Kontrol yang tidak aktif dikecualikan, tapi hati-hati jangan menjadikannya alasan untuk merilis default berkontras rendah |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Slate gelap klasik di atas warna hampir putih. Lulus AAA untuk teks isi (≥ 7:1) dengan banyak ruang tersisa. Sebagian besar UI produk sebaiknya berada di sekitar angka ini secara default.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Biru cerah di atas putih sering berada di sekitar 4:1: terbaca untuk judul besar (lulus 3:1 AA Large) tapi gagal di batas 4,5:1 untuk teks isi. Pakai untuk tombol dan label CTA berukuran 18px ke atas, bukan untuk teks paragraf.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 - fails everything */Kuning terang di atas putih adalah jebakan terkenal: warnanya terlihat mencolok, tapi luminansinya terlalu dekat. Simpan kombinasi ini untuk latar belakang gelap (misalnya #facc15 di atas #1f2937 mencapai ≈ 12:1).
placeholder dan disabled mendekati batas WCAG. Keduanya dikecualikan dari WCAG, tapi dikecualikan tidak sama dengan mudah dibaca.Usahakan minimal 4,5:1 untuk teks isi dan 3:1 untuk judul besar atau UI interaktif. 7:1 adalah target AAA: ketat, tapi layak dikejar untuk alur bacaan penting seperti dokumentasi, instruksi, dan pesan error.
AA adalah batas dasar aksesibilitas yang diwajibkan sebagian besar regulasi (WCAG 2.1/2.2 AA). AAA adalah target yang lebih ketat untuk organisasi yang ingin mendukung pengguna dengan penglihatan rendah. AAA tidak wajib, tapi untuk teks isi itu target yang masuk akal.
WCAG mendefinisikan teks besar sebagai 18pt atau lebih (sekitar 24px) dengan ketebalan biasa, atau 14pt atau lebih (sekitar 18,66px) dengan huruf tebal. Teks besar hanya butuh 3:1 untuk lulus AA; teks yang lebih kecil butuh 4,5:1.
Hue terang bernada tengah, terutama biru, kuning, dan merah dengan kecerahan sekitar 50%, sering berada sedikit di bawah 4,5:1 di atas putih. Solusinya biasanya menggelapkan latar depan (atau memakainya sebagai latar belakang di bawah teks putih). Pakai tombol "Sesuaikan latar depan" untuk menemukan shade terdekat yang lulus.
Tidak. Kontrol nonaktif dan dekorasi murni secara eksplisit dikecualikan. Tapi "dikecualikan" tidak sama dengan "UX yang baik". Kalau pengguna tidak bisa membedakan tombol nonaktif dari latar belakangnya, mereka tidak tahu tombol itu ada.
