Frontend
Color Contrast Checker
Cek rasio kontras warna teks vs latar sesuai standar WCAG AA/AAA.
Aa Contoh Teks
13.98
Rasio Kontras
AA Normal
AAA Normal
AA Large
AAA Large
Tentang Tool Ini
Color Contrast Checker membantu kamu mengecek rasio kontras antara warna teks dan latar belakang sesuai standar WCAG 2.1 (Level AA dan AAA). Pastikan desain kamu accessible untuk semua pengguna, termasuk yang memiliki gangguan penglihatan.
Siapa yang Butuh Ini?
- Pastikan desain web memenuhi standar WCAG AA/AAA
- Cek kombinasi warna teks dan latar sebelum publish
- Desainer UI memvalidasi aksesibilitas komponen
Cara Menggunakan
- 1
Pilih atau masukkan warna teks (foreground) di kolom pertama.
- 2
Pilih atau masukkan warna latar belakang (background) di kolom kedua.
- 3
Lihat rasio kontras yang dihasilkan dan status lolos/gagal WCAG AA & AAA.
- 4
Gunakan saran warna yang disarankan untuk mencapai rasio yang memadai.
Pertanyaan Umum
Apa itu WCAG AA dan AAA?+
WCAG adalah standar aksesibilitas web. Level AA membutuhkan rasio kontras minimal 4.5:1 untuk teks normal, sedangkan AAA membutuhkan 7:1. AAA lebih ketat dari AA.
Warna apa yang sulit lolos kontras?+
Warna terang di atas latar terang (misal kuning di atas putih) atau warna gelap di atas latar gelap (misal biru tua di atas hitam) biasanya sulit lolos. Gunakan tool ini untuk menemukan kombinasi yang tepat.
Apakah ini berlaku untuk semua ukuran teks?+
Untuk teks besar (bold 18px atau normal 24px+), syarat AA lebih ringan: 3:1. Tool ini akan menampilkan status untuk kedua ukuran teks.