Pemeriksa kontras WCAG

Tentang Pemeriksa kontras WCAG

Alat pemeriksa kontras WCAG online gratis kami membantu desainer, pengembang, dan profesional aksesibilitas memastikan kombinasi warna teks dan latar belakang memenuhi persyaratan kontras Web Content Accessibility Guidelines (WCAG) 2.1. Kontras warna yang aksesibel memastikan semua pengguna, termasuk yang memiliki penglihatan lemah atau gangguan penglihatan warna, dapat membaca dan berinteraksi dengan konten web Anda.

Alat ini menghitung rasio kontras antara dua warna mana pun menggunakan rumus luminans relatif resmi W3C dan langsung menampilkan apakah kombinasi tersebut lulus atau gagal pada tingkat kepatuhan WCAG AA dan WCAG AAA untuk teks normal maupun teks besar. Semua perhitungan dilakukan secara real time langsung di browser Anda tanpa data yang dikirim ke server mana pun.

Baik Anda sedang melakukan audit aksesibilitas, merancang antarmuka baru, atau meninjau konten yang ada untuk kepatuhan, pemeriksa kontras ini memberi Anda hasil yang presisi dan sesuai standar, lengkap dengan pratinjau teks langsung dan saran praktis untuk memperbaiki kombinasi warna yang gagal.

Memahami persyaratan kontras WCAG

Standar Web Content Accessibility Guidelines (WCAG) adalah standar aksesibilitas web yang diakui secara internasional, diterbitkan oleh World Wide Web Consortium (W3C). WCAG menetapkan ambang rasio kontras tertentu untuk memastikan keterbacaan teks bagi pengguna dengan beragam tingkat kemampuan penglihatan.

• WCAG tingkat AA (teks normal): Rasio kontras minimum 4.5:1 diperlukan. Ini berlaku untuk teks isi, paragraf, dan teks apa pun yang lebih kecil dari 18pt (24px) atau 14pt tebal (18.66px tebal).
• WCAG tingkat AA (teks besar): Rasio kontras minimum 3:1 diperlukan. Teks besar didefinisikan sebagai teks dengan ukuran minimal 18pt (24px) atau 14pt tebal (18.66px tebal).
• WCAG tingkat AAA (teks normal): Rasio kontras minimum 7:1 diperlukan. Ini adalah tingkat kesesuaian aksesibilitas tertinggi untuk teks berukuran normal.
• WCAG tingkat AAA (teks besar): Rasio kontras minimum 4.5:1 diperlukan untuk teks besar pada tingkat kesesuaian AAA.

Memenuhi setidaknya WCAG AA dianggap sebagai standar dasar desain web yang aksesibel dan diwajibkan oleh banyak kerangka hukum di seluruh dunia, termasuk Americans with Disabilities Act (ADA), European Accessibility Act, dan Section 508 dari Rehabilitation Act. WCAG AAA memberikan tingkat aksesibilitas yang lebih tinggi dan direkomendasikan jika memungkinkan.

Cara rasio kontras dihitung

Rasio kontras antara dua warna ditentukan memakai luminans relatif masing-masing warna, sebagaimana didefinisikan dalam spesifikasi WCAG 2.1. Luminans relatif mengukur kecerahan warna yang dipersepsikan pada skala dari 0 (hitam paling gelap) hingga 1 (putih paling terang).

Perhitungannya melalui tiga langkah. Pertama, setiap kanal warna (merah, hijau, biru) diubah dari nilai sRGB 8-bit (0-255) menjadi nilai sRGB ternormalisasi (0-1) dengan membaginya dengan 255. Kedua, setiap nilai ternormalisasi menjalani koreksi gamma: jika nilainya 0.04045 atau kurang, nilai dibagi 12.92; jika tidak, nilai diubah dengan rumus ((value + 0.055) / 1.055) ^ 2.4. Ketiga, nilai kanal yang telah dilinearkan digabungkan dengan koefisien berbobot: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

Rasio kontras akhir dihitung sebagai (L1 + 0.05) / (L2 + 0.05), dengan L1 adalah luminans relatif warna yang lebih terang dan L2 adalah luminans relatif warna yang lebih gelap. Hasilnya adalah nilai dari 1:1 (tanpa kontras, warna identik) hingga 21:1 (kontras maksimum, hitam murni di atas putih murni).

Fitur utama

• Perhitungan rasio kontras real time dengan rumus luminans WCAG 2.1 resmi dari W3C
• Indikator lulus/gagal untuk tingkat kesesuaian WCAG AA dan AAA pada teks normal maupun teks besar
• Pemilih warna interaktif dan input hex untuk warna latar depan maupun latar belakang
• Tukar warna dengan satu klik untuk menguji kombinasi warna yang dibalik
• Sepuluh kombinasi warna preset cepat, termasuk pasangan aksesibel yang umum
• Pratinjau teks langsung yang menunjukkan tampilan warna Anda pada ukuran teks normal dan besar
• Saran otomatis warna latar depan terdekat yang lulus saat kombinasi saat ini gagal
• Detail luminans teknis untuk warna latar depan maupun latar belakang
• Dukungan penuh mode gelap agar nyaman digunakan di lingkungan apa pun
• Semua pemrosesan berjalan secara lokal di browser tanpa data yang dikirim ke server eksternal

Cara menggunakan Pemeriksa kontras WCAG

1. Atur warna latar depan: Klik kotak pemilih warna atau ketik nilai hex (misalnya #1A1A2E) ke kolom teks untuk mengatur warna teks atau latar depan Anda.
2. Atur warna latar belakang: Dengan cara yang sama, gunakan pemilih warna atau input hex untuk mengatur warna latar belakang di balik teks.
3. Tinjau hasil: Rasio kontras dan hasil lulus/gagal untuk keempat tingkat WCAG ditampilkan seketika saat Anda mengubah warna.
4. Periksa pratinjau langsung: Gulir ke bawah untuk melihat teks sebenarnya dengan kombinasi warna pilihan Anda pada ukuran normal maupun besar.
5. Terapkan saran: Jika kombinasi gagal pada WCAG AA, warna latar depan yang disarankan akan ditampilkan. Klik Terapkan untuk memakainya.
6. Coba preset: Gunakan Preset Cepat untuk menguji kombinasi warna terkenal yang aksesibel maupun yang tidak aksesibel.
7. Tukar warna: Klik tombol Tukar Warna untuk membalik pilihan warna latar depan dan latar belakang Anda.

Mengapa kontras warna penting untuk aksesibilitas

Sekitar 1 dari 12 pria dan 1 dari 200 wanita di seluruh dunia memiliki bentuk gangguan penglihatan warna. Selain itu, jutaan orang mengalami penglihatan lemah, perubahan penglihatan akibat usia, atau gangguan situasional seperti silau layar. Kontras warna yang memadai adalah salah satu cara paling berdampak dan paling mudah untuk membuat konten web aksesibel bagi semua pengguna tersebut.

Kontras yang buruk antara teks dan latar belakang adalah salah satu masalah aksesibilitas yang paling sering ditemukan dalam audit web. Dengan memakai pemeriksa kontras WCAG selama proses desain dan pengembangan, tim dapat menemukan dan memperbaiki masalah kontras sebelum sampai ke produksi, mengurangi biaya perbaikan dan memastikan kepatuhan terhadap regulasi aksesibilitas sejak awal.

Kontras warna yang baik juga bermanfaat bagi pengguna tanpa disabilitas. Kontras ini meningkatkan keterbacaan di bawah sinar matahari terik, pada layar berkualitas rendah, dan di lingkungan yang penuh gangguan. Desain aksesibel adalah desain inklusif yang menciptakan pengalaman lebih baik bagi semua orang.

Pertanyaan yang sering diajukan