Pemeriksa Kontras Warna
Periksa rasio kontras warna untuk kepatuhan WCAG 2.1. Verifikasi standar AA dan AAA secara instan.
Apa itu rasio kontras WCAG?
Rasio kontras WCAG mengukur perbedaan luminansi antara warna latar depan dan belakang. Berkisar dari 1:1 hingga 21:1.
Apa persyaratan WCAG AA dan AAA?
WCAG AA memerlukan minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. AAA memerlukan 7:1 dan 4.5:1.
Apa yang dihitung sebagai teks besar?
Teks besar didefinisikan sebagai 18pt (24px) atau lebih besar, atau 14pt (18.66px) tebal atau lebih besar.
Mengapa kontras warna penting?
Kontras yang tepat memastikan teks dapat dibaca oleh orang dengan gangguan penglihatan dan meningkatkan keterbacaan untuk semua.
Bagaimana cara menghitung rasio kontras?
Dihitung menggunakan nilai luminansi relatif. Rumusnya adalah (L1 + 0.05) / (L2 + 0.05).
Berapa kontras minimum untuk elemen UI?
WCAG memerlukan minimal 3:1 untuk komponen UI dan objek grafis.
Bisakah saya menggunakan kombinasi warna apa saja?
Tidak semua kombinasi memenuhi standar aksesibilitas. Gunakan pemeriksa ini untuk validasi.
Apa itu luminansi relatif?
Ini adalah kecerahan yang dirasakan dari warna, dari 0 (hitam) hingga 1 (putih). Dihitung menggunakan ruang warna sRGB.
Apakah saya perlu memeriksa kontras gambar?
Teks dalam gambar harus memenuhi persyaratan yang sama. Untuk gambar dekoratif tidak berlaku.
Alat apa yang membantu kontras?
Gunakan alat pengembang browser, plugin desain, atau pemeriksa online seperti ini.
Cara Menggunakan Pemeriksa Kontras Warna
Periksa seketika apakah kontras teks dan UI memenuhi ambang AA dan AAA WCAG 2.1, sepenuhnya di browser Anda. Masukkan dua warna dan rasionya dihitung lokal — tidak ada yang keluar dari perangkat.
- Ketik atau tempel warna teks ke kolom Foreground Color, dalam format apa pun yang didukung seperti HEX atau RGB.
- Isi kolom Background Color dengan warna di belakang teks untuk menghitung rasio kontras.
- Baca rasio yang dihasilkan beserta lencana lulus AA dan AAA untuk teks normal dan teks besar.
- Sesuaikan salah satu warna hingga rasio melampaui 4,5:1 untuk teks isi atau 3:1 untuk teks besar dan komponen UI.
- Tukar nilai Foreground Color dan Background Color untuk menguji pasangan sebaliknya, misalnya teks terang pada tema gelap.
AAA (7:1) patut dikejar untuk bacaan panjang, tetapi 4,5:1 (AA) adalah batas minimum yang diminta mayoritas pedoman aksesibilitas.
Alat Terkait
- Pemilih Warna Ambil warna dari layar dengan eyedropper. Salin kode HEX, RGB, HSL secara instan. Alat pemilih warna online gratis.
- Generator Palet Warna Buat palet warna yang indah dan harmonis secara instan dengan generator online gratis kami. Mendukung mode monokromatik, analog, komplemen, triadik, split-komplemen, dan tetradik. Sesuaikan warna dengan slider HSL, kunci favorit, dan ekspor sebagai CSS, Tailwind, JSON, atau SVG. 100% berbasis browser, data Anda tidak pernah meninggalkan perangkat.
- Simulator Buta Warna Simulator buta warna online gratis. Uji desain untuk Protanopia, Deuteranopia, Tritanopia dan jenis lainnya. 100% pribadi, berjalan di browser.
- GIF Pisahkan Frame Ekstrak dan unduh frame individual dari animasi GIF sebagai PNG atau sprite sheet. Alat online gratis dengan pratinjau dan ekspor ZIP.
- GIF Terbalik Balikkan urutan pemutaran animasi GIF online gratis. Unggah, pratinjau dan unduh secara instan.
- Pengubah Kecepatan GIF Ubah kecepatan animasi GIF online. Percepat atau perlambat file GIF secara instan.
- Video ke GIF Konversi video ke GIF animasi secara online. Atur kualitas, frame rate, dan resolusi langsung di browser tanpa perlu unggah file.
- Pembuat Meme Pembuat meme gratis online. Tambahkan kapsyen klasik atas dan bawah ke gambar apa pun, seret teksnya, lalu unduh meme sebagai PNG atau JPEG seketika.