Lompat ke alat
JoeLucky

Klik ★ pada alat untuk menyimpannya

Kategori Alat

Kode ke GambarPembuat Gradien CSSGlassmorphism CSSPembuat Box ShadowPembuat Loader CSSPembuat Blob SVGSVG ke PNGPemeriksa Kontras WarnaPengubah PX / REM / EM
JoeLucky

Alat online praktis, semua di satu tempat

Kebijakan PrivasiKetentuan Layanan

© 2026 JoeLucky®. Hak cipta dilindungi.

  1. JoeLucky
  2. /CSS & Desain
  3. /Pemeriksa Kontras Warna

Pemeriksa Kontras Warna

Periksa rasio kontras WCAG antara dua warna dan lihat hasil lulus atau gagal AA dan AAA.

CSS & DESAIN SERUPA

Lihat semua
Kode ke Gambar

Ubah potongan kode menjadi tangkapan layar yang menarik.

Buka →
Pembuat Gradien CSS

Rancang gradien linear, radial, dan conic secara visual lalu salin CSS-nya.

Buka →
Glassmorphism CSS

💬 Komentar

?

Belum ada komentar. Jadilah yang pertama!

APA ITU Pemeriksa Kontras Warna?

Color Contrast Checker menghitung rasio kontras antara warna latar depan dan latar belakang dengan rumus WCAG, menandai status lulus AA/AAA untuk teks normal dan besar.

Penting

  1. Lulus/gagal selalu ditampilkan dengan teks dan ikon — tidak pernah hanya lewat warna.
  2. Alat ini hanya memeriksa satu pasangan warna — lulus tidak berarti seluruh halaman patuh WCAG.

Cara memakai?

  1. Pilih warna latar depan dan latar belakang (swatch atau input hex).
  2. Tinjau pratinjau langsung dan hasil kontras.

Pertanyaan yang sering diajukan

Apakah lulus AA berarti halaman saya patuh WCAG?

Belum tentu. Alat ini hanya melaporkan perhitungan rasio kontras mentah dan lulus/gagal terhadap empat ambang — kepatuhan WCAG yang sebenarnya juga bergantung pada ukuran huruf, ketebalan, dan desain Anda secara keseluruhan.

Mengapa lulus/gagal tidak ditampilkan hanya dengan warna?

Warna saja (mis. titik hijau atau merah) tidak dapat diakses oleh pengguna buta warna, jadi setiap ambang selalu menampilkan ikon sekaligus label teks (Lulus/Gagal).

Bagaimana latar semi-transparan ditangani?

Latar transparan membutuhkan warna “latar kanvas” buram tambahan — alat ini memakai logika komposit yang sudah ada di inti untuk menghitung warna buram hasilnya sebelum menghitung kontras.

Teks contoh — Wawan menjaga kuda zebra yang lincah di kebun
18.88:1Rasio kontras (rumus WCAG)
Teks normal AA (≥ 4,5:1)Lulus
Teks normal AAA (≥ 7:1)Lulus
Teks besar AA (≥ 3:1)Lulus
Teks besar AAA (≥ 4,5:1)Lulus

Alat ini hanya melaporkan hasil mentah rumus rasio kontras WCAG dan lulus/gagal terhadap empat ambang batas — bukan berarti «halaman ini sesuai WCAG». Kepatuhan sebenarnya juga bergantung pada ukuran dan ketebalan font serta bagian desain lainnya.

Buat kode blur latar belakang dan batas tembus pandang secara langsung.

Buka →