Pemeriksa Kontras – Contrast Checker

Pemeriksa Kontras ini mengaudit kontras warna WCAG & APCA untuk pematuhan ADA — ujian aksesibiliti warna untuk mana-mana laman web.

✅ Apa yang anda akan dapat daripada pemeriksa kontras ini: - Nisbah kontras WCAG 2.2 dan APCA Lc, - elemen dengan isu yang disorot di halaman, - peraturan CSS yang menghasilkan warna, dikesan melalui peta sumber (jika ada), - alat pemilih warna terbina dalam dengan penganalisis kontras dan alternatif yang dicadangkan, - pratonton langsung pembetulan, - eksport pembetulan ke CSS (dengan komen penjejakan sumber). 🔍 Dibina sebagai pemeriksa kontras warna laman web yang melibatkan pseudo-states, shadow DOM, iframes asal yang sama, dan teks di atas imej dan gradien — bukan hanya latar belakang rata. ⚠️ Kebenaran debugger diperlukan. Liputan pemeriksa kontras ini hanya mungkin melalui Protokol Chrome DevTools, yang memerlukan kebenaran 'debugger'. Setelah disambungkan, Chrome menunjukkan bar maklumat di seluruh tab dan tidak menyembunyikannya semasa pemutusan. ⚡ Aliran kerja yang sangat dioptimumkan: • Lihat semua elemen dengan isu aksesibiliti warna disorot dengan cepat. • Pratonton perubahan dengan segera, dengan nisbah kontras dan keputusan yang dikira semula. • Terapkan CSS khusus pada tab Stylesheet; isu yang terjejas ditandakan dalam senarai. • Untuk memeriksa kontras warna secara manual, gunakan alat pemilih warna terbina dalam: klik kiri untuk menetapkan latar depan, klik kanan untuk latar belakang, dan nisbah dikemas kini serta-merta. • Gunakan tab Pengecualian untuk menyembunyikan segala-galanya kecuali elemen yang anda betulkan. 📐 Kriteria di sebalik keputusan. Pemeriksa nisbah kontras ini menguji aksesibiliti warna terhadap keperluan WCAG dan APCA. APCA Lc dinilai berdasarkan ambang Bridge-PCA, yang lebih ketat daripada nisbah WCAG yang sepadan — jadi lulus Bridge-PCA sentiasa menunjukkan lulus WCAG. 🔬 Apa itu APCA? APCA (Algoritma Kontras Persepsi Aksesible) adalah model yang mengesan bagaimana orang membaca teks di skrin. Dua pasangan warna dengan nisbah wcag yang sama boleh kelihatan berbeza dengan ketara, dan apca Lc mereka (kontras luminans) mencerminkan itu: sepasang boleh lulus wcag tetapi terasa sukar untuk dibaca. Pemeriksa aksesibiliti warna laman web ini mengira kedua-dua nombor. 🚧 Had: 1. Seperti pemeriksa aksesibiliti laman web yang lain, ini memberikan anggaran usaha terbaik, bukan sijil pematuhan. 2. Liputan adalah teks sahaja; pemeriksaan elemen bukan teks (wcag 1.4.11) ada dalam pelan. 3. Iframes silang asal tidak disusuri. 4. Latar belakang dan animasi yang kompleks diambil sampel pada bilangan titik spatial dan temporal yang terhad; nisbah sampel terburuk dilaporkan tetapi mungkin masih optimis; pengambil sampel juga boleh disesatkan oleh artefak rendering. 5. Laman yang sangat dinamik mungkin menghasilkan isu yang tidak tepat. 6. Pemeriksa kontras warna ini tidak menjalankan OCR pada imej secara automatik; uji imej dengan teks yang bermakna melalui alat pemilih warna yang disertakan. 🔒 Privasi dan kebenaran. ▸ Berjalan secara tempatan; tiada data laman web yang pernah meninggalkan mesin anda. ▸ 'activeTab' sahaja: skrip analisis disuntik apabila anda mengklik ikon toolbar. ▸ Kebenaran 'debugger' diperlukan untuk menyusuri Shadow DOM dan iframes, menjejak sumber CSS, dan mengambil sampel latar belakang yang kompleks. 🧮 Butiran ketepatan. Teks separa telus dan opasiti nenek moyang ditangani dengan betul: latar depan disusun di atas latar belakang sebenar sebelum luminans diukur, jadi nisbah yang dilaporkan sepadan dengan apa yang dilihat oleh pengguna. Fungsi warna gamut lebar — oklch, lab, lch, color(display-p3) — juga disokong, dibatasi kepada sRGB apabila di luar gamut. 🎨 Teks di atas imej dan gradien. Tidak seperti kebanyakan alat serupa, yang ini tidak menyerah pada latar belakang bukan rata atau mempercayai apa yang dilaporkan oleh 'getComputedStyle' / 'CSS.getBackgroundColors'. Ia menyusuri urutan lukisan pelayar untuk menyusun latar belakang sebenar — opasiti, mod campuran, gradien linear, penapis latar belakang — dan apabila itu tidak mencukupi, alat kontras warna ini mengambil sampel piksel yang dirender di lokasi teks. ❓ Soalan & Jawapan 📌 Mengapa pasangan warna yang sama kadang-kadang mendapat keputusan yang berbeza di bawah WCAG dan APCA? ↳ WCAG mengukur luminans; APCA mengukur kontras persepsi. Sepasang yang lulus 4.5:1 masih boleh gagal ambang Lc Bridge-PCA — model yang lebih ketat. 📌 Adakah APCA menggantikan WCAG? ↳ Tidak — APCA bukan pengganti, tetapi pendapat kedua yang berguna. Pemeriksa kontras ini melaporkan kedua-duanya. 📌 Bolehkah saya mengimbas fail tempatan atau pelayan dev saya dengan pemeriksa aksesibiliti ini? ↳ Ya. Aktifkan "Benarkan akses ke URL fail" dalam tetapan sambungan. Buka URL file:// atau localhost dan klik ikon toolbar. Hanya chrome://, Chrome Web Store, dan skema terhad lain yang diabaikan. 📌 Adakah alat ini mengesahkan pematuhan ADA? ↳ Tidak. Ia hanya memeriksa kontras warna — satu aspek aksesibiliti. Pematuhan ADA adalah penentuan undang-undang yang merangkumi banyak standard dan kriteria (semantik, akses papan kekunci, teks alternatif, kapsyen, dan banyak lagi) dan harus dinilai oleh profesional yang berkelayakan.