Pemeriksa Kontras WCAG — Rasio AA/AAA
Pilih warna teks dan latar untuk melihat rasio kontras WCAG serta status AA/AAA pada teks normal dan besar. Langkah: pilih atau ketik HEX, klik Periksa, baca rasio dan lencana, tukar atau coba saran. Contoh: #767676 di #ffffff ≈ 4,54:1 — lolos AA teks normal, gagal AAA teks normal. Warna tetap di browser Anda.
Cara kerja
Atur teks dan latar dengan pemilih warna atau ketik HEX. Halaman mengonversi sRGB ke luminansi relatif, menghitung rasio, lalu menampilkan Lulus/Gagal untuk AA dan AAA (teks normal dan besar). Tukar pasangan, salin ringkasan, atau terapkan saran saat kontras terlalu rendah.
Aturan yang perlu diingat
Kontras WCAG berdasarkan luminansi relatif — bukan hue saja. Gunakan daftar ini jika rasio terasa aneh.
- Luminansi relatif L dihitung dari kanal sRGB setelah kurva linearisasi WCAG. Rasio = (Lterang + 0,05) / (Lgelap + 0,05).
- Ambang: AA teks normal 4,5:1, AA teks besar 3:1, AAA teks normal 7:1, AAA teks besar 4,5:1. Satu rasio mengisi keempat lencana.
- Hanya HEX sRGB opak (#RGB atau #RRGGBB). HEX tidak valid menampilkan error; latar depan dan latar sama memberi 1:1 dan gagal semua level.
- Privasi: warna diproses lokal di tab ini — tidak ada yang dikirim ke server.
Contoh
Muat contoh: latar depan #767676 pada latar #ffffff memberi sekitar 4,54:1. AA teks normal lulus (≥4,5:1), AA teks besar lulus (≥3:1), AAA teks normal gagal (≥7:1), AAA teks besar lulus (≥4,5:1). Tukar warna untuk melihat perubahan rasio.
Cocok untuk
- Desain UI: pastikan teks isi dan label aman di atas latar merek sebelum serah terima.
- Tombol dan chip: uji putih di atas warna atau sebaliknya untuk AA normal atau besar.
- Mode gelap: tukar permukaan terang/gelap dan pastikan teks sekunder tetap ≥4,5:1 atau 3:1 untuk teks besar.
Frequently asked questions
Berapa ambang kontras WCAG?
AA teks normal minimal 4,5:1; AA teks besar (18 pt reguler atau 14 pt tebal) 3:1; AAA teks normal 7:1; AAA teks besar 4,5:1. Halaman ini menampilkan keempat lencana sekaligus.
Apa yang dianggap teks besar?
Teks besar lebih mudah dibaca sehingga kontras boleh lebih rendah. WCAG menetapkan ≥18 pt reguler atau ≥14 pt tebal. Pratinjau menampilkan baris besar dan normal untuk perbandingan.
Apakah warna saya dikirim ke server?
Tidak. Perhitungan berjalan sepenuhnya di browser — nilai warna tidak diunggah.
Bagaimana memakai saran warna?
Jika rasio di bawah 4,5:1, alat dapat menyarankan latar depan atau latar yang lebih terang/gelap agar AA teks normal tercapai. Saran ini titik awal dengan campuran ke putih/hitam, bukan palet merek final.
Hubungannya dengan token warna merek?
Gunakan halaman ini untuk memvalidasi pasangan teks/latar apa pun. Untuk palet merek lengkap dengan token semantik, buka alat paket token warna; Anda juga bisa ambil sampel dari foto dengan alat ekstraksi warna.
Related tools
Pertanyaan atau masukan
Ada yang kurang jelas, rusak, atau hilang? Tulis pesan di bawah — kami membaca setiap catatan tentang alat ini.