Pemeriksa Kontras Warna Gratis

Uji kombinasi warna teks dan latar belakang Anda untuk kepatuhan aksesibilitas WCAG 2.1. Dapatkan hasil lulus/gagal instan untuk standar AA dan AAA — tanpa pendaftaran.

94,217+ pemeriksaan kontras dilakukan

Rasio Kontras

17.06:1

Preview Teks Besar (24px)

Preview teks tubuh normal (16px). Rubah coklat cepat melompati anjing malas. Contoh ini menunjukkan tampilan kombinasi warna Anda pada ukuran teks tubuh tipikal.

Teks kecil (14px) — sering digunakan untuk keterangan, catatan kaki, dan metadata.

Terbalik: latar belakang pada warna teks (17.06:1 — rasio yang sama)

AA Teks Normal

Memerlukan 4,5:1

LULUS

AA Teks Besar

Memerlukan 3:1

LULUS

AAA Teks Normal

Memerlukan 7:1

LULUS

AAA Teks Besar

Memerlukan 4,5:1

LULUS

Siap membangun website yang aksesibel dengan warna-warna ini?

Buat dengan warna-warna ini

Apa Itu Pemeriksa Kontras Warna?

Pemeriksa kontras warna adalah alat yang mengukur perbedaan luminansi antara dua warna — biasanya teks latar depan dan latar belakangnya — dan menghitung rasio kontras sesuai Pedoman Aksesibilitas Konten Web (WCAG). Rasio ini menentukan apakah kombinasi warna Anda dapat dibaca oleh orang dengan gangguan penglihatan, termasuk buta warna dan penglihatan rendah.

Pemeriksa kontras Kleap langsung menghitung rasio kontras WCAG 2.1 dan mengujinya terhadap semua empat tingkat kepatuhan: AA Teks Normal (4,5:1), AA Teks Besar (3:1), AAA Teks Normal (7:1), dan AAA Teks Besar (4,5:1). Jika warna Anda gagal, alat menyarankan alternatif aksesibel terdekat.

Tingkat Kontras WCAG Dijelaskan

AA Teks Normal

Minimum 4,5:1

Memerlukan rasio kontras minimum 4,5:1. Ini adalah target kepatuhan paling umum dan berlaku untuk teks tubuh di bawah 18pt (atau 14pt tebal).

AA Teks Besar

Minimum 3:1

Memerlukan rasio kontras minimum 3:1. Berlaku untuk teks yang setidaknya 18pt (24px) atau 14pt tebal (18,66px tebal).

AAA Teks Normal

Minimum 7:1

Standar tertinggi, memerlukan rasio kontras 7:1. Memastikan keterbacaan bagi pengguna dengan penglihatan rendah sedang (sekitar 20/80).

AAA Teks Besar

Minimum 4,5:1

Memerlukan 4,5:1 untuk teks besar di tingkat AAA. Memberikan keterbacaan yang ditingkatkan untuk judul dan teks tampilan.

5 Tips Membuat Palet Warna yang Aksesibel

1

Mulai dengan kontras

Pilih warna teks dan latar belakang dengan mempertimbangkan kontras sejak awal. Memperbaiki aksesibilitas setelah fakta jauh lebih sulit daripada merencanakannya dari awal.

2

Jangan hanya mengandalkan warna

Gunakan ikon, pola, garis bawah, atau label bersamaan dengan warna untuk menyampaikan makna. Sekitar 8% pria memiliki buta warna.

3

Uji di perangkat nyata

Warna terlihat berbeda di monitor, ponsel, dan di bawah sinar matahari terang. Uji rasio kontras di perangkat nyata, bukan hanya di layar desainer Anda.

4

Gunakan mode gelap juga

Jika situs Anda mendukung mode gelap, verifikasi rasio kontras untuk kedua tema. Pasangan warna yang lulus di mode terang mungkin gagal di mode gelap.

5

Perhatikan bobot font

Bobot font yang tipis mengurangi kontras yang dirasakan. Jika Anda menggunakan bobot di bawah 400, bidik rasio kontras yang lebih tinggi dari minimum WCAG.

6

Periksa status interaktif

Status hover, fokus, dan aktif sering menggunakan warna yang berbeda. Pastikan semua status interaktif memenuhi persyaratan kontras.

Perbandingan Pemeriksa Kontras Warna

FiturKleapWebAIMCoolorsAdobe Color
HargaGratisGratisFreemiumFree (with Adobe account)
Real-time PreviewYes, live text on backgroundYes, basicYaYa
Nearest Accessible ColorYes, auto-suggestedTidakTidakPartial
Level WCAG AA & AAAKeduanyaKeduanyaAA onlyAA + AAA
Pembuat websiteYa (AI)TidakTidakTidak
Swap Colors ButtonYaTidakTidakTidak
Random Accessible PairYaTidakTidakTidak

Pertanyaan yang Sering Diajukan

Apa itu rasio kontras WCAG?+
Rasio kontras WCAG adalah pengukuran yang membandingkan luminansi relatif dari dua warna. Berkisar dari 1:1 (warna yang sama) hingga 21:1 (putih di atas hitam). WCAG 2.1 memerlukan minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar untuk kepatuhan AA.
Apakah website saya harus sesuai WCAG?+
Tergantung lokasi dan jenis website Anda. Di AS, Inggris, dan UE, website pemerintah harus mematuhi standar aksesibilitas. Banyak perusahaan swasta secara sukarela menargetkan kepatuhan AA untuk mengurangi risiko tuntutan dan mendukung inklusivitas.
Bagaimana cara kerja pemeriksa kontras?+
Alat menganalisis dua warna untuk luminansi relatifnya (dihitung per spesifikasi WCAG 2.1). Rasio luminansi diuji terhadap semua ambang batas yang ditentukan WCAG, menghasilkan hasil lulus/gagal instan.
Apakah saya perlu kepatuhan AA dan AAA?+
Sebagian besar proyek menargetkan kepatuhan AA. Persyaratan AAA sangat ketat (7:1 untuk teks normal) dan sulit dicapai sambil memenuhi tujuan desain lainnya. AA adalah standar yang diterima untuk sebagian besar kerangka hukum.
Bagaimana cara memeriksa teks di atas gradient atau gambar?+
Uji warna di titik paling terang dari gradient terhadap warna teks — ini adalah skenario terburuk. Untuk kombinasi gradient dan teks, menambahkan bayangan teks hitam 50% opak secara signifikan meningkatkan keterbacaan.
Apakah WCAG AA cukup untuk website saya?+
WCAG AA adalah standar yang dirujuk oleh sebagian besar undang-undang aksesibilitas di seluruh dunia, termasuk ADA (AS), EAA (UE), dan EN 301 549 (standar aksesibilitas UE). Untuk kebanyakan bisnis, memenuhi AA adalah tujuan yang tepat.
Bagaimana jika warna merek saya gagal uji kontras?+
Anda memiliki beberapa pilihan: sedikit sesuaikan nuansa warna merek Anda (sering kali perubahan kecerahan kecil sudah cukup), gunakan warna merek hanya untuk elemen dekoratif dan tombol (bukan teks isi), atau buat varian aksesibel dari warna merek Anda untuk teks.
Apakah kontras penting untuk mode gelap?+
Tentu saja. Persyaratan kontras WCAG yang sama berlaku terlepas dari skema warna. Faktanya, mode gelap memperkenalkan tantangan unik karena warna-warna cerah yang terang dapat terlihat lebih terang di latar belakang gelap daripada di latar belakang terang.
Bisakah pengguna buta warna melihat kontras yang cukup?+
Rasio kontras yang tinggi sangat membantu pengguna buta warna, tetapi kontras saja tidak cukup. WCAG juga mensyaratkan bahwa informasi tidak bergantung hanya pada perbedaan warna.
Bagaimana cara menguji kontras di website saya yang sudah ada?+
Anda dapat menggunakan browser DevTools (audit Lighthouse Chrome menyertakan pemeriksaan kontras), ekstensi browser seperti axe atau WAVE, atau alat pemeriksa kontras kami untuk menguji kombinasi warna secara manual.

Siap Membangun Website yang Aksesibel?

Pembuat website AI Kleap dibangun dengan mempertimbangkan aksesibilitas. Buat website yang memenuhi WCAG dan visual menarik dalam hitungan menit.

Buat Website Gratis

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Pemeriksa Kontras Warna Gratis | Alat Aksesibilitas WCAG 2026