Tanpa unggah, 100% lokal, tanpa akun

Pemeriksa Kontras WCAG

Ketik atau pilih dua warna dan lihat rasio kontras WCAG secara instan, dengan lencana lulus AA/AAA untuk teks normal dan besar.

Cara kerja Pemeriksa Kontras

Alat ini menghitung rasio kontras WCAG antara dua warna dan menunjukkan apakah pasangan tersebut memenuhi level AA atau AAA untuk teks normal, teks besar, dan komponen antarmuka non-teks. Semuanya dihitung secara lokal di browser Anda; warna yang Anda masukkan tidak pernah diunggah.

Cara menggunakan Pemeriksa Kontras, langkah demi langkah

  1. Masukkan atau pilih warna latar depan (teks).
  2. Masukkan atau pilih warna latar belakang.
  3. Baca rasio kontras dan lencana AA/AAA untuk teks normal, teks besar, dan komponen antarmuka non-teks.
  4. Gunakan Tukar warna untuk memeriksa pasangan tersebut secara terbalik.

Kasus penggunaan umum

  • Memeriksa warna utama sebuah merek terhadap putih atau hitam sebelum merilis komponen tombol.
  • Memverifikasi bahwa teks isi berwarna abu-abu redup masih memenuhi AA di atas latar kartu terang.
  • Memastikan warna tautan dalam sebuah paragraf mencapai ambang 4,5:1 untuk teks normal.
  • Menguji apakah judul besar berbobot ringan masih memenuhi ambang 3:1 yang lebih longgar untuk teks besar.

Pertanyaan yang sering diajukan

Apakah alat ini mengirim warna saya ke server?

Tidak, perhitungan sepenuhnya berjalan di browser Anda dengan JavaScript; tidak ada yang Anda masukkan yang diunggah.

Rasio kontras berapa yang dibutuhkan untuk AA atau AAA?

WCAG 2.x mensyaratkan 4,5:1 untuk AA teks normal, 7:1 untuk AAA teks normal, 3:1 untuk AA teks besar, dan 4,5:1 untuk AAA teks besar.

Apa yang dianggap teks besar?

Minimal 24px (18pt) berat normal, atau sekitar 18,7px (14pt) tebal; yang lebih kecil menggunakan ambang teks normal.

Mengapa menukar warna latar depan dan latar belakang tidak mengubah rasio?

Rumus rasio ini simetris: rumus hanya membandingkan luminansi yang lebih terang dan lebih gelap, bukan warna mana yang dipakai untuk teks. Menukar warna tetap berguna karena menunjukkan apakah pasangan tersebut juga berfungsi dengan peran terbalik, misalnya teks gelap di atas chip terang dibandingkan teks terang di atas chip gelap.

Apakah lolos AA menjamin desain saya sudah aksesibel?

Tidak. Kontras hanyalah satu kriteria keberhasilan WCAG di antara banyak kriteria lain. Pemilihan warna untuk orang dengan defisiensi penglihatan warna, visibilitas fokus, pengubahan ukuran teks, dan navigasi keyboard adalah pemeriksaan terpisah; simulator buta warna di situs ini mencakup salah satunya.

Apakah ini alat resmi dari W3C atau WebAIM?

Bukan. Alat ini menerapkan rumus kontras WCAG 2.x yang bersifat publik secara independen dan tidak berafiliasi dengan W3C atau organisasi aksesibilitas mana pun.