Penganalisis WCAG
Analisis seluruh palet warna Anda untuk kepatuhan aksesibilitas WCAG level AA dan AAA. Lihat rasio kontras tiap pasangan HEX dan perbaiki yang gagal dengan mudah.
Palet yang dianalisis
Matriks kontras
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Keterangan WCAG 2.1
Level AAA
Rasio ≥ 7:1 - Sangat baik
Level AA
Rasio ≥ 4,5:1 - Standar
AA besar
Rasio ≥ 3:1 - Teks besar
Gagal
Rasio < 3:1 - Tidak memenuhi
Analisis seluruh palet warna Anda untuk kepatuhan aksesibilitas WCAG level AA dan AAA. Lihat rasio kontras tiap pasangan HEX dan perbaiki yang gagal dengan mudah.
Penganalisis WCAG hanya menampilkan kontrol dan hasil yang sesuai dengan fungsinya. Opsi yang tersedia bergantung pada alat dan input.
Format yang didukung
Cara kerjanya
Langkah 1
Buka Penganalisis WCAG dan siapkan input yang diminta antarmuka
Langkah 2
Sesuaikan kontrol yang terlihat untuk hasil yang Anda perlukan
Langkah 3
Periksa hasil sebelum menyalin, mengekspor, atau menggunakannya kembali
Kesalahan umum yang harus dihindari
- Jangan anggap format atau opsi didukung jika tidak muncul di antarmuka.
- Periksa nilai sebelum digunakan dalam identitas merek, antarmuka, atau berkas produksi.
- Jika hasil digunakan untuk teks atau UI, periksa juga kontrasnya.
Tips pro
- Simpan nilai sumber bersama hasil ketika membandingkan variasi.
- Gunakan format yang benar-benar ditampilkan alat daripada menebak konversi.
- Di ponsel dan tablet, biarkan teks dan kontrol membungkus ke beberapa baris.
Pemrosesan data
Pemrosesan data bergantung pada fitur yang digunakan. Persetujuan, analitik, dan fitur akun situs terpisah dari operasi warna.
Apa yang dilakukan alat ini
Analisis seluruh palet warna Anda untuk kepatuhan aksesibilitas WCAG level AA dan AAA. Lihat rasio kontras tiap pasangan HEX dan perbaiki yang gagal dengan mudah. Penganalisis WCAG tetap berfokus pada tugas tersebut dan tidak mengasumsikan fitur yang tidak ditampilkan antarmuka. Gunakan kontrol yang tersedia untuk mendapatkan hasil yang Anda perlukan, lalu periksa nilai yang ditampilkan sebelum memindahkannya ke alat lain, stylesheet, berkas desain, atau dokumen.
Menyiapkan input yang sesuai
Mulailah dengan input yang diminta Penganalisis WCAG: warna, nilai, gambar, atau pengaturan tergantung layar. Format yang tercantum pada halaman ini adalah Palette, HEX, CSS Variables, JSON. Jika format atau opsi tidak muncul pada antarmuka, jangan anggap format tersebut didukung oleh fungsi khusus ini.
Membaca dan memeriksa hasil
Baca hasil dalam konteks operasi yang Anda lakukan. Bandingkan dengan nilai sumber dan tinjau pengaturan yang memengaruhi perhitungan. Untuk pekerjaan visual penting, periksa hasil juga pada antarmuka nyata tempat hasil akan digunakan, bukan hanya dari kode.
Penggunaan di ponsel dan tablet
Penganalisis WCAG menggunakan tata letak responsif situs. Judul, subjudul, breadcrumbs, dan kontrol dapat membungkus pada layar sempit agar terjemahan panjang tidak terpotong. Tetap periksa hasil akhir pada perangkat dan konteks tempat Anda benar-benar akan menggunakannya.
Menggunakan kembali hasil dalam proyek
Setelah memeriksa hasil, gunakan hanya tindakan yang benar-benar ditawarkan Penganalisis WCAG, seperti menyalin atau mengekspor bila tersedia. Simpan nilai sumber jika pengaturan perlu diulang dan untuk warna UI, dokumentasikan juga peran warna serta persyaratan kontrasnya.
Alat terkait
Panduan dan tutorial
Pelajari cara menggunakan alat kami dengan panduan terperinci.
wcag-analyzer: panduan praktis accessibility
Panduan lokal untuk menggunakan wcag-analyzer, memahami praktik terbaik accessibility, dan menghindari kesalahan umum.
wcag-analyzer: panduan praktis accessibility
Panduan lokal untuk menggunakan wcag-analyzer, memahami praktik terbaik accessibility, dan menghindari kesalahan umum.
wcag-analyzer: panduan praktis export
Panduan lokal untuk menggunakan wcag-analyzer, memahami praktik terbaik export, dan menghindari kesalahan umum.
Pertanyaan yang sering diajukan
Pelajari cara menggunakan alat kami dengan panduan terperinci.