Alat ini menggunakan rumus luminansi relatif resmi dari WCAG, sehingga angkanya sesuai dengan checker WebAIM dan sebagian besar audit aksesibilitas. Semua proses berjalan di browser - warna yang dimasukkan tidak pernah diunggah ke server, dan tidak ada batasan penggunaan.
Cek Kontras Warna
Berjalan sepenuhnya di browser Anda - tanpa unggah, tanpa daftar.
Rasio kontras
Lulusperlu 4.5:1
Lulusperlu 3:1
Gagalperlu 7:1
Lulusperlu 4.5:1
Besar = 18pt (24px), atau 14pt (18,66px) tebal.
Apa itu cek kontras warna?
Cek kontras warna mengukur rasio kontras antara warna teks dan latar belakangnya, lalu menunjukkan apakah kombinasi tersebut memenuhi standar aksesibilitas WCAG. Hasilnya berupa rasio dari 1:1 hingga 21:1, dengan status lulus atau gagal untuk AA dan AAA pada teks normal maupun teks besar.
Cara pakai
- 1Masukkan warna. Ketik kode hex, nilai rgb(), atau nama warna CSS untuk teks dan latar belakang, atau pilih langsung menggunakan color picker.
- 2Baca rasio kontras. Rasio kontras diperbarui secara langsung, lengkap dengan pratinjau tampilan teks di atas latar belakang yang dipilih.
- 3Periksa status. Setiap badge menampilkan status lulus atau gagal untuk WCAG AA dan AAA pada teks normal maupun teks besar.
Cocok untuk siapa
- Desainer yang ingin menguji warna brand sebelum masuk ke tahap pengembangan.
- Developer front-end yang mengecek warna tombol, tautan, dan label agar sesuai WCAG AA.
- Auditor aksesibilitas yang mendokumentasikan kegagalan kontras dengan rasio yang tepat.
- Tim konten dan email yang memastikan teks tetap terbaca di atas latar belakang berwarna.
Tanya jawab
Apakah cek kontras warna ini gratis?
Ya - sepenuhnya gratis tanpa perlu daftar dan tanpa batasan. Semua berjalan langsung di browser.
Berapa rasio kontras warna yang diperlukan untuk WCAG AA?
WCAG 2.1 Level AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Level AAA meningkatkan syarat itu menjadi 7:1 untuk teks normal dan 4,5:1 untuk teks besar.
Apa yang dimaksud teks besar?
Teks besar adalah teks berukuran minimal 18pt (sekitar 24px) dengan bobot normal, atau 14pt (sekitar 18,66px) dengan tebal. Teks besar diizinkan memiliki rasio kontras lebih rendah karena ukurannya yang lebih mudah dibaca.
Bagaimana cara cek kontras warna teks dan latar belakang dihitung?
Rumusnya adalah (L1 + 0,05) / (L2 + 0,05), di mana L1 dan L2 adalah luminansi relatif dari warna yang lebih terang dan lebih gelap. Luminansi dihitung dari kanal merah, hijau, dan biru sRGB sesuai definisi WCAG 2.x.
Apakah mendukung hex, RGB, dan nama warna CSS?
Ya. Bisa memasukkan hex 3, 4, 6, atau 8 digit, nilai rgb() dan rgba(), atau nama warna CSS seperti 'teal'. Warna juga bisa dipilih langsung dengan color picker bawaan browser.
Mengapa rasio yang sama kadang lulus dan kadang gagal?
Syarat rasio tergantung pada ukuran teks dan level yang dituju. Rasio 3,5:1 gagal untuk AA pada teks normal, tapi lulus AA untuk teks besar - jadi selalu periksa sesuai ukuran dan level yang benar-benar digunakan.