Periksa Kontras dengan Alat Gratis

Anda tidak perlu menilai kontras hanya dengan melihatnya. Alat gratis menghitung rasio tepat dari dua warna dan langsung memberi tahu apakah hasilnya memenuhi syarat.

Pemeriksa Kontras WebAIM adalah alat klasik. Tempelkan warna latar depan dan latar belakang, lalu alat ini menampilkan rasio serta penanda kelulusan AA dan AAA.

Alat yang baik memberi label Lulus atau Gagal pada setiap hasil untuk teks normal dan teks besar secara terpisah, sehingga Anda tahu persis ambang mana yang telah dilewati.

Langsung di peramban, pemilih warna DevTools menampilkan rasio kontras secara langsung dan garis yang menandai batas AA saat Anda menyesuaikan warna.

DevTools membaca warna dan latar belakang yang telah dihitung sebagaimana benar-benar ditampilkan, sehingga Anda menguji piksel sebenarnya, bukan nilai yang Anda harapkan.

Jalankan axe DevTools atau Lighthouse untuk memindai seluruh halaman sekaligus. Alat-alat tersebut menandai setiap elemen dengan kontras rendah, bukan hanya satu pasangan setiap kali.

Banyak pemeriksa menyertakan pipet warna, sehingga Anda dapat mengambil sampel warna langsung dari situs aktif atau rancangan tanpa mencari kode heksadesimal.

Figma dan aplikasi serupa menambahkan plugin kontras, sehingga Anda dapat menemukan kegagalan selama proses desain, jauh sebelum kode ditulis.

Alat memeriksa satu pasangan warna solid. Pada gradien atau gambar, uji bagian terburuk secara manual karena kontras teks bisa gagal hanya di sebagian area.

Sebagian besar pemeriksa memungkinkan Anda menyesuaikan sedikit warna hingga memenuhi syarat, lalu memberikan kode heksadesimal yang sesuai untuk langsung ditempelkan kembali ke CSS.

Masukkan nilai heksadesimal yang tepat dari lembar gaya Anda ke pemeriksa untuk memastikan pasangan ini melewati rasio 4.5:1 sebelum dirilis.

Anda telah mengenal alat gratis seperti WebAIM, DevTools, dan axe yang mengubah kontras menjadi hasil lulus atau gagal yang jelas. Ukur warna sebenarnya dan perbaiki kegagalan sebelum peluncuran. ✅