Pemeriksa Kontras Warna
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the Accessibility Tester uses, filtered to just contrast findings.
Pemeriksaan dijalankan dari server kami; kami mengambil URL yang Anda masukkan dan tidak menyimpan hasilnya. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Penghitung hasil anonim per proses dapat digunakan untuk riset agregat; URL, domain, IP, dan pengenal tidak pernah disertakan, dan statistik tidak dirilis jika jumlah proses kurang dari 100.
Berjalan sepenuhnya di browser Anda—tidak ada yang Anda tempel yang diunggah atau disimpan. Penghitung hasil anonim per proses dapat digunakan untuk riset agregat; URL, domain, IP, dan pengenal tidak pernah disertakan, dan statistik tidak dirilis jika jumlah proses kurang dari 100.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Paspor situs Konteks lokal untuk situs tersimpan ini
Data lokal
Target tersimpan, daftar bernama, dan ringkasan pemeriksaan terbaru hanya tersimpan di browser ini.
Nilai alat ini
Tentang alat ini
Periksa URL's dirender contrast
Melakukan ini buktikan my halaman adalah accessible?
URL
Fitur
- Periksa URL
- Periksa contrast
- Dalam mode tempel, data tetap berada di browser. Tempel properti khusus CSS, token nama/nilai bergaya Tailwind, atau daftar warna hex. Hanya mode URL yang mengirim data ke server, dan yang dikirim hanyalah alamat halaman publik yang Anda masukkan, bukan paletnya.
- Ditempel colors berikan Anda tepat math pada pair Anda jenis. URL mode memuat nyata halaman di metered headless browser dan membaca setiap element's sebenarnya computed color dan background setelah CSS cascade, inheritance, opacity, dan browser defaults adalah resolved — hanya way untuk dapatkan genuine contrast putusan untuk langsung halaman, since statis-HTML color guess dapat menjadi salah.
- WCAG AA memerlukan 4.5:1 untuk normal teks dan 3:1 untuk large teks dan non-teks UI components. AAA memerlukan 7:1 untuk normal teks dan 4.5:1 untuk large teks.
Cara kerja
Bagaimana adalah URL mode berbeda dari pasting colors? Tempel CSS/colors Periksa WCAG 2.2 color contrast, temukan nearest passing foreground colors, dan audit CSS color tokens di Anda browser. Gratis, tanpa pendaftaran. Bandingkan foreground dan background colors terhadap WCAG 2.2 AA dan AAA, dapatkan closest practical hex alternatives yang lulus, atau periksa langsung URL's nyata dirender contrast.
Batasan
- Di mana melakukan my palette go?
- Memuat halaman di metered headless browser dan berjalan axe-core's color-contrast aturan terhadap nyata computed styles — resolved foreground, background, opacity, inherited color, dan CSS variables setelah cascade, tidak statis-HTML color guess. Ini adalah sama Browser-Perenderan pipeline Penguji menggunakan, filtered untuk hanya contrast temuan.
- Tidak. Ini memeriksa color pairs, tidak typography, focus keadaan, images dari teks, atau (di tempel mode) nyata dirender backgrounds. Treat ini sebagai desain-waktu periksa dan uji finished interface terlalu.
- Apa contrast ratio I perlu?
Pertanyaan umum
Berapa rasio kontras yang saya perlukan?
WCAG AA mewajibkan 4,5:1 untuk teks wajar dan 3:1 untuk teks besar serta komponen UI nonteks. AAA mewajibkan 7:1 untuk teks wajar dan 4,5:1 untuk teks besar.
Apakah ini membuktikan halaman saya dapat diakses?
Tidak. Alat memeriksa pasangan warna, bukan tipografi, status fokus, gambar berisi teks, atau dalam modus tempel, latar belakang hasil render nyata. Gunakan sebagai pemeriksaan saat desain dan uji juga antarmuka akhir.
Ke mana palet saya dikirim?
Dalam modus tempel, palet tetap di peramban; Anda dapat menempel properti khusus CSS, unit nama/nilai bergaya Tailwind, atau daftar warna heksadesimal. Hanya modus URL yang mengirim sesuatu ke server, yaitu alamat halaman publik yang Anda masukkan, bukan palet.
Apa perbedaan modus URL dengan menempel warna?
Warna yang ditempel memberi perhitungan persis untuk pasangan yang Anda masukkan. modus URL memuat halaman nyata dalam peramban tanpa antarmuka terukur dan membaca warna serta latar belakang terhitung setiap elemen setelah kaskade CSS, pewarisan, opasitas, dan default peramban diterapkan. Ini satu-satunya cara memperoleh kesimpulan kontras nyata untuk halaman aktif karena tebakan warna dari HTML statis dapat keliru.
Masalah umum dan cara memperbaikinya
- Kesalahan warna pasangan gagal WCAG AA untuk wajar teks Perbaikan: Ubah itu warna depan atau latar belakang hingga wajar teks mencapai di sedikitnya 4.5:1 kontras, lalu uji ulang arahkan, fokus, dinonaktifkan, dan dikunjungi status.
- Kesalahan warna pasangan gagal WCAG AA untuk besar teks Perbaikan: Ubah itu warna pasangan hingga teks di sedikitnya 24px biasa atau 18.66px tebal mencapai 3:1 kontras.
- Peringatan warna pasangan gagal WCAG AAA untuk wajar teks Perbaikan: sesuaikan itu warna pasangan hingga wajar teks mencapai 7:1 kontras ketika AAA adalah itu proyek persyaratan.
- Peringatan warna pasangan gagal WCAG AAA untuk besar teks Perbaikan: sesuaikan itu warna pasangan hingga yang memenuhi syarat besar teks mencapai 4.5:1 kontras ketika AAA adalah wajib.
- Peringatan Hasil pemeriksaan: warna pasangan gagal non-teks kontras panduan Perbaikan: tingkatkan itu kontras dari penting ikon, fokus indikator, kontrol batas, dan grafis objek untuk di sedikitnya 3:1 terhadap berdekatan warna.