WCAG Contrast Checker
WCAG Contrast Checker — berjalan di browser. Input tidak disimpan.
Kontras warna WCAG
Masukkan nilai, lalu tekan Hitung.
Cara menggunakan
- Masukkan HEX latar depan (teks) dan HEX latar belakang. Default #111111 dan #ffffff.
- Tekan Hitung untuk pratinjau kalimat sampel, rasio kontras, dan peringkat teks normal / teks besar.
- Untuk membalik warna, tekan Tukar warna lalu hitung lagi.
- Jika peringkat gagal, gelapkan atau cerahkan HEX sedikit lalu hitung lagi.
- Atur ulang memulihkan pasangan hitam-putih default. Hanya HEX buram yang didukung.
Konsep utama
Pemeriksaan kontras WCAG adalah ukuran aksesibilitas web seberapa baik teks isi dan tombol menonjol dari latar. Rasio kontras dihitung dari luminansi relatif dan dibandingkan dengan WCAG 2.x. Teks normal adalah AA 4,5:1 dan AAA 7:1; teks besar (sekitar 18 pt atau 14 pt tebal) adalah AA 3:1 dan AAA 4,5:1. Ini pemeriksa kontras yang menampilkan rasio WCAG 2 dan AA/AAA untuk apakah teks isi dan tombol dapat dibedakan dari latar. Ini pemeriksa untuk melihat cepat rasio kontras dan AA/AAA warna isi versus HEX latar dalam tinjauan aksesibilitas. Bukan penetapan hukum final.
Hasil adalah perhitungan acuan dan tidak menggantikan audit aksesibilitas final atau kesesuaian hukum. Warna semi-transparan dengan alfa, gradien, dan teks pada gambar mungkin butuh lebih dari rumus ini. Perhitungan hanya di browser. Rumus luminansi relatif mengasumsikan HEX sRGB buram. Hamparan tembus dan huruf pada foto bisa berbeda dari kenyataan. Ambang teks besar dan teks normal berbeda, jadi hitung warna judul dan warna isi terpisah.
Contoh
Latar depan #111111 pada latar #ffffff menghasilkan rasio sekitar 19:1, dekat AAA untuk teks normal dan besar. Abu-abu muda #9ca3af pada putih sering gagal AA untuk teks normal. Tukar warna menggelapkan latar dan mengubah kesan pratinjau. Teks #2563eb pada #ffffff bisa mendarat di rentang tengah dan hampir lulus atau gagal AA teks normal. Coba biru lebih gelap. Teks #6b7280 pada #f9fafb punya rasio rendah dan sering gagal teks normal. Mengubah teks ke #111 mendekati AAA.
Terkait: Palet warna · Konverter warna
Pertanyaan umum
Bagaimana ambang teks besar WCAG diterapkan?
Kriteria longgar 3:1 / 4,5:1 untuk 18 pt atau 14 pt tebal ditampilkan di kolom teks besar. Kolom itu ambang longgar untuk judul dan 18 pt ke atas. Asumsi 18 pt / 14 pt tebal hanya berlaku ke kolom teks besar.
Berapa rasio kontras WCAG AAA?
7:1 atau lebih untuk teks normal dan 4,5:1 atau lebih untuk teks besar. AA masing-masing 4,5:1 dan 3:1. AAA adalah 7:1 untuk salinan isi, jadi warna merek pucat sering gagal. Pastel merek sering melewatkan AAA.
Bisakah HEX dengan saluran alfa transparan dipakai untuk kontras?
Hanya HEX buram yang didukung. Transparansi tidak didukung; masukkan HEX final yang sudah dikomposit. Untuk tembus, komposit dulu, lalu masukkan HEX.
Kalimat apa yang dipakai di pratinjau kontras?
Menampilkan teks sampel “Sample 가나다” dengan latar depan dan latar yang sama. Pratinjau adalah kalimat sampel dan bisa berbeda dari ukuran komponen nyata.
Apakah pemeriksaan ini menjamin kesesuaian aksesibilitas hukum?
Ini perhitungan acuan. Lakukan audit final terpisah. Jangan perlakukan angka ini sebagai lulus hukum. Jangan ganti daftar periksa audit dengan angka ini saja.
Bisakah saya menukar latar depan dan latar sekaligus?
Tombol Tukar warna menukar dua nilai HEX. Tekan Hitung lagi. Anda juga bisa membandingkan pasangan mode gelap dengan Tukar warna.
Terakhir ditinjau: 2026-09-04