1:1 sampai 21:1 · AA · AAA
Pemeriksa kontras
Hitam di atas putih punya rasio kontras WCAG 21:1, yang tertinggi, dan putih di atas #0060fd punya 5.13:1. Masukkan warna teks dan latar untuk memeriksa pasangan warna Anda.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Rasio dan kelima pemeriksaan diperbarui saat Anda mengetik. Rasio dipotong pada dua desimal, tidak pernah dibulatkan ke atas, jadi 4.499 tampil sebagai 4.49:1 dan gagal pada pemeriksaan 4.5:1.
Scanned by 
NortonTM Safe Web
Sekilas
- Harga
- Tanpa biaya
- Akun
- Tidak perlu
- Unggah
- Tidak berlaku — Anda mengetik warna, tidak ada yang dikirim ke mana pun
- Rumus
- (luminans lebih terang + 0.05) ÷ (luminans lebih gelap + 0.05)
- Ambang batas
- AA 4.5:1 teks normal dan 3:1 teks besar; AAA 7:1 teks normal dan 4.5:1 teks besar; 3:1 untuk bagian antarmuka
- Standar
- Definisi WCAG 2.2 untuk luminans relatif dan rasio kontras
Rasio kontras pasangan warna yang dikenal
Baris-baris ini dihasilkan oleh kode yang sama dengan pemeriksa. Tanda centang berarti pasangan memenuhi persyaratan; tanda silang berarti tidak.
| Warna teks | Latar | Rasio | AA normal | AA besar | AAA normal | AAA besar | Bagian antarmuka |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Pemeriksaan | Rasio minimum |
|---|---|
| AA, teks normal | 4.5:1 |
| AA, teks besar | 3:1 |
| AAA, teks normal | 7:1 |
| AAA, teks besar | 4.5:1 |
| AA, bagian antarmuka dan grafik | 3:1 |
Cara memeriksa pasangan warna
Masukkan kedua warna
Ketik warna teks dan warna latar dalam notasi CSS apa pun, atau pakai pemilih. Tombol tukar menukar keduanya, berguna untuk teks terang di atas latar gelap.
Baca rasionya
Rasio berkisar dari 1:1 (warna identik) sampai 21:1 (hitam di atas putih). Contoh di bawah kolom menampilkan pasangan itu pada 16 px dan 24 px, sehingga Anda bisa menilai hasilnya dengan mata sendiri.
Lihat kelima pemeriksaan
Setiap ubin menyatakan Lulus atau Gagal untuk satu persyaratan WCAG: AA dan AAA untuk teks normal, AA dan AAA untuk teks besar, dan AA untuk bagian antarmuka. Jika teks normal gagal AA, halaman menyarankan warna teks terdekat yang lulus.
Bagaimana rasio kontras dihitung
WCAG mengukur kontras melalui luminans relatif, yaitu kecerahan warna dari 0 (hitam) sampai 1 (putih). Setiap kanal merah, hijau, dan biru dibagi 255; nilai sampai 0.04045 dibagi 12.92, dan nilai yang lebih besar dipangkatkan: (nilai + 0.055) dibagi 1.055, lalu dipangkatkan 2.4. Luminans kemudian adalah 0.2126 kali merah ditambah 0.7152 kali hijau ditambah 0.0722 kali biru, yang mencerminkan seberapa kuat mata menanggapi masing-masing. Rasio kontras adalah luminans yang lebih terang ditambah 0.05, dibagi luminans yang lebih gelap ditambah 0.05.
WCAG 2 meminta setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar pada level AA, serta 7:1 dan 4.5:1 pada level AAA. Teks besar adalah setidaknya 18 poin, yaitu 24 piksel CSS, atau setidaknya 14 poin tebal, sekitar 18.66 piksel. Kriteria keberhasilan 1.4.11 meminta 3:1 untuk bagian antarmuka dan grafik yang perlu dilihat pembaca, seperti batas kolom atau garis grafik. Rasio dibandingkan dengan tiap ambang tanpa pembulatan. Jika sebuah warna punya transparansi, latar transparan diletakkan di atas putih dan warna teks transparan di atas latar sebelum diukur. Halaman ini hanya menerapkan WCAG 2.x; halaman ini tidak menghitung APCA, yang dibahas untuk versi pedoman yang akan datang.
Pertanyaan tentang kontras
Berapa rasio kontras yang diminta WCAG untuk teks?
Pada level AA, teks normal membutuhkan setidaknya 4.5:1 dan teks besar setidaknya 3:1. Pada level AAA angkanya 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Rasio diukur antara warna teks dan warna yang tepat di belakangnya.
Apa yang dihitung sebagai teks besar?
WCAG mendefinisikan teks besar sebagai setidaknya 18 poin, yaitu 24 piksel CSS, atau setidaknya 14 poin tebal, yaitu sekitar 18.66 piksel CSS. Apa pun yang lebih kecil dihitung sebagai teks normal dan membutuhkan rasio yang lebih tinggi.
Abu-abu paling terang apa yang lulus AA di atas putih?
#767676 di atas putih punya rasio 4.54:1 dan lulus pemeriksaan 4.5:1 untuk teks normal. Abu-abu yang sedikit lebih terang, #777777, mendapat 4.47:1 dan gagal. Untuk 7:1 (AAA), abu-abu paling terang adalah #595959, yang mendapat 7.00:1.
Mengapa 4.49 gagal padahal tampak seperti 4.5?
Pemeriksaan membandingkan rasio eksak dengan ambangnya. Rasio 4.499 berada di bawah 4.5, jadi gagal, dan halaman mencetaknya sebagai 4.49:1 alih-alih membulatkannya ke atas. Merah murni di atas putih adalah contoh nyata: 3.99:1 gagal pada pemeriksaan 4.5:1 untuk teks normal, meskipun dekat.
Kontras apa yang dibutuhkan ikon, batas, dan kolom formulir?
Kriteria keberhasilan 1.4.11 Non-text Contrast, yang ditambahkan di WCAG 2.1, meminta setidaknya 3:1 antara bagian antarmuka atau grafik yang perlu dilihat pembaca, seperti batas kolom, cincin fokus, atau garis grafik, dan warna di sebelahnya. Kontrol yang dinonaktifkan dan grafik yang murni dekoratif dikecualikan.
Apakah rasio yang lulus membuat halaman aksesibel?
Tidak. Kontras adalah satu persyaratan di antara banyak lainnya. Ukuran dan ketebalan huruf, spasi baris, makna yang hanya dibawa warna, visibilitas fokus, teks di atas gambar dan gradien, serta cara orang dengan penglihatan warna yang berbeda melihat halaman juga penting. Pakai hasil ini sebagai salah satu masukan, dan uji halaman dengan konten sungguhan.