1:1 to 21:1 · AA · AAA
Penyemak kontras
Hitam pada putih mempunyai nisbah kontras WCAG 21:1, yang tertinggi mungkin, dan putih pada #0060fd mempunyai 5.13:1. Masukkan warna teks dan latar belakang untuk menyemak pasangan 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
Nisbah dan lima semakan dikemas kini semasa anda menaip. Nisbah dipotong kepada dua perpuluhan, tidak pernah dibundarkan ke atas, jadi 4.499 ditunjukkan sebagai 4.49:1 dan gagal semakan 4.5:1.
Scanned by 
NortonTM Safe Web
Sepintas lalu
- Harga
- Tiada caj
- Akaun
- Tidak diperlukan
- Muat naik
- Tidak berkenaan — anda menaip warna, tiada apa dihantar ke mana-mana
- Formula
- (luminans lebih cerah + 0.05) ÷ (luminans lebih gelap + 0.05)
- Ambang
- AA 4.5:1 teks biasa dan 3:1 teks besar; AAA 7:1 teks biasa dan 4.5:1 teks besar; 3:1 untuk bahagian antara muka
- Piawaian
- Takrifan WCAG 2.2 bagi luminans relatif dan nisbah kontras
Nisbah kontras pasangan yang terkenal
Baris ini dihasilkan oleh kod yang sama seperti penyemak. Tanda semak bermaksud pasangan itu memenuhi keperluan; tanda silang bermaksud tidak.
| Warna teks | Latar belakang | Nisbah | AA biasa | AA besar | AAA biasa | AAA besar | Bahagian antara muka |
|---|---|---|---|---|---|---|---|
| #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 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Semakan | Nisbah minimum |
|---|---|
| AA, teks biasa | 4.5:1 |
| AA, teks besar | 3:1 |
| AAA, teks biasa | 7:1 |
| AAA, teks besar | 4.5:1 |
| AA, bahagian antara muka dan grafik | 3:1 |
Cara menyemak pasangan warna
Masukkan kedua-dua warna
Taip warna teks dan warna latar belakang dalam mana-mana tatatanda CSS, atau gunakan pemilih. Butang tukar ganti menukar kedudukan kedua-duanya, yang berguna untuk teks cerah pada latar belakang gelap.
Baca nisbah
Nisbah bermula dari 1:1 (warna serupa) hingga 21:1 (hitam pada putih). Contoh di bawah medan menunjukkan pasangan itu pada 16 px dan 24 px, supaya anda dapat menilai hasilnya dengan mata sendiri.
Lihat lima semakan
Setiap jubin menyatakan Lulus atau Gagal untuk satu keperluan WCAG: AA dan AAA untuk teks biasa, AA dan AAA untuk teks besar, dan AA untuk bahagian antara muka. Jika teks biasa gagal AA, halaman mencadangkan warna teks terdekat yang lulus.
Bagaimana nisbah kontras dikira
WCAG mengukur kontras melalui luminans relatif, iaitu kecerahan warna dari 0 (hitam) hingga 1 (putih). Setiap saluran merah, hijau dan biru dibahagi dengan 255; nilai sehingga 0.04045 dibahagi dengan 12.92, dan nilai yang lebih besar dikuasakan: (nilai + 0.055) dibahagi 1.055, kemudian dikuasakan 2.4. Luminans kemudiannya ialah 0.2126 kali merah campur 0.7152 kali hijau campur 0.0722 kali biru, yang mencerminkan sekuat mana mata bertindak balas terhadap setiap satu. Nisbah kontras ialah luminans yang lebih cerah campur 0.05, dibahagi luminans yang lebih gelap campur 0.05.
WCAG 2 meminta sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar pada tahap AA, dan 7:1 serta 4.5:1 pada tahap AAA. Teks besar ialah sekurang-kurangnya 18 poin, iaitu 24 piksel CSS, atau sekurang-kurangnya 14 poin dalam huruf tebal, kira-kira 18.66 piksel. Kriteria kejayaan 1.4.11 meminta 3:1 untuk bahagian antara muka dan grafik yang perlu dilihat oleh pembaca, seperti sempadan medan atau garisan carta. Nisbah dibandingkan dengan setiap ambang tanpa pembundaran. Jika warna mempunyai ketelusan, latar belakang telus diletakkan di atas putih dan warna teks telus di atas latar belakang sebelum mengukur. Halaman ini hanya melaksanakan WCAG 2.x; ia tidak mengira APCA, yang dibincangkan untuk versi garis panduan kemudian.
Soalan kontras
Apakah nisbah kontras yang diperlukan oleh WCAG untuk teks?
Pada tahap AA, teks biasa memerlukan sekurang-kurangnya 4.5:1 dan teks besar sekurang-kurangnya 3:1. Pada tahap AAA angkanya ialah 7:1 untuk teks biasa dan 4.5:1 untuk teks besar. Nisbah diukur antara warna teks dan warna yang tepat di belakangnya.
Apakah yang dikira sebagai teks besar?
WCAG mentakrifkan teks besar sebagai sekurang-kurangnya 18 poin, iaitu 24 piksel CSS, atau sekurang-kurangnya 14 poin dalam huruf tebal, iaitu kira-kira 18.66 piksel CSS. Apa-apa yang lebih kecil dikira teks biasa dan memerlukan nisbah yang lebih tinggi.
Apakah kelabu paling cerah yang lulus AA pada putih?
#767676 pada putih mempunyai nisbah 4.54:1 dan lulus semakan 4.5:1 untuk teks biasa. Kelabu seterusnya yang lebih cerah, #777777, mendapat 4.47:1 dan gagal. Untuk 7:1 (AAA), kelabu paling cerah ialah #595959, yang mendapat 7.00:1.
Mengapakah 4.49 gagal walaupun kelihatan seperti 4.5?
Semakan membandingkan nisbah tepat dengan ambang. Nisbah 4.499 berada di bawah 4.5, jadi ia gagal, dan halaman mencetaknya sebagai 4.49:1 dan bukan membundarkannya ke atas. Merah tulen pada putih ialah contoh sebenar: 3.99:1 gagal semakan 4.5:1 untuk teks biasa, walaupun hampir.
Berapakah kontras yang diperlukan oleh ikon, sempadan dan medan borang?
Kriteria kejayaan 1.4.11 Non-text Contrast, yang ditambah dalam WCAG 2.1, meminta sekurang-kurangnya 3:1 antara bahagian antara muka atau grafik yang perlu dilihat oleh pembaca, seperti sempadan medan, gelang fokus atau garisan carta, dan warna di sebelahnya. Kawalan yang dilumpuhkan dan grafik hiasan semata-mata dikecualikan.
Adakah nisbah yang lulus menjadikan halaman boleh diakses?
Tidak. Kontras ialah satu keperluan antara banyak yang lain. Saiz dan ketebalan fon, jarak baris, warna sahaja yang membawa makna, keterlihatan fokus, teks di atas imej dan kecerunan, serta cara orang dengan jenis penglihatan warna yang berbeza melihat halaman, semuanya penting. Gunakan keputusan ini sebagai satu input, dan uji halaman dengan kandungan sebenar.