Pemeriksa Kontras Warna

Semua alat

Periksa rasio kontras WCAG antara warna teks dan latar belakang — lihat nilai kelulusan/kegagalan AA/AAA untuk teks normal, teks besar, dan komponen UI, dengan pratinjau langsung dan saran warna aksesibel.

Warna teks
Tint
Warna latar belakang
Tint
Rasio kontras
--:1
Teks normal
Teks isi di bawah 18px (atau di bawah 14px tebal)
AA AAA
Teks besar
18px+ reguler, atau 14px+ tebal
AA AAA
Komponen UI
Ikon, border, kontrol formulir & grafik
AA AAA
Pratinjau langsung

The quick brown fox

Teks besar terbaca dengan nyaman ketika kontrasnya memadai.

Ini adalah contoh paragraf teks isi normal. Kontras warna yang baik membuat konten Anda dapat dibaca oleh semua orang, termasuk orang dengan penglihatan rendah atau buta warna. tautan contoh.

Teks kecil dan keterangan paling sulit dibaca — membutuhkan kontras paling banyak.
Tombol contoh Tombol contoh
Saran

Semuanya dihitung langsung di browser Anda menggunakan rumus luminansi-relatif WCAG 2.x — tidak ada unggahan, tidak perlu daftar, sepenuhnya gratis.

Tentang Pemeriksa Kontras Warna

Color Contrast Checker mengukur rasio kontras WCAG antara warna teks dan warna latar belakang, lalu menilai pasangan tersebut terhadap tingkat aksesibilitas AA dan AAA untuk teks normal, teks besar dan komponen UI. Rasio dan setiap hasil lulus/gagal diperbarui langsung saat Anda mengubah salah satu warna.

Panel pratinjau yang realistis menampilkan heading, teks isi, teks kecil, tombol dan tautan dalam kombinasi pilihan Anda, sehingga Anda bisa menilai keterbacaan dengan konten nyata alih-alih swatch abstrak. Ketika sebuah pasangan gagal, alat ini menyarankan warna teks paling mendekati yang bisa aksesibel dan mencapai ambang AA 4,5:1, siap diterapkan dengan satu klik.

Perhitungannya mengikuti rumus luminansi relatif WCAG 2.x dan berjalan sepenuhnya di browser Anda — tidak ada yang diunggah dan pemeriksaannya gratis. Anda juga bisa menyalin laporan teks ringkas berisi rasio dan hasil penilaian untuk ditempel ke dalam tinjauan aksesibilitas atau pull request.

Cara menggunakan Pemeriksa Kontras Warna

  1. Atur warna teks dan warna latar belakang Anda dengan pemilih warna atau dengan mengetik nilainya.
  2. Baca rasio kontras serta hasil AA/AAA untuk teks normal, teks besar dan komponen UI.
  3. Periksa pratinjau langsung untuk melihat heading, paragraf, tombol dan tautan nyata dalam warna Anda.
  4. Jika pasangan tersebut gagal, terapkan warna teks aksesibel yang disarankan atau tukar kedua warna.
  5. Klik "Copy report" untuk membagikan rasio dan hasil kepatuhan.

Pertanyaan yang sering diajukan

WCAG AA mensyaratkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar serta komponen UI seperti ikon dan border form. Tingkat AAA yang lebih ketat mensyaratkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar.

Teks berukuran 18px atau lebih besar dengan bobot reguler, atau 14px ke atas jika tebal (bold). Karena glif besar lebih mudah dibaca, WCAG mengizinkan rasio kontras yang lebih rendah, 3:1, pada tingkat AA.

Ya. Setiap pemeriksaan dihitung secara instan di browser Anda menggunakan rumus luminansi relatif WCAG, tanpa perlu mendaftar, tanpa batas penggunaan dan tanpa biaya.

Gunakan saran bawaan: alat ini mencari varian warna teks Anda yang paling mendekati dan lulus AA terhadap latar belakang saat ini, lalu membiarkan Anda menerapkannya langsung. Jika tidak ada varian warna teks yang bisa lulus, sesuaikan latar belakangnya sebagai gantinya.

Ini mencakup kriteria kontras warna, yang termasuk kegagalan aksesibilitas paling umum, tetapi bukan segalanya. Anda tetap perlu memeriksa keadaan fokus, kemandirian informasi dari warna, ukuran font, dan bagaimana palet tetap terlihat di bawah simulasi buta warna.

Tidak. Kedua warna, rasio dan saran semuanya dihitung secara lokal di browser Anda — halaman ini tidak membuat permintaan server apa pun selama Anda bekerja.
Bagikan ini
Alat Terkait
Simulator Buta Warna Lihat gambar atau palet Anda sebagaimana dilihat oleh penderita protanopia, deuteranopia, tritanopia, atau achromatopsia — berjalan sepenuhnya di browser Anda, tidak ada yang diunggah. Gratis
Pengekspor Palet Tempel atau impor sekumpulan warna dan ekspor secara instan ke variabel CSS, SCSS, konfigurasi Tailwind, JSON, atau swatch SVG — langkah terakhir untuk palet apa pun. Gratis
Ekstraktor Warna Gambar Ambil palet warna yang disempurnakan dan siap disalin dari gambar apa pun. Gratis
Generator Nuansa Warna Hasilkan rangkaian tints dan shades lengkap dari satu warna — pilih langkah gelap/terang dan jumlah nuansa, lalu salin nilai apa pun secara instan. Gratis
Generator Gradien dari Gambar Ekstrak gradien indah dari foto apa pun — seret gambar, pilih suasana, dan warna dominan menjadi stop gradien yang dapat diseret. Salin CSS siap pakai secara instan. Gratis
Layar Merah Penuh Penuhi seluruh layar Anda dengan merah murni untuk menguji kanal sub-pixel merah dan mengungkap dead pixel pada bidang berwarna. Gratis dan berjalan di browser Anda. Gratis
Pencarian populer
pemeriksa kontras warna rasio kontras wcag pemeriksa kontras aksesibilitas pemeriksa kontras teks uji kontras aa aaa periksa kontras warna online
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.
Laporkan masalah

Tambahkan alat gratis ini ke situs web Anda sendiri — salin dan tempel kode di bawah ini.