Cara menggunakan Cek Kontras Warna
- Masukkan warna teks dan warna latar belakang (HEX, rgb(), hsl(), oklch() atau nama CSS), atau gunakan color picker.
- Baca rasio kontras dan hasil AA/AAA untuk teks normal, teks besar, dan komponen UI.
- Periksa pratinjau langsung: judul, isi teks, teks kecil, tombol, dan batas input.
- Jika suatu level gagal, klik Gunakan di samping warna lulus terdekat untuk menerapkannya, lalu salin HEX baru ke CSS kamu.
Apa itu rasio kontras warna?
Rasio kontras membandingkan luminansi relatif dari dua warna pada skala dari 1:1 (sama persis) sampai 21:1 (hitam di atas putih). Web Content Accessibility Guidelines (WCAG) menggunakannya untuk menentukan apakah teks cukup terbaca bagi orang dengan penglihatan rendah atau defisiensi penglihatan warna, dan juga bagi siapa pun yang membaca ponsel di bawah cahaya terang. Ini juga menjadi tolok ukur hukum: undang-undang aksesibilitas seperti European Accessibility Act dan ADA umumnya dinilai berdasarkan WCAG 2.x level AA.
Persyaratan kontras WCAG 2.2
| Kriteria | Level | Teks normal | Teks besar |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | 3:1 untuk batas komponen UI, indikator fokus, dan ikon/grafis yang bermakna | |
Teks besar berarti minimal 18 pt (24 px) reguler atau 14 pt (≈18.66 px) tebal. Logo, teks dekoratif murni, dan teks pada kontrol nonaktif dikecualikan.
Cara menghitung rasio
Setiap kanal sRGB dilinearisasi (nilai ≤ 0.04045 dibagi 12.92, lainnya menggunakan ((c + 0.055) / 1.055)2.4), lalu digabung menjadi luminansi relatif: L = 0.2126 R + 0.7152 G + 0.0722 B. Rasionya adalah (Llebih terang + 0.05) / (Llebih gelap + 0.05). Batasannya ketat: #777777 di atas putih menghasilkan 4.47:1 dan gagal AA, sedangkan #767676 mencapai 4.54:1 dan lulus. Itulah sebabnya pengecek ini memotong (truncate), bukan membulatkan, rasio yang ditampilkan. Teks semi-transparan dicampur dulu dengan latar belakang, persis seperti yang dirender browser.
Apa itu APCA?
Accessible Perceptual Contrast Algorithm (APCA) adalah metode kontras yang diusulkan untuk WCAG 3. Metode ini menghasilkan nilai kontras kecerahan Lc dari sekitar 0 sampai 106 (negatif untuk teks terang di latar gelap) dan memperhitungkan polaritas, karena teks terang di atas gelap dan gelap di atas terang tidak dipersepsikan sama. Sebagai panduan, Lc 90 disarankan untuk teks isi, Lc 75 adalah minimum untuk teks isi, dan Lc 60 untuk konten teks lainnya. APCA masih berstatus draf, jadi untuk kepatuhan saat ini gunakan WCAG 2.x, dan gunakan APCA sebagai pendapat kedua, terutama untuk tema gelap.
Memperbaiki pasangan yang gagal
Tabel saran mencari warna terdekat yang lulus dengan hanya mengubah lightness HSL pada teks atau latar belakang, sehingga hue merek kamu tetap terjaga. Untuk varian warna merek yang lebih gelap atau lebih terang, buat skala tint dan shade lengkap dengan Color Converter lalu uji pasangannya di sini. Di Webflow, Vision preview pada Designer mensimulasikan defisiensi penglihatan warna, tetapi tidak menampilkan rasio, jadi periksa angka pastinya di sini sebelum publikasi.
Juga dicari sebagai: rasio kontras wcag, contrast ratio, cek kontras teks, aksesibilitas warna, wcag contrast checker, apca, kontras warna a11y.
Tool yang cocok dipakai bersama Cek Kontras Warna
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Pengecek Alt Gambar — Audit setiap gambar di halaman dalam satu tabel: status alt text, ukuran file, atribut lebar/tinggi, format, dan lazy loading, dengan filter dan ekspor CSV.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Konverter HEX ke OKLCH — Tempel warna HEX dan dapatkan nilai OKLCH-nya untuk CSS.