Pemeriksa Kontras Warna
Periksa apakah kombinasi warna Anda memenuhi standar aksesibilitas WCAG.
Tentang Pemeriksa Kontras Warna
Pemeriksa Kontras Warna GuruAlpha mengukur rasio kontras antara warna latar depan dan latar belakang sesuai standar WCAG (Pedoman Aksesibilitas Konten Web). Masukkan dua warna apa pun dan alat ini menghitung rasio kontrasnya, memberi tahu Anda apakah kombinasi tersebut memenuhi standar aksesibilitas AA atau AAA untuk teks normal dan besar.
Aksesibilitas web adalah keharusan moral sekaligus persyaratan hukum. Pedoman WCAG 2.1 menetapkan rasio kontras minimum untuk memastikan teks dapat dibaca oleh penyandang gangguan penglihatan, termasuk buta warna, penglihatan rendah, dan penurunan penglihatan terkait usia. Pemeriksa kontras mempermudah kepatuhan dengan memberikan umpan balik instan tentang pilihan warna Anda.
Alat ini menghitung rasio kontras menggunakan rumus luminansi relatif yang ditentukan dalam WCAG 2.1. Rasio 1:1 berarti tidak ada kontras (warna sama). Rasio 21:1 adalah kontras maksimum (hitam di atas putih). Persyaratan WCAG adalah: teks normal AA membutuhkan 4.5:1, teks besar AA membutuhkan 3:1, teks normal AAA membutuhkan 7:1, dan teks besar AAA membutuhkan 4.5:1. Alat ini dengan jelas menunjukkan apakah kombinasi warna Anda memenuhi setiap ambang batas.
Pratinjau visual menampilkan warna teks Anda di atas warna latar belakang, memberi Anda pandangan nyata tentang keterbacaan. Pratinjau menyertakan sampel teks normal (16px) dan besar (24px+), karena ukuran yang berbeda memiliki persyaratan WCAG yang berbeda. Indikator lulus/gagal diperbarui secara real-time saat Anda menyesuaikan warna.
Bagi pengembang dan desainer web, pemeriksa kontras sangat penting untuk memastikan situs web dapat diakses oleh semua pengguna. Alat ini terintegrasi secara alami ke dalam alur kerja desain — pilih warna, periksa kontras, sesuaikan jika perlu, dan lanjutkan dengan keyakinan bahwa teks Anda dapat dibaca.
Fitur Utama Pemeriksa Kontras Warna
- Menghitung rasio kontras antara dua warna apa pun
- Pemeriksaan kepatuhan WCAG AA dan AAA
- Ambang batas teks normal (4.5:1) dan teks besar (3:1)
- Pratinjau langsung teks di atas latar belakang
- Saran penyesuaian warna untuk memenuhi standar
- Dukungan input HEX, RGB, dan HSL
- Berfungsi di semua perangkat
- Tanpa perlu mendaftar
Cara Menggunakan Pemeriksa Kontras Warna
- Buka Pemeriksa Kontras di GuruAlpha.
- Masukkan atau pilih warna latar depan (teks).
- Masukkan atau pilih warna latar belakang.
- Lihat rasio kontras dan status kepatuhan WCAG.
- Periksa persyaratan teks normal maupun besar.
- Sesuaikan warna jika kombinasi gagal.
- Gunakan saran penyesuaian untuk memenuhi AA atau AAA.
Tips Menggunakan Pemeriksa Kontras Warna
- Kepatuhan AA (4.5:1) adalah minimum untuk situs web publik.
- Kepatuhan AAA (7:1) lebih disukai untuk aksesibilitas maksimum.
- Teks besar (18px tebal atau 24px reguler) memiliki persyaratan kontras yang lebih rendah.
- Jangan hanya mengandalkan warna untuk menyampaikan informasi — tambahkan label teks atau pola.
- Uji dengan simulator buta warna untuk verifikasi aksesibilitas tambahan.
Pertanyaan Umum tentang Pemeriksa Kontras Warna
Apa itu WCAG?
WCAG (Pedoman Aksesibilitas Konten Web) adalah standar internasional untuk aksesibilitas web. Ini mendefinisikan persyaratan agar konten dapat diakses oleh penyandang disabilitas.
Rasio kontras berapa yang saya butuhkan?
Teks normal AA: 4.5:1. Teks besar AA: 3:1. Teks normal AAA: 7:1. Teks besar AAA: 4.5:1. Targetkan setidaknya kepatuhan AA.
Apa yang dianggap "teks besar"?
18px (24pt) berat normal atau 14px (18.66pt) berat tebal. Teks besar memiliki persyaratan kontras yang lebih rendah karena karakter yang lebih besar lebih mudah dibaca.
Apakah ini memeriksa elemen non-teks?
Alat ini berfokus pada kontras teks. WCAG juga mensyaratkan kontras 3:1 untuk komponen UI non-teks, yang dapat Anda periksa secara manual menggunakan alat yang sama.