Lewati ke konten
ID

Pemeriksa kontras warna (WCAG)

Periksa kontras antara warna teks dan latar sesuai aturan WCAG AA dan AAA, dan dapatkan warna koreksi terdekat dalam satu klik.

  • Gratis
  • Tanpa daftar
  • Tanpa unggah file
  • Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Periksa apakah teks terbaca di atas latarnya sesuai aturan aksesibilitas WCAG 2: rasio kontras, kriteria AA dan AAA untuk teks biasa, teks besar, dan komponen antarmuka, serta pratinjau nyata. Jika kontras kurang, alat ini menyarankan warna teks atau latar terdekat yang lolos.

Kapan menggunakannya

Memvalidasi palet merek

Sebelum menetapkan warna situs, periksa setiap pasangan teks/latar: abu-abu muda yang sedang tren sering gagal.

Memperbaiki hasil audit aksesibilitas

Audit WCAG menandai kontras yang kurang: koreksi otomatis memberi nada lolos yang paling mirip dengan aslinya.

Tombol dan ikon

Garis tepi kolom, ikon, dan tombol harus mencapai 3:1 terhadap latar agar terlihat.

Cara menggunakan

  1. Pilih warna teks dan warna latar.
  2. Lihat rasio kontras dan kriteria WCAG yang terpenuhi.
  3. Terapkan warna koreksi jika kontras kurang.

Cara kerjanya

Rasio kontras memakai rumus WCAG: luminans relatif setiap warna (setelah mengubah sRGB ke cahaya linear), lalu (L1 + 0,05) / (L2 + 0,05). Nilainya dari 1:1 (tanpa kontras) hingga 21:1 (hitam di atas putih).

Koreksi menelusuri kecerahan warna ke arah lebih terang dan lebih gelap, lalu menyimpan nilai yang mencapai ambang dengan perubahan terkecil: warna tetap mudah dikenali.

Tips untuk hasil terbaik

  • Targetkan 4,5:1 untuk teks di bawah 24 px, termasuk keterangan hukum.
  • Teks di atas foto harus diperiksa terhadap area paling terang foto.
  • Kontras saja tidak cukup: jangan pernah menyampaikan informasi hanya dengan warna.
  • Uji juga warna Anda dengan simulator buta warna.

Masalah umum dan solusinya

Tidak ada warna koreksi yang disarankan

Bahkan hitam atau putih tidak mencapai ambang di latar ini (misalnya abu-abu sedang). Ganti warna latar.

Hasilnya berbeda dari alat lain

Pembulatan sedikit berbeda; rasio tepat di bawah ambang (4,49) gagal di mana pun.

Teks saya memakai warna transparan

Perhitungan memakai warna solid: masukkan warna yang benar-benar terlihat (bercampur dengan latar).

Pertanyaan umum

Berapa kontras yang dibutuhkan?

WCAG AA mensyaratkan 4,5:1 untuk teks biasa dan 3:1 untuk teks besar dan komponen antarmuka. AAA mensyaratkan 7:1 dan 4,5:1.

Apa yang termasuk teks besar?

Minimal 24 px (18 pt), atau 18,5 px (14 pt) tebal. Di bawah itu, berlaku ambang teks biasa.

Bagaimana warna koreksi dihitung?

Alat ini mempertahankan rona dan saturasi warna Anda dan hanya menyesuaikan kecerahannya, sesedikit mungkin, hingga mencapai ambang AA atau AAA.

Apakah kontras wajib?

Untuk situs publik di banyak negara, tingkat AA diharapkan. Yang terpenting, ini soal keterbacaan bagi semua orang, di bawah sinar matahari atau saat mata lelah.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.