Masukkan warna HEX atau pilih warna Pantone untuk warna depan dan latar belakang.
Tinjau rasio kontras dan hasil WCAG AA atau AAA untuk teks normal, teks besar, dan komponen UI.
Gunakan pratinjau langsung, tukar warna, salin CSS, atau coba saran Pantone yang mudah diakses.

Kegunaan pemeriksa kontras

Validasi pasangan warna merek sebelum dipakai dalam tata letak digital.
Periksa tombol, formulir, navigasi, dan komponen UI lainnya agar kontrasnya mudah dibaca.
Bandingkan palet yang terinspirasi Pantone sebelum mengadaptasi warna cetak ke layar.
Dokumentasikan hasil WCAG untuk tinjauan aksesibilitas dan serah terima desain.

Pemeriksa kontras warna untuk alur kerja WCAG, UI, dan Pantone

Gunakan pemeriksa kontras ini saat Anda perlu memastikan warna teks, latar belakang, status tombol, atau palet merek terbaca jelas sebelum masuk ke situs web, aplikasi, presentasi, atau sistem desain.

Baca hasil kontras WCAG dengan benar

Alat ini menghitung luminansi relatif kedua warna dan menampilkan rasio kontras yang digunakan WCAG. Teks isi biasanya membutuhkan 4.5:1 untuk AA dan 7:1 untuk AAA, sedangkan teks besar dan komponen UI penting memiliki ambang yang lebih rendah.

Hubungkan warna Pantone dengan aksesibilitas digital

Warna Pantone sering dipilih untuk merek dan cetak, tetapi padanan di layar tetap perlu diperiksa aksesibilitasnya. Cari nama Pantone atau nilai HEX, pratinjau pasangannya, dan bandingkan alternatif yang mudah diakses sebelum menyerahkan warna ke tim desain atau pengembangan.

Alur praktis untuk desainer dan developer

Mulai dari nilai HEX persis di file desain, uji arah warna depan dan latar belakang, salin CSS atau laporan, lalu simpan pasangan warna yang lulus bersama dokumentasi palet Pantone Anda.

FAQ pemeriksa kontras

Apa yang diukur oleh pemeriksa kontras ini?

Alat ini mengukur rasio kontras luminansi antara warna depan dan warna latar belakang, lalu membandingkan hasilnya dengan ambang WCAG.

Apa persyaratan kontras WCAG AA dan AAA?

WCAG AA mensyaratkan setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar atau komponen UI. WCAG AAA mensyaratkan 7:1 untuk teks normal dan 4.5:1 untuk teks besar.

Bisakah warna Pantone diperiksa untuk aksesibilitas web?

Bisa. Referensi Pantone dapat dikonversi menjadi nilai warna layar, lalu diperiksa kontras digitalnya. Selalu verifikasi warna akhir pada media tempat warna tersebut akan tampil.

Catatan tentang kontras

Hasil dihitung dari nilai warna digital dan ditujukan untuk perencanaan aksesibilitas. Cetak fisik, bahan, pencahayaan, dan kalibrasi layar dapat mengubah kontras yang terlihat.