Depan (Teks)
Latar Belakang
Rasio Kontras —
AA · Normal — Teks < 18pt atau < 14pt tebal ≥ 4.5 : 1
AA · Large — Teks ≥ 18pt atau ≥ 14pt tebal ≥ 3.0 : 1
AA · UI — Ikon, batas, cincin fokus ≥ 3.0 : 1
AAA · Normal — Ditingkatkan untuk teks isi ≥ 7.0 : 1
AAA · Large — Ditingkatkan untuk judul ≥ 4.5 : 1
Pratinjau Klik untuk edit

The Quick Brown Fox

Jumps over the lazy dog. Contoh ini menunjukkan tampilan kombinasi warna Anda.

Teks kecil — keterangan 11px

22px — Teks besar · AA Large, AAA Large 14px — Teks normal · AA Normal, AAA Normal 11px — Di bawah ambang AA
Rasio kontras dihitung sesuai WCAG 2.1. Semua kalkulasi berjalan di browser Anda.

Pemeriksa Kontras Warna (WCAG 2.1)

Apa yang dilakukan alat ini

Masukkan warna depan (teks) dan warna latar belakang dalam format HEX, atau gunakan color picker. Alat ini langsung menghitung rasio kontras WCAG 2.1 dan memeriksa terhadap lima level kepatuhan: AA Normal, AA Besar, AA Komponen UI, AAA Normal, dan AAA Besar. Pratinjau langsung menunjukkan tampilan teks dengan warna tersebut.

Cara penggunaan

  1. Atur warna depan menggunakan color picker atau ketik nilai HEX.
  2. Atur warna latar belakang dengan cara yang sama.
  3. Baca rasio kontras dan periksa level WCAG yang lulus atau gagal.
  4. Gunakan Tukar untuk membalik warna.

Pertanyaan yang Sering Diajukan

Apa itu rasio kontras?

Rasio kontras mengukur selisih luminans relatif antara dua warna. Nilainya dari 1:1 (warna identik, tanpa kontras) hingga 21:1 (hitam di atas putih, kontras maksimum). Rasio lebih tinggi berarti teks lebih mudah dibaca.

Apa kepanjangan WCAG?

WCAG adalah Web Content Accessibility Guidelines. Pedoman yang diterbitkan W3C ini menetapkan rasio kontras minimum agar konten tetap terbaca oleh orang dengan penglihatan lemah atau buta warna.

Apa bedanya kepatuhan AA dan AAA?

Level AA mensyaratkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar, standar minimum yang sebaiknya dipenuhi sebagian besar situs. Level AAA mensyaratkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar, dan disarankan untuk isi utama di situs yang banyak teks.

Apa yang termasuk teks besar menurut WCAG?

Teks besar adalah teks minimal 18pt (24px) dengan ketebalan biasa, atau minimal 14pt (sekitar 18,67px) tebal. Teks yang memenuhi batas ini punya syarat kontras lebih rendah karena ukurannya membantu keterbacaan.

Apakah alat ini mengecek kontras pada gambar atau grafik?

Alat ini mengecek kontras antara dua warna datar, yaitu warna teks dan latar. Untuk teks di atas gambar, ambil sampel area latar yang paling terang dan paling gelap untuk menemukan kontras terburuk.

Panduan Terkait

How to Check Color Contrast for WCAG →