Pemeriksa kontras warna

Periksa warna Anda

Uji kombinasi warna untuk memastikan mereka memenuhi standar aksesibilitas WCAG untuk keterbacaan teks.

1.00:1

Kontras

Gagal

Sangat buruk

Teks normal

AA (4.5:1)

AAA (7:1)

Teks besar

AA (3:1)

AAA (4.5:1)

Warna Teks

Warna Latar Belakang

Perbaikan cepat

Judul pratinjau

Si rubah coklat cepat melompati anjing malas

Contoh teks kecil (12px)

Teks

#2596be

Latar belakang

#ffffff

Standar WCAG

Level AA

Rasio kontras minimum 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Diperlukan untuk sebagian besar situs web.

Level AAA

Rasio kontras yang ditingkatkan 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Direkomendasikan untuk aksesibilitas optimal.

Kontras tidak mencukupi untuk semua ukuran teks - tidak memenuhi standar WCAG.

Hitung rasio kontras dari warna teks dan latar belakang.

Pilih warna menggunakan color picker untuk teks dan warna latar belakang atau masukkan warna dalam format RGB hexadecimal (misalnya, #259 atau #2596BE). Kamu bisa menyesuaikan slider untuk memilih warna. Pedoman Aksesibilitas Konten Web (WCAG) memiliki panduan khusus untuk membantu menentukan apakah teks dapat dibaca oleh pengguna yang melihat. Kriteria ini menggunakan algoritma tertentu untuk memetakan kombinasi warna menjadi rasio yang dapat dibandingkan. Menggunakan formula ini, WCAG menyatakan bahwa rasio kontras warna 4.5:1 dengan teks dan latar belakangnya cukup untuk teks biasa, dan teks besar (18+ pt biasa, atau 14+ pt tebal) harus memiliki rasio kontras warna setidaknya 3:1.

Fitur utama

Perhitungan rasio kontras waktu nyata
Pemeriksaan kepatuhan WCAG AA & AAA
Slider HSL untuk penyesuaian halus
Berbagai format pratinjau

Alat canggih

Perbaikan warna otomatis
Contoh teks dan latar belakang
Deteksi nama warna
Ekspor hasil

Pertanyaan yang sering diajukan

Untuk kepatuhan WCAG AA, teks normal memerlukan rasio kontras minimum 4,5:1, sedangkan teks besar (18pt atau 14pt tebal) memerlukan 3:1.

WCAG AAA memerlukan rasio kontras yang lebih tinggi: 7:1 untuk teks normal dan 4,5:1 untuk teks besar, dibandingkan dengan AA yang masing-masing 4,5:1 dan 3:1.

Gunakan fitur perbaikan otomatis kami untuk menyesuaikan warna teks atau latar belakang sambil tetap menjaga maksud desain Anda, atau atur warna secara manual dengan slider HSL dan indikator visual yang menunjukkan zona optimal untuk kepatuhan AA/AAA.

Zona hijau dan penanda AA/AAA menunjukkan rentang optimal untuk mencapai kepatuhan WCAG. Petunjuk arah (Lebih terang/Lebih gelap) membantu Anda mendapatkan kontras yang lebih baik berdasarkan kombinasi warna Anda saat ini.

Bisa, Anda dapat memasukkan kode warna hex apa pun atau menggunakan pemilih warna untuk memilih warna sendiri. URL diperbarui secara otomatis sehingga Anda dapat membagikan kombinasi warna tertentu.