Pemeriksa Kontras
Hitung rasio kontras WCAG antara dua warna beserta hasil AA dan AAA untuk teks normal dan besar, lengkap dengan pratinjau langsung. Semuanya berjalan di peramban Anda.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
Alat ini berjalan sepenuhnya di browser Anda. Data Anda tidak pernah meninggalkan perangkat — tidak diunggah ke server mana pun.
Cara pakai
- 1Ketik nilai hex atau rgb(), atau pakai pemilih warna, untuk warna teks.
- 2Lakukan hal yang sama untuk warna latar.
- 3Baca rasio dan vonis AA / AAA, atau sentuh salah satu preset.
- 4Nilai pasangannya dengan mata Anda sendiri di blok pratinjau.
Pemeriksa Kontras
Masukkan warna teks dan warna latar — hex seperti #333 atau #1F2937, atau rgb()/rgba() — dan baca rasio kontras WCAG dengan dua desimal, plus vonis langsung untuk empat ambang penting: AA dan AAA, teks normal dan besar. Pratinjau langsung menampilkan paragraf dan judul besar dengan warna aslinya.
Perhitungan memakai rumus luminans relatif resmi WCAG 2.x — sama dengan pemeriksa milik W3C — jadi 4.5 di sini adalah 4.5 di mana pun. Presetnya mencakup pasangan abu-abu 4.54:1 yang menunjukkan betapa tipisnya garis AA.
Pertanyaan yang sering diajukan
Rasio kontras berapa yang dibutuhkan untuk lulus?
Menurut WCAG 2.x: teks normal butuh 4.5:1 untuk AA dan 7:1 untuk AAA. Teks besar — minimal 24 px, atau 18.7 px tebal — butuh 3:1 untuk AA dan 4.5:1 untuk AAA. Komponen antarmuka dan grafis butuh 3:1.
Bagaimana rasio itu dihitung?
Setiap warna dilinearkan dari sRGB lalu digabung menjadi luminans relatif L = 0.2126·R + 0.7152·G + 0.0722·B; rasionya (L terang + 0.05) / (L gelap + 0.05) — persis rumus spesifikasi WCAG 2.x. Alfa rgba() di bawah 1 diratakan ke putih sebelum dihitung.
Alat terkait
Konverter Warna
Tempel warna dalam hex, rgb(), atau hsl() dan dapatkan ketiga formatnya plus baris tint dan shade siap pakai untuk design system Anda.
Semua alat →
Pemilih Warna
Pilih warna dari swatch atau ambil langsung dari layar Anda dengan API EyeDropper — hex, RGB, dan HSL tersalin sekali klik.
Semua alat →
Kalkulator Nilai
Kalkulator nilai berbobot atau berbasis poin: tambahkan tugas, lihat nilai dan huruf Anda secara langsung, dan cari tahu persis skor yang dibutuhkan di ujian akhir.
Semua alat →
Sematkan alat ini
Tambahkan alat ini ke situs Anda dengan satu baris — berjalan di browser pengunjung.
<iframe src="https://zoyku.com/id/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>