Pemeriksa Kontras Warna (WCAG AA/AAA)

• Perhitungan Kontras WCAG Instan: Pemeriksa kontras warna menghitung rasio kontras WCAG dan semua hasil lulus/gagal pada setiap penekanan tombol. Tidak ada tombol yang perlu diklik: masukkan warna Anda dan lihat hasilnya seketika.
• Aman & 100% Privat: Semua perhitungan kontras berjalan sepenuhnya di browser Anda menggunakan rumus luminansi relatif WCAG 2.1. Tidak ada data warna yang pernah dikirim ke server mana pun.
• Cakupan WCAG 2.1 Lengkap: AA & AAA: Memeriksa semua kriteria WCAG 2.1 yang relevan: AA dan AAA untuk teks normal, AA dan AAA untuk teks besar, serta AA untuk komponen UI (SC 1.4.11). Termasuk pratinjau langsung yang menunjukkan tampilan warna Anda pada setiap ukuran teks.
• 100% Gratis - Tanpa Pendaftaran: Sepenuhnya gratis, tanpa akun, tanpa tingkat premium, tanpa batas penggunaan, dan tanpa iklan yang menghalangi antarmuka. Periksa kontras warna sebanyak yang Anda perlukan.

• Pengembangan Web & Desain UI: Pengembang front-end dan desainer UI menggunakan pemeriksa kontras warna untuk memastikan kombinasi warna teks dan latar memenuhi persyaratan WCAG AA sebelum dirilis. Menemukan kegagalan kontras lebih awal mencegah perbaikan aksesibilitas yang mahal.
• Validasi Warna Merek: Desainer menggunakan pemeriksa kontras warna untuk memvalidasi bahwa warna merek memenuhi standar aksesibilitas saat digunakan sebagai teks di atas latar. Banyak palet merek gagal WCAG AA, dan pemeriksa ini mengidentifikasi kombinasi yang aman.
• E-commerce & Halaman Produk: Tim e-commerce menggunakan pemeriksa kontras warna untuk memastikan deskripsi produk, harga, dan tombol ajakan bertindak memenuhi persyaratan kontras WCAG AA, sehingga meningkatkan keterbacaan bagi semua pengguna termasuk yang memiliki penglihatan rendah.
• Desain Dokumen & Presentasi: Kreator konten dan desainer presentasi menggunakan pemeriksa kontras warna untuk memastikan teks slide, label bagan, dan teks infografis terbaca di atas latar yang dipilih.
• Desain Aplikasi Seluler: Desainer aplikasi seluler menggunakan pemeriksa kontras warna untuk memastikan elemen UI memenuhi persyaratan WCAG AA di tema terang maupun gelap, hal yang penting bagi pengguna dengan gangguan penglihatan pada layar kecil.
• Audit & Kepatuhan Aksesibilitas: Konsultan aksesibilitas dan tim QA menggunakan pemeriksa kontras warna sebagai alat cepat tahap awal selama audit WCAG. Alat ini mengidentifikasi kegagalan kontras yang perlu diperbaiki sebelum pengujian formal dengan teknologi bantu.

Kontras warna WCAG mengacu pada rasio kontras minimum antara warna latar depan (teks) dan latar belakang yang diwajibkan oleh Pedoman Aksesibilitas Konten Web (WCAG) agar konten dapat dibaca oleh orang dengan penglihatan rendah atau defisiensi warna. Rasio kontras dihitung menggunakan luminansi relatif setiap warna, sebuah nilai yang diturunkan dari nilai kanal sRGB yang dilinearisasi. Rasionya berkisar dari 1:1 (tanpa kontras, warna identik) hingga 21:1 (kontras maksimum, hitam di atas putih). Pemeriksa kontras warna berbasis browser kami menghitung rasio ini secara instan dan mengevaluasinya terhadap semua kriteria keberhasilan WCAG 2.1 yang relevan.

1. Masukkan Warna Anda: Ketik nilai HEX (misalnya #0066cc ) atau nilai RGB (misalnya rgb(0, 102, 204) ) ke kolom latar depan dan latar belakang, atau gunakan pemilih warna bawaan. Anda juga dapat memilih pasangan warna prasetel untuk memulai dengan cepat.
2. Perhitungan Instan: Pemeriksa kontras warna menghitung luminansi relatif WCAG 2.1 untuk setiap warna dan menurunkan rasio kontrasnya. Semua perhitungan berjalan secara lokal di browser Anda: tidak ada data warna yang pernah dikirim ke server.
3. Tinjau Hasilnya: Tabel hasil menampilkan status lulus/gagal untuk semua kriteria WCAG 2.1 yang relevan. Pratinjau langsung menunjukkan tampilan warna Anda pada teks normal, teks besar, dan ukuran komponen UI.

• AA - Teks Normal (4,5:1): Rasio kontras minimum untuk badan teks, label, dan keterangan yang lebih kecil dari 18 pt (24 px) normal atau 14 pt (18,67 px) tebal. Diperlukan untuk kepatuhan WCAG 2.1 Level AA.
• AA - Teks Besar (3:1): Rasio kontras minimum untuk teks 18 pt (24 px) atau lebih dengan ketebalan normal, atau 14 pt (18,67 px) atau lebih tebal. Judul biasanya termasuk teks besar.
• AA - Komponen UI (3:1): Rasio kontras minimum untuk penyajian visual komponen UI (tombol, kolom formulir, indikator fokus) dan objek grafis. Didefinisikan dalam WCAG 2.1 SC 1.4.11.
• AAA - Lanjutan (7:1 / 4,5:1): Persyaratan kontras lanjutan untuk kepatuhan AAA: 7:1 untuk teks normal dan 4,5:1 untuk teks besar. AAA adalah tingkat tertinggi dan tidak diwajibkan untuk semua konten.

Pemeriksa kontras warna mengevaluasi rasio kontras terhadap ambang matematis WCAG 2.1. Lulus pemeriksaan rasio kontras tidak menjamin aksesibilitas penuh: kepatuhan WCAG juga memerlukan HTML semantik yang benar, navigasi keyboard, kompatibilitas pembaca layar, dan faktor non-warna lainnya. Selain itu, rumus kontras WCAG tidak memperhitungkan semua jenis defisiensi penglihatan warna. Validasi aksesibilitas penuh memerlukan pengujian manual dengan teknologi bantu (pembaca layar, perangkat lunak pembesar) dan tinjauan ahli aksesibilitas.