Bagaimana cara memeriksa apakah warna teks dan latar belakang saya lulus WCAG?

Masukkan kode hex di Warna teks dan Warna latar belakang, atau gunakan pemilih warna. Rasio kontras akan muncul dengan status Lulus atau Gagal untuk teks normal dan besar AA dan AAA, serta komponen UI.

Rasio kontras apa yang disyaratkan oleh WCAG AA?

AA membutuhkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar. AAA membutuhkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Komponen UI dan objek grafis membutuhkan 3:1.

Apa yang dianggap sebagai teks besar?

Alat ini menganggap teks biasa 18pt (24px), atau teks tebal 14pt (18,66px), sebagai teks besar. Teks yang lebih kecil harus memenuhi ambang batas teks normal yang lebih tinggi.

Warna saya gagal AA. Bagaimana cara memperbaikinya?

Gunakan saran sekali klik Perbaiki warna teks atau Perbaiki latar belakang. Saran tersebut menyesuaikan kecerahan sambil mempertahankan rona yang sama hingga pasangan mencapai 4,5:1.

Format warna apa yang diterima, dan bisakah saya memilih dari layar?

Menerima nilai hex 3 digit dan 6 digit, seperti #abc atau #1e293b. Tombol Pilih warna dari layar muncul di browser yang mendukung API EyeDropper, seperti Chromium.

Apakah benar-benar gratis?

Ya. Setiap alat gratis digunakan, tanpa akun dan tanpa kartu kredit. Prosesnya berjalan di perangkat Anda, bukan di server kami, itulah yang membuatnya tetap gratis.

Apakah berfungsi di mobile?

Ya. Berjalan di browser seluler terbaru di iOS dan Android, tanpa perlu memasang apa pun.

🌓

Pemeriksa Kontras Warna WCAG gratis

Periksa apakah dua warna memenuhi standar kontras WCAG AA dan AAA untuk aksesibilitas. Pratinjau langsung di berbagai ukuran teks dengan saran otomatis saat kontras terlalu rendah.

Berjalan di browser AndaTanpa daftar, tanpa pop-upTidak perlu loginGratis selamanya

Berfungsi offline setelah dimuat

Warna teks

Warna latar belakang

Teks judul besar

Teks isi sedang (18px) untuk membaca dan konten.

Teks isi normal (16px) untuk paragraf.

Teks isi kecil (14px) untuk keterangan dan metadata.

14,63:1

Rasio kontras

✓WCAG AA — Teks normal

Membutuhkan 4.5:1 · Anda memiliki 14,63:1

✓WCAG AA — Teks besar

Membutuhkan 3.0:1 · Anda memiliki 14,63:1

✓WCAG AAA — Teks normal

Membutuhkan 7.0:1 · Anda memiliki 14,63:1

✓WCAG AAA — Teks besar

Membutuhkan 4.5:1 · Anda memiliki 14,63:1

✓Komponen UI / objek grafis

Membutuhkan 3.0:1 · Anda memiliki 14,63:1

Prasetel cepat

Berdasarkan panduan kontras WCAG 2.1. Teks besar = 18pt (24px) normal atau 14pt (18,66px) tebal. Kode hex diperbarui dua arah: ketik hex atau pilih warna, kedua input tetap tersinkron.

Penggunaan umum

Audit Halaman Web untuk Kepatuhan WCAGVerifikasi bahwa warna teks situs Anda memenuhi standar kontras WCAG AA atau AAA untuk aksesibilitas.
Verifikasi Kombinasi Warna MerekUji pasangan palet warna merek Anda untuk memastikan mereka bekerja untuk desain UI yang dapat diakses.
Uji Palet Warna Mode GelapTeks terang di latar belakang gelap masih bisa gagal kontras - periksa pasangan palet mode gelap Anda di sini.
Kombinasi Warna untuk Materi CetakPoster, tanda, dan materi cetak juga memerlukan kontras yang dapat dibaca - terutama untuk pembaca yang lebih tua.
Rancang Warna Tombol yang Dapat DiaksesPastikan CTA, tombol tindakan, dan tautan melewati WCAG terhadap latar belakang mereka.

Cara kerja

Pemeriksaan kontras berjalan sepenuhnya di browser Anda menggunakan algoritma luminansi relatif WCAG 2.1 — tanpa library, tanpa server, hanya matematika tulisan tangan yang mengikuti spesifikasi secara persis. Setiap hasil diperbarui secara real time saat Anda mengetik atau memilih warna.

1
Masukan heksa dan normalisasi
Nilai heksa 3-digit (#abc) maupun 6-digit (#aabbcc) diterima dan dinormalisasi menjadi triple RGB penuh. Masukan tidak valid langsung ditolak alih-alih diam-diam kembali ke hitam, sehingga tepi merah muncul alih-alih hasil lolos yang menyesatkan.
2
Perhitungan luminansi WCAG
Setiap warna dikonversi menjadi luminansi relatif menggunakan rumus WCAG 2.1: nilai kanal sRGB dilinearisasi dengan koreksi gamma sepotong-sepotong (dibagi 12,92 di bawah 0,03928, dipangkatkan 2,4 di atasnya), lalu dibobotkan sebagai 0,2126R + 0,7152G + 0,0722B.
3
Rasio kontras dan pemeriksaan kepatuhan
Rasio kontras dihitung sebagai (lebih_terang + 0,05) / (lebih_gelap + 0,05) dan diperiksa terhadap kelima ambang WCAG: teks normal AA (4,5:1), teks besar AA (3:1), teks normal AAA (7:1), teks besar AAA (4,5:1), dan komponen UI (3:1). Hasil diperbarui setiap ketukan tombol.
4
Saran perbaikan yang mempertahankan hue
Ketika pasangan gagal WCAG AA, alat ini mencari ruang lightness HSL — melangkah keluar dari lightness asli di kedua arah — untuk menemukan varian terdekat dari setiap warna yang lolos 4,5:1 sambil mempertahankan hue dan saturasi yang sama. EyeDropper API (Chromium) juga tersedia untuk mengambil sampel warna apa pun langsung dari layar Anda.

Alat terkait

👁️

Simulator Buta Warna

Lihat tampilan desain Anda bagi orang dengan defisiensi penglihatan warna. Mensimulasikan protanopia, deuteranopia, tritanopia, akromatopsia, dan anomali yang lebih ringan.

CobaFile tetap lokal

📐

Berapa Resolusi Layar Saya

Lihat resolusi layar Anda dalam piksel CSS dan nyata, ukuran jendela, rasio piksel, kedalaman warna, HDR, dukungan sentuh dan refresh rate, lalu salin semuanya.

Coba

🖥️

Tes Piksel Mati

Periksa layar Anda dari piksel mati atau macet dengan warna hitam, putih, merah, hijau, biru dan abu-abu layar penuh, plus perbaikan piksel macet opsional.