Penyemak Kontras Warna
Penyemak kontras warna percuma: uji sama ada warna teks dan latar memenuhi WCAG 2.2 AA dan AAA, lihat nisbah kontras dan dapatkan warna terdekat yang lulus.
Ini ialah teks biasa, sebesar saiz perenggan.
Teks besar
Butang| AA | AAA | |
|---|---|---|
| Teks biasa | ||
| Teks besar (24 px, atau 18.7 px tebal) | ||
| Ikon dan sempadan antara muka | — |
Apa yang ia lakukan
Penyemak ini mengukur kontras antara warna teks dan latar belakangnya dengan formula garis panduan kebolehcapaian WCAG 2.2, yang digunakan dalam banyak undang-undang kebolehcapaian. Ia memaparkan nisbah kontras, dari 1:1 (tiada kontras) hingga 21:1 (hitam di atas putih), dan sama ada pasangan itu lulus tahap AA dan AAA untuk teks biasa, teks besar dan komponen antara muka seperti ikon dan sempadan. Apabila pasangan gagal, ia mencadangkan warna terdekat dengan rona yang sama yang lulus.
Cara menggunakannya
- Masukkan atau pilih warna teks dan warna latar belakang.
- Baca nisbah kontras serta keputusan AA dan AAA, dan semak pratonton langsung.
- Jika gagal, tekan Guna pada warna yang dicadangkan, kemudian salin pautan untuk berkongsi keputusan.
Soalan lazim
Berapakah nisbah kontras yang saya perlukan?
Tahap AA, sasaran undang-undang yang biasa, memerlukan 4.5:1 untuk teks biasa dan 3:1 untuk teks besar serta ikon dan sempadan antara muka. Tahap AAA memerlukan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar.
Apakah yang dikira sebagai teks besar?
Teks bersaiz sekurang-kurangnya 24 piksel CSS (18 mata), atau sekurang-kurangnya kira-kira 18.7 piksel CSS (14 mata) apabila tebal. Tajuk selalunya besar; teks kandungan biasanya tidak.
Mengapa #777777 di atas putih gagal?
Nisbahnya ialah 4.47:1, sedikit di bawah 4.5:1 yang diperlukan untuk teks biasa. Nisbah tidak dibundarkan ke atas, jadi kelabu yang sedikit lebih gelap seperti #767676 (4.54:1) ialah kelabu paling cerah yang lulus di atas putih.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast