Pemeriksa Kontras (WCAG 2.1)
Periksa kontras teks/latar belakang sesuai standar WCAG.
Saran warna otomatis & penerbitan sertifikat kepatuhan.
🔤 Warna Teks
🎨 Warna Latar Belakang
Ini adalah pratinjau teks normal (16px)
Ini adalah teks tebal (16px bold)
Ini adalah teks besar (24px)
Ini adalah teks besar tebal (18px bold)
Rasio Kontras
12.63 : 1
AA Teks Normal
≥ 4.5:1
AA Teks Besar
≥ 3:1
AAA Teks Normal
≥ 7:1
AAA Teks Besar
≥ 4.5:1
💡 Warna yang disarankan untuk memenuhi standar AA:
Sesuaikan warna teks:
Sesuaikan warna latar belakang:
🏆 Sertifikat Kepatuhan WCAG AA
* Mengklik 'Bagikan di 𝕏' juga akan otomatis menyimpan sertifikat.
📋 Kode CSS
Tentang
Alat gratis untuk memeriksa secara instan apakah kombinasi warna web atau aplikasi Anda memenuhi standar kontras WCAG 2.1. Kontras rendah membuat teks sulit dibaca oleh orang dengan gangguan penglihatan.
Saat warna Anda gagal, alat secara otomatis menyarankan warna terdekat yang lolos, membantu Anda meningkatkan aksesibilitas tanpa mengubah desain secara drastis.
Setelah Anda lulus standar AA, Anda dapat menyimpan Sertifikat Kepatuhan WCAG AA resmi untuk dibagikan secara global.
Cara Pakai
Masukkan Warna
Klik pemilih warna atau ketik kode HEX/RGB langsung untuk warna teks dan warna latar belakang.
Periksa Hasil
Rasio kontras dan status lulus/gagal WCAG AA/AAA diperbarui secara real time dengan pratinjau langsung.
Terbitkan Sertifikat
Jika Anda lulus ambang AA, Anda dapat menyimpan sertifikat resmi dan membagikannya dengan mudah.
Glosarium
- Rasio Kontras
- Nilai numerik yang mewakili perbedaan cahaya antara warna latar depan dan latar belakang. Berkisar dari 1:1 (tidak ada perbedaan) hingga 21:1 (hitam di atas putih).
- WCAG (Web Content Accessibility Guidelines)
- Standar internasional yang ditetapkan oleh W3C yang mendefinisikan cara membuat konten web lebih mudah diakses. Pemerintah di seluruh dunia mewajibkan kepatuhan terhadap panduan ini.
- Standar AA
- Target kontras menengah. Teks normal memerlukan rasio minimal 4,5:1, sedangkan teks besar (18pt+) memerlukan 3:1. Ini adalah dasar hukum untuk sebagian besar lingkungan perusahaan.
- Standar AAA
- Standar WCAG paling ketat yang menargetkan kebutuhan aksesibilitas khusus. Memerlukan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Dapat sangat membatasi pilihan desain.
- Luminansi Relatif
- Kecerahan relatif dari titik mana pun dalam ruang warna. Memanfaatkan perhitungan gamma matematis yang disesuaikan untuk persepsi mata manusia untuk menilai warna pada skala 0 hingga 1.
- Aksesibilitas (a11y)
- Praktik menciptakan lingkungan yang dapat digunakan oleh penyandang disabilitas, termasuk gangguan penglihatan, keterbatasan kognitif, dan penurunan terkait usia.
FAQ
- Q.Berapa rasio kontras yang direkomendasikan untuk teks web?
- Di bawah standar WCAG AA, teks normal memerlukan rasio minimum 4,5:1. Teks besar (biasanya 18pt atau 14pt tebal) hanya memerlukan 3:1.
- Q.Apakah alat ini mensimulasikan buta warna?
- Tidak, versi ini berfokus secara eksklusif pada verifikasi matematis rasio kontras. Gunakan perangkat lunak simulasi buta warna khusus bersama alat ini.
- Q.Bagaimana algoritma menghitung rasionya?
- Ia mengimplementasikan formula rekomendasi WCAG yang tepat dengan menghitung Luminansi Relatif kedua warna dan membandingkannya menggunakan skala (L1 + 0,05) / (L2 + 0,05).
- Q.Haruskah saya menargetkan kepatuhan AA atau AAA?
- Standar industri global dan persyaratan hukum untuk sebagian besar operasi komersial adalah tingkat AA. AAA sangat ketat dan umumnya hanya diwajibkan untuk platform pemerintah atau disabilitas khusus.
- Q.Apakah data warna merek saya dikirim ke server cloud?
- Tidak pernah. Semua analisis kromatik dan rendering sertifikat terjadi sepenuhnya secara lokal di memori browser perangkat Anda, memastikan privasi perusahaan total.
- Q.Bisakah saya memasukkan warna menggunakan format selain kode HEX?
- Ya, selain format HEX (seperti #ffffff), Anda juga dapat memilih warna secara visual menggunakan pemilih warna atau memasukkan nilai koordinat RGB secara langsung.
- Q.Apakah sertifikat yang dihasilkan memiliki kekuatan hukum?
- Ini adalah bukti matematis yang dapat diandalkan dari kombinasi yang lolos di bawah formula W3C tetapi tidak menggantikan audit aksesibilitas pihak ketiga yang komprehensif.
Kasus Penggunaan
Validasi Desain Web
Verifikasi kontras saat desain untuk memastikan kepatuhan WCAG untuk halaman landing dan situs perusahaan.
Tinjauan UI Aplikasi Mobile
Periksa teks tombol dan label untuk keterbacaan oleh pengguna dengan gangguan penglihatan.
Kepatuhan Aksesibilitas
Audit situs untuk masalah kontras guna memenuhi persyaratan ADA, EN 301 549, atau WCAG secara global.
Presentasi
Verifikasi bahwa warna teks slide dan dokumen dapat dibaca dengan jelas oleh semua anggota audiens.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.