Memverifikasi screenshot yang sumbernya tidak kamu miliki — halaman marketing, UI kompetitor, PDF. Mengaudit logo di atas background foto yang ramai di mana "warna background" bukan satu nilai tunggal. Mengecek kontras worst-case sepanjang gradient atau di belakang teks tembus pandang. Membandingkan dengan cepat dua state UI (mis. button rest vs hover) tanpa membangun ulang desain.

Anti-aliasing. Tepi teks dirata-rata jadi warna yang bukan design intent. Klik di tengah goresan huruf, bukan di tepinya. Kompresi JPEG. Gambar yang sangat dikompres punya drift warna di area datar. Rata-rata 5×5 menghaluskannya. Layer translucent. Untuk kontras yang penting adalah piksel yang dirender, bukan warna sumber. Tool ini membaca piksel yang dirender — persis yang kamu mau. Kamu memeriksa warna, bukan design intent. Kalau tombolmu lolos AA saat rest tapi gagal saat hover di screenshot lain, kedua state itu adalah bug a11y. Scaling gambar. Tool ini mengecilkan gambar besar untuk performance. Piksel yang di-sampel mencerminkan piksel yang ditampilkan; kalau butuh sampling pixel-perfect dari elemen UI yang sangat kecil, crop gambar sebelum upload.

Pemeriksa kontras pada gambar

Klik dua titik mana pun di gambar untuk memeriksa kontras WCAG — AA, AAA, threshold teks besar. Dibuat untuk desainer yang memverifikasi screenshot nyata, bukan cuma kode hex.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Hasil

Sample two colours to see the contrast ratio.

Untuk apa ini?

Pemeriksa kontras WCAG biasanya butuh dua kode hex — tapi seorang desainer yang melakukan accessibility pass pada screenshot nyata tidak punya hex, dia punya piksel. Tool ini memungkinkanmu mengunggah gambar (screenshot, hero design, logo di atas background ramai) dan mengklik dua titik. Ia mengambil sampel warna di bawah kursor (1 piksel atau rata-rata 3×3/5×5) dan menghitung rasio kontras WCAG 2.1. Veredito untuk AA, AA-besar, AAA, AAA-besar, dan threshold komponen UI (1.4.11). Semua di browser.

Kapan digunakan

Memverifikasi screenshot yang sumbernya tidak kamu miliki — halaman marketing, UI kompetitor, PDF.
Mengaudit logo di atas background foto yang ramai di mana "warna background" bukan satu nilai tunggal.
Mengecek kontras worst-case sepanjang gradient atau di belakang teks tembus pandang.
Membandingkan dengan cepat dua state UI (mis. button rest vs hover) tanpa membangun ulang desain.

Cara kerja sampling

Sampel piksel tunggal presisi tapi noisy — tepi anti-aliased, artefak JPEG, dan subpixel rendering membuat tetangga berbeda. Rata-rata 5×5 biasanya yang kamu mau untuk UI: ia mengembalikan warna yang akan dideskripsikan manusia, bukan piksel tepat di bawah klik. Pakai 1px saat memeriksa tepi logo atau batas warna tajam.

Kesalahan umum

Anti-aliasing. Tepi teks dirata-rata jadi warna yang bukan design intent. Klik di tengah goresan huruf, bukan di tepinya.
Kompresi JPEG. Gambar yang sangat dikompres punya drift warna di area datar. Rata-rata 5×5 menghaluskannya.
Layer translucent. Untuk kontras yang penting adalah piksel yang dirender, bukan warna sumber. Tool ini membaca piksel yang dirender — persis yang kamu mau.
Kamu memeriksa warna, bukan design intent. Kalau tombolmu lolos AA saat rest tapi gagal saat hover di screenshot lain, kedua state itu adalah bug a11y.
Scaling gambar. Tool ini mengecilkan gambar besar untuk performance. Piksel yang di-sampel mencerminkan piksel yang ditampilkan; kalau butuh sampling pixel-perfect dari elemen UI yang sangat kecil, crop gambar sebelum upload.