Penganalisis WCAG
Analisis seluruh palet warna anda untuk pematuhan kebolehcapaian WCAG tahap AA dan AAA. Lihat nisbah kontras setiap pasangan HEX dan betulkan yang gagal mudah.
Palet untuk 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 | — |
Petunjuk WCAG 2.1
Tahap AAA
Nisbah ≥ 7:1 - Cemerlang
Tahap AA
Nisbah ≥ 4.5:1 - Piawai
AA besar
Nisbah ≥ 3:1 - Teks besar
Gagal
Nisbah < 3:1 - Tidak mematuhi
Analisis seluruh palet warna anda untuk pematuhan kebolehcapaian WCAG tahap AA dan AAA. Lihat nisbah kontras setiap pasangan HEX dan betulkan yang gagal mudah.
Penganalisis WCAG hanya memaparkan kawalan dan hasil yang berkaitan dengan fungsinya. Pilihan yang tersedia bergantung pada alat dan input.
Format yang disokong
Cara ia berfungsi
Langkah 1
Buka Penganalisis WCAG dan sediakan input yang diminta oleh antara muka
Langkah 2
Laraskan kawalan yang kelihatan mengikut hasil yang diperlukan
Langkah 3
Semak hasil sebelum menyalin, mengeksport atau menggunakannya semula
Kesilapan biasa yang perlu dielakkan
- Jangan anggap format atau pilihan disokong jika tidak dipaparkan dalam antara muka.
- Semak nilai sebelum digunakan dalam identiti jenama, antara muka atau fail pengeluaran.
- Jika hasil digunakan untuk teks atau UI, semak juga kontras.
Tip pro
- Simpan nilai sumber bersama hasil apabila membandingkan variasi.
- Gunakan format yang benar-benar dipaparkan oleh alat dan elakkan meneka penukaran.
- Pada telefon dan tablet, benarkan teks dan kawalan membalut ke beberapa baris.
Pemprosesan data
Pemprosesan data bergantung pada fungsi yang digunakan. Persetujuan, analitik dan fungsi akaun laman adalah berasingan daripada operasi warna.
Fungsi alat ini
Analisis seluruh palet warna anda untuk pematuhan kebolehcapaian WCAG tahap AA dan AAA. Lihat nisbah kontras setiap pasangan HEX dan betulkan yang gagal mudah. Penganalisis WCAG kekal fokus pada tugas ini dan tidak menganggap fungsi yang tidak dipaparkan dalam antara muka. Gunakan kawalan yang tersedia untuk mendapatkan hasil yang diperlukan, kemudian semak nilai yang dipaparkan sebelum memindahkannya ke alat lain, stylesheet, fail reka bentuk atau dokumen.
Sediakan input yang sesuai
Mulakan dengan input yang diminta oleh Penganalisis WCAG: warna, nilai, imej atau tetapan mengikut skrin. Format yang disenaraikan pada halaman ini ialah Palette, HEX, CSS Variables, JSON. Jika format atau pilihan tidak muncul dalam antara muka, jangan anggap ia disokong oleh fungsi khusus ini.
Baca dan semak hasil
Baca hasil dalam konteks operasi yang dilakukan. Bandingkan dengan nilai sumber dan semak tetapan yang mempengaruhi pengiraan. Untuk kerja visual penting, periksa hasil juga dalam antara muka sebenar tempat ia akan digunakan dan jangan hanya bergantung pada kod.
Penggunaan pada telefon dan tablet
Penganalisis WCAG menggunakan susun atur responsif laman. Tajuk, subtajuk, breadcrumbs dan kawalan boleh membalut pada skrin sempit supaya terjemahan panjang tidak terpotong. Walau begitu, semak hasil akhir pada peranti dan konteks sebenar tempat anda akan menggunakannya.
Gunakan semula hasil dalam projek
Selepas menyemak hasil, gunakan hanya tindakan yang benar-benar ditawarkan oleh Penganalisis WCAG, seperti salin atau eksport apabila tersedia. Simpan nilai sumber jika tetapan perlu dihasilkan semula dan untuk warna UI, dokumentasikan juga peranan warna serta keperluan kontras.
Alat berkaitan
Panduan dan tutorial
Ketahui cara menggunakan alatan kami dengan panduan terperinci kami.
wcag-analyzer: panduan praktikal accessibility
Panduan setempat untuk menggunakan wcag-analyzer, memahami amalan terbaik accessibility dan mengelakkan kesilapan biasa.
wcag-analyzer: panduan praktikal accessibility
Panduan setempat untuk menggunakan wcag-analyzer, memahami amalan terbaik accessibility dan mengelakkan kesilapan biasa.
wcag-analyzer: panduan praktikal export
Panduan setempat untuk menggunakan wcag-analyzer, memahami amalan terbaik export dan mengelakkan kesilapan biasa.
Soalan lazim
Ketahui cara menggunakan alatan kami dengan panduan terperinci kami.