Pemeriksa Kontras – Contrast Checker

Pemeriksa Kontras ini mengaudit kontras warna WCAG & APCA untuk kepatuhan ADA — sebuah tes aksesibilitas warna untuk situs web mana…

✅ Apa yang akan Anda dapatkan dari Pemeriksa Kontras ini: - rasio kontras WCAG 2.2 dan APCA Lc, - elemen dengan masalah yang disorot di halaman, - aturan CSS yang menghasilkan warna, dilacak melalui peta sumber (jika tersedia), - alat pemilih warna bawaan dengan analisis kontras dan alternatif yang disarankan, - pratinjau langsung perbaikan, - ekspor perbaikan ke CSS (dengan komentar penunjuk sumber). 🔍 Dibangun sebagai pemeriksa kontras warna situs web yang berjalan melalui pseudo-states, shadow DOM, iframe same-origin, dan teks di atas gambar dan gradien — bukan hanya latar belakang datar. ⚠️ Izin debugger diperlukan. Cakupan Pemeriksa Kontras ini hanya mungkin melalui Protokol Chrome DevTools, yang memerlukan izin 'debugger'. Setelah terhubung, Chrome menampilkan infobar di semua tab dan tidak menyembunyikannya saat terputus. ⚡ Alur kerja yang sangat dioptimalkan: • Lihat semua elemen dengan masalah aksesibilitas warna yang disorot sekilas. • Pratinjau perubahan segera, dengan rasio kontras dan keputusan yang dihitung ulang. • Terapkan CSS kustom di tab Stylesheet; masalah yang terpengaruh ditandai dalam daftar. • Untuk memeriksa kontras warna secara manual, gunakan alat pemilih warna bawaan: klik kiri untuk mengatur foreground, klik kanan untuk background, dan rasio diperbarui secara instan. • Gunakan tab Pengecualian untuk menyembunyikan semua kecuali elemen yang Anda perbaiki. 📐 Kriteria di balik keputusan. Pemeriksa rasio kontras ini menguji aksesibilitas warna terhadap persyaratan WCAG dan APCA. APCA Lc dinilai terhadap ambang Bridge-PCA, yang lebih ketat daripada rasio WCAG yang sesuai — jadi lulus Bridge-PCA selalu menyiratkan lulus WCAG. 🔬 Apa itu APCA? APCA (Accessible Perceptual Contrast Algorithm) adalah model yang melacak bagaimana orang membaca teks di layar. Dua pasangan warna dengan rasio wcag yang sama dapat terlihat sangat berbeda, dan apca Lc (kontras luminansi) mereka mencerminkan hal itu: sepasang dapat lulus wcag tetapi terasa sulit dibaca. Pemeriksa aksesibilitas warna situs web ini menghitung kedua angka tersebut. 🚧 Batasan: 1. Seperti pemeriksa aksesibilitas situs web lainnya, ini memberikan estimasi terbaik, bukan sertifikat kepatuhan. 2. Cakupan hanya teks; pemeriksaan elemen non-teks (wcag 1.4.11) ada dalam roadmap. 3. Iframe lintas asal tidak dijelajahi. 4. Latar belakang dan animasi yang kompleks diambil sampelnya pada sejumlah titik spasial dan temporal yang terbatas; rasio sampel terburuk dilaporkan tetapi mungkin masih optimis; pengambil sampel juga dapat disesatkan oleh artefak rendering. 5. Situs yang sangat dinamis dapat menghasilkan masalah yang tidak relevan. 6. Pemeriksa kontras warna ini tidak menjalankan OCR pada gambar secara otomatis; uji gambar dengan teks yang bermakna melalui alat pemilih warna yang disertakan. 🔒 Privasi dan izin. ▸ Berjalan secara lokal; tidak ada data halaman web yang pernah meninggalkan mesin Anda. ▸ 'activeTab' saja: skrip analisis disuntikkan saat Anda mengklik ikon toolbar. ▸ Izin 'debugger' diperlukan untuk menjelajahi Shadow DOM dan iframe, melacak sumber CSS, dan mengambil sampel latar belakang yang kompleks. 🧮 Detail akurasi. Teks semi-transparan dan opasitas nenek moyang ditangani dengan benar: foreground disusun di atas latar belakang aslinya sebelum luminansi diukur, sehingga rasio yang dilaporkan cocok dengan apa yang sebenarnya dilihat pengguna. Fungsi warna gamut lebar — oklch, lab, lch, color(display-p3) — juga didukung, dibatasi ke sRGB saat keluar dari gamut. 🎨 Teks di atas gambar dan gradien. Tidak seperti sebagian besar alat serupa, yang ini tidak menyerah pada latar belakang non-datar atau mempercayai apa yang dilaporkan oleh 'getComputedStyle' / 'CSS.getBackgroundColors'. Ini mengikuti urutan cat browser untuk menyusun latar belakang yang sebenarnya — opasitas, mode campuran, gradien linier, backdrop-filter — dan ketika itu tidak cukup, alat kontras warna ini mengambil sampel piksel yang dirender di lokasi teks. ❓ Tanya Jawab 📌 Mengapa pasangan warna yang sama kadang-kadang mendapatkan keputusan yang berbeda di bawah WCAG dan APCA? ↳ WCAG mengukur luminansi; APCA mengukur kontras perseptual. Sepasang yang lulus 4.5:1 masih dapat gagal pada ambang Bridge-PCA Lc — model yang lebih ketat. 📌 Apakah APCA menggantikan WCAG? ↳ Tidak — APCA bukan pengganti, tetapi pendapat kedua yang berguna. Pemeriksa kontras ini melaporkan keduanya. 📌 Bisakah saya memindai file lokal atau server pengembangan saya dengan pemeriksa aksesibilitas ini? ↳ Ya. Aktifkan "Izinkan akses ke URL file" di pengaturan ekstensi. Buka URL file:// atau localhost dan klik ikon toolbar. Hanya chrome://, Chrome Web Store, dan skema terbatas lainnya yang dilewati. 📌 Apakah alat ini mengesahkan kepatuhan ADA? ↳ Tidak. Ini hanya memeriksa kontras warna — satu aspek dari aksesibilitas. Kepatuhan ADA adalah penentuan hukum yang mencakup banyak standar dan kriteria (semantik, akses keyboard, teks alternatif, keterangan, dan lainnya) dan harus dinilai oleh profesional yang berkualitas.