Pemeriksa kontras warna untuk WCAG 2.2 AA dan AAA

Cara memakai

Ketik warna teks di Warna teks dan warna di belakangnya di Warna latar belakang.
Baca Rasio kontras. Keempat pemeriksaan teks dan pemeriksaan komponen menyatakan tingkat mana yang dicapai pasangan itu.
Untuk teks isi, targetkan AA, teks biasa. Teks besar memerlukan kontras yang lebih sedikit; ukurannya ada di bagian di bawah.
Jika sebuah pemeriksaan gagal, mulai dari Warna teks yang disarankan dan uji hasilnya pada desain Anda yang sebenarnya.

Cara rasio dihitung

WCAG 2.2 memberi setiap warna sebuah luminansi relatif. Setiap nilai merah, hijau dan biru pertama-tama dibuat linear: nilai yang paling besar 0,04045 (pada skala 0 sampai 1) dibagi 12,92, dan nilai yang lebih besar dipangkatkan 2,4 setelah ditambah 0,055 dan dibagi 1,055. Ketiga hasil itu lalu dibobot 0,2126 untuk merah, 0,7152 untuk hijau dan 0,0722 untuk biru. Rasio kontras adalah luminansi warna yang lebih terang ditambah 0,05, dibagi luminansi warna yang lebih gelap ditambah 0,05.

Hasilnya berkisar dari 1, untuk dua warna yang sama, sampai 21, untuk hitam di atas putih.

L = 0,2126 × R + 0,7152 × G + 0,0722 × B
rasio = (L1 + 0,05) ÷ (L2 + 0,05)

L1  luminansi warna yang lebih terang
L2  luminansi warna yang lebih gelap

Tingkatannya

WCAG 2.2 menetapkan rasio minimum berikut. Tingkat dan kriteria keberhasilannya ditampilkan agar Anda dapat mencari rumusan persisnya.

AA, teks biasa: 4,5:1 (kriteria keberhasilan 1.4.3).
AA, teks besar: 3:1, untuk teks 18 pt, atau 14 pt jika tebal (1.4.3).
AAA, teks biasa: 7:1 (kriteria keberhasilan 1.4.6).
AAA, teks besar: 4,5:1 (1.4.6).
Tombol, batas dan ikon yang dibutuhkan pembaca untuk memakai halaman: 3:1 (1.4.11).

Yang tidak dicakup pemeriksa ini

Teks di atas foto, gambar dan gradien: latar belakang berubah di sepanjang teks, jadi periksa piksel yang sebenarnya di sana.
Warna transparan: masukkan warna yang sebenarnya dilihat pembaca di halaman.
Keadaan hover, fokus dan keadaan lain: periksa warna setiap keadaan juga.
Apakah teks cukup besar bagi pembaca: ukuran dan ketebalan huruf yang menentukannya, dan halaman tidak dapat mengetahuinya.

Contoh: abu-abu #777 di atas putih

Abu-abu #777 memiliki setiap kanal 119 dari 255, yang memberi luminansi relatif sekitar 0,184. Putih memiliki luminansi 1, sehingga rasionya (1 + 0,05) ÷ (0,184 + 0,05) = 4,48.

Jadi #777 di atas putih gagal AA untuk teks biasa dengan selisih kecil, lulus AA untuk teks besar dan pemeriksaan 3:1 untuk komponen, serta gagal AAA. Abu-abu yang lebih gelap dan terdekat yang lulus AA adalah #767676, dengan rasio 4,54.

Pemeriksaan	Perlu	#777 di atas putih
AA, teks biasa	4,5:1	4,48: gagal
AA, teks besar	3:1	Lulus
AAA, teks biasa	7:1	Gagal
AAA, teks besar	4,5:1	Gagal
Tombol, batas dan ikon	3:1	Lulus

Pertanyaan yang sering diajukan

Berapa rasio kontras yang dibutuhkan teks isi?

Untuk WCAG 2.2 tingkat AA, teks biasa memerlukan paling sedikit 4,5:1 dan teks besar memerlukan 3:1. Tingkat AAA meminta 7:1 untuk teks biasa dan 4,5:1 untuk teks besar.

Mengapa rasio 4,4999 tampil sebagai 4,50 tetapi tetap gagal?

Pemeriksaan memakai rasio yang persis, bukan dua desimal di layar. Rasio yang sedikit di bawah 4,5 dibulatkan menjadi 4,50 saat ditampilkan, tetapi ia belum mencapai 4,5:1, sehingga pemeriksaan gagal.

Apakah urutan kedua warna mengubah rasionya?

Tidak. Rasionya sama, mana pun yang menjadi teks dan mana yang menjadi latar belakang, karena warna yang lebih terang selalu menjadi pembilang.

Apa itu warna yang disarankan?

Itu adalah warna teks yang paling dekat dengan warna Anda dalam tingkat kecerahan dan mencapai 4,5:1 pada latar belakang Anda. Ia mempertahankan rona dan saturasi yang sama, dan lebih gelap atau lebih terang, mana pun perubahannya yang lebih kecil.

Bisakah saya memasukkan warna dengan transparansi?

Tidak di sini. Masukkan warna yang sebenarnya dilihat pengunjung, yaitu warna transparan yang sudah bercampur dengan latar belakang di belakangnya.

Apakah warna saya dikirim ke server?

Tidak. Perhitungan berjalan di peramban Anda, dan tidak ada yang Anda masukkan yang disimpan atau dikirim.

Apakah rasio yang lulus berarti teks mudah dibaca?

Tidak selalu. Rasio adalah minimum yang ditetapkan WCAG. Ukuran dan ketebalan huruf, jarak, serta penglihatan pembaca juga berpengaruh, jadi uji desain yang sebenarnya dengan pengguna sungguhan jika memungkinkan.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.

Hasil