Penyemak Kontras mengira nisbah kontras WCAG 2.1 antara dua warna dan menggredkannya terhadap ambang AA/AAA untuk kedua-dua teks biasa dan besar. Pratonton langsung menunjukkan teks dipaparkan dalam warna yang dipilih, dan butang "pick page background" mengambil sampel halaman semasa.
Kebolehcapaian (accessibility) semakin menjadi keperluan — pematuhan WCAG adalah keperluan undang-undang di banyak bidang kuasa, dan walaupun tidak, kontras yang lemah menjauhkan pengguna. Penyemak Kontras memberitahu anda dengan segera sama ada mana-mana dua warna memenuhi piawaian WCAG. Pilih warna latar depan dan latar belakang melalui pemilih warna atau tampal nilai hex; alat ini mengira nisbah kontras menggunakan formula kecerahan (luminance) WCAG rasmi dan menggredkannya terhadap empat ambang: AA biasa (≥4.5:1), AA besar (≥3:1), AAA biasa (≥7:1), dan AAA besar (≥4.5:1). Setiap ambang menunjukkan lencana Pass/Fail yang jelas. Pratonton langsung memaparkan teks besar dan biasa dalam warna yang dipilih supaya anda dapat melihat kesan visual sebenar. Butang kemudahan mengambil sampel warna latar belakang body halaman semasa — berguna apabila menyemak sama ada kombinasi warna pada laman sebenar lulus. Semuanya berjalan secara setempat dalam pelayar anda, tiada muat naik.
Menggunakan formula kecerahan WCAG rasmi untuk mengira nisbah kontras. Keputusan tepat dan sepadan dengan setiap penyemak kebolehcapaian yang patuh.
Lulus/gagal untuk AA biasa (≥4.5:1), AA besar (≥3:1), AAA biasa (≥7:1), AAA besar (≥4.5:1) — semuanya dipaparkan sebagai grid.
Memaparkan teks besar dan biasa sebenar dalam warna pilihan anda supaya anda melihat kesan visual bersama nisbah berangka.
Satu klik mengambil sampel warna latar belakang body halaman semasa yang telah dikira — berguna untuk menguji kombinasi dunia sebenar.
Taip nilai hex atau gunakan pemilih warna asli. Nilai segerak secara dua hala semasa anda menyunting mana-mana satu.
Satu klik menukar ganti latar depan dan latar belakang — berguna apabila menyemak tema songsang atau keadaan hover.
Sebelum memuktamadkan palet warna, semak setiap warna teks terhadap latar belakangnya untuk memastikan pematuhan WCAG AA — mengelakkan kerja semula kemudian.
Gunakan "pick page background" pada laman langsung, kemudian tampal warna teks sebenar — temui pelanggaran a11y dalam beberapa minit tanpa membuka Lighthouse.
Apabila jenama memilih warna yang mungkin gagal a11y, gunakan penyemak untuk mencari varian patuh yang paling hampir (warna lebih gelap/cerah).
Sahkan bahawa warna keadaan hover/aktif/lumpuh masih memenuhi keperluan kontras, bukan hanya lalai.
Tema gelap sering gagal kontras untuk teks kelabu-atas-kelabu. Semak kelabu paling gelap anda terhadap latar belakang paling gelap anda untuk menangkap ini.
Klik ikon Contrast dalam dock DevSuite Pro. Satu panel terbuka dengan medan warna latar depan dan latar belakang.
Gunakan pemilih warna atau tampal nilai hex untuk setiap satu. Pratonton langsung dikemas kini semasa anda menukar warna.
Nombor besar (cth. 4.8:1) ialah nisbah kontras. Lebih tinggi lebih baik. 3 adalah minimum mutlak; 4.5 adalah sasaran untuk teks biasa.
Lencana lulus/gagal untuk AA dan AAA, saiz teks biasa dan besar, menunjukkan sekilas pandang apa yang kombinasi anda layak.
Jika gagal, laraskan warna. Gelapkan latar depan atau cerahkan latar belakang (atau sebaliknya) sehingga tahap sasaran menunjukkan Pass.
Pasang DevSuite Pro secara percuma dan buka 64+ alat pembangun untuk pelayar anda.
