Contrast Checker menghitung rasio kontras WCAG 2.1 antara dua warna dan memberi peringkat terhadap ambang AA/AAA untuk teks normal dan besar. Pratinjau langsung menunjukkan teks yang dirender dalam warna yang dipilih, dan tombol "pilih latar belakang halaman" mengambil sampel halaman saat ini.
Aksesibilitas semakin diperlukan — kepatuhan WCAG adalah persyaratan hukum di banyak yurisdiksi, dan bahkan di mana tidak, kontras buruk mendorong pengguna pergi. Contrast Checker memberi tahu Anda secara instan apakah dua warna memenuhi standar WCAG. Pilih latar depan dan latar belakang melalui pemilih warna atau tempel nilai heksadesimal; alat menghitung rasio kontras menggunakan formula luminansi WCAG resmi dan memberi peringkat terhadap empat ambang: AA normal (≥4,5:1), AA besar (≥3:1), AAA normal (≥7:1), dan AAA besar (≥4,5:1). Setiap ambang menunjukkan lencana Pass/Fail yang jelas. Pratinjau langsung merender teks besar dan normal dalam warna yang dipilih sehingga Anda dapat melihat dampak visual yang sebenarnya. Tombol kenyamanan mengambil sampel latar belakang tubuh halaman saat ini — berguna saat memeriksa apakah kombinasi warna di situs nyata lulus. Semuanya berjalan secara lokal di browser Anda, tanpa unggahan.
Menggunakan formula luminansi WCAG resmi untuk menghitung rasio kontras. Hasilnya tepat dan sesuai dengan setiap pemeriksa aksesibilitas yang patuh.
Pass/fail untuk AA normal (≥4,5:1), AA besar (≥3:1), AAA normal (≥7:1), AAA besar (≥4,5:1) — semuanya ditampilkan sebagai grid.
Merender teks besar dan normal yang sebenarnya dalam warna yang dipilih sehingga Anda melihat dampak visual bersama dengan rasio numerik.
Satu klik mengambil sampel latar belakang tubuh halaman saat ini yang dihitung — berguna untuk menguji kombinasi dunia nyata.
Ketik nilai heksadesimal atau gunakan pemilih warna asli. Nilai disinkronkan secara dua arah saat Anda mengedit salah satu.
Tukar satu klik membalikkan latar depan dan latar belakang — berguna saat memeriksa tema terbalik atau status hover.
Sebelum menyelesaikan palet warna, periksa setiap warna teks terhadap latar belakangnya untuk memastikan kepatuhan WCAG AA — menghindari pengerjaan ulang nanti.
Gunakan "pilih latar belakang halaman" di situs langsung, kemudian tempel warna teks yang sebenarnya — temukan pelanggaran a11y dalam hitungan menit tanpa membuka Lighthouse.
Ketika merek memilih warna yang mungkin gagal a11y, gunakan pemeriksa untuk menemukan varian yang patuh terdekat (bayangan lebih gelap/lebih terang).
Verifikasi bahwa warna status hover/aktif/nonaktif masih memenuhi persyaratan kontras, bukan hanya default.
Tema gelap sering kali gagal kontras untuk teks abu-abu-di-abu-abu. Periksa abu-abu tergelap Anda terhadap latar belakang tergelap Anda untuk menangkap ini.
Klik ikon Kontras di dermaga DevSuite Pro. Panel terbuka dengan bidang warna latar depan dan latar belakang.
Gunakan pemilih warna atau tempel nilai heksadesimal untuk masing-masing. Pratinjau langsung diperbarui saat Anda mengubah warna.
Angka besar (mis. 4,8:1) adalah rasio kontras. Lebih tinggi lebih baik. 3 adalah minimum yang diperlukan; 4,5 adalah target untuk teks normal.
Lencana pass/fail untuk AA dan AAA, ukuran teks normal dan besar, ditampilkan sekilas apa yang memenuhi syarat kombinasi Anda.
Jika gagal, sesuaikan warna. Gelapkan latar depan atau terangi latar belakang (atau sebaliknya) sampai tingkatan target menampilkan Lulus.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
