Cara menggunakannya
- Masukkan warna teks (latar depan) dan warna latar belakang sebagai HEX, rgb(), hsl() atau format CSS lain, atau gunakan pemilih warna.
- Baca nisbah kontras dan keputusan lulus atau gagal bagi setiap keperluan WCAG.
- Jika sesuatu keperluan gagal, pilih sasaran dan gunakan warna yang dicadangkan, yang mengekalkan rona dan hanya mengubah kecerahan.
- Gunakan “Tukar” untuk menyemak kombinasi sebaliknya, contohnya teks cerah pada butang gelap.
Cara ia berfungsi
Nisbah mengikut definisi WCAG 2.2: luminans relatif setiap warna dikira daripada saluran sRGB, dan nisbahnya ialah (lebih terang + 0.05) ÷ (lebih gelap + 0.05). Ia berjulat daripada 1:1 (warna sama) hingga 21:1 (hitam atas putih).
Keperluan yang disemak: kriteria kejayaan 1.4.3 (AA) memerlukan 4.5:1 untuk teks biasa dan 3:1 untuk teks besar; 1.4.6 (AAA) memerlukan 7:1 dan 4.5:1; 1.4.11 memerlukan 3:1 untuk bahagian antara muka pengguna dan grafik bermakna seperti sempadan input dan ikon. Teks besar ialah sekurang-kurangnya 24px biasa atau kira-kira 18.66px tebal. WCAG tidak membenarkan pembundaran ke atas, jadi 4.49:1 gagal AA walaupun hampir; nisbah yang dipaparkan di sini dipotong, bukan dibundarkan.
Cadangan ini mengekalkan hue dan chroma warna teks dalam OKLCH dan mencari kecerahan terdekat, lebih gelap atau lebih terang, yang memenuhi sasaran. Nisbah kontras ialah satu bahagian kebolehbacaan: ketebalan fon, saiz, dan perbezaan penglihatan warna juga penting, dan WCAG 2.2 ialah saranan W3C semasa yang dirujuk oleh kebanyakan undang-undang kebolehcapaian.
Contoh
Teks kelabu yang hampir lulus
#777777 pada putih memberikan 4.48:1. Itu lulus untuk teks besar dan komponen UI tetapi gagal AA untuk teks biasa. Kelabu yang paling hampir lulus ialah kira-kira #767676, yang mencapai 4.54:1.
Teks putih pada butang jenama
Putih pada #ff8800 memberikan kira-kira 2.4:1, yang gagal walaupun pada tahap 3:1 untuk teks besar. Menggelapkan oren atau menggunakan teks gelap adalah penyelesaian biasa; cadangan menunjukkan betapa gelap warna teks itu perlu.
Menyemak sempadan medan borang
Sempadan kelabu terang #cccccc pada putih adalah kira-kira 1.6:1. Di bawah kriteria 1.4.11, sempadan yang mengenal pasti input memerlukan 3:1, jadi sesuatu sekitar #949494 atau lebih gelap diperlukan.
Soalan Lazim
Apakah nisbah kontras yang saya perlukan untuk WCAG AA?
4.5:1 untuk teks isi biasa, 3:1 untuk teks besar (24px, atau 18.66px tebal) dan 3:1 untuk komponen UI dan grafik bermakna. AAA menaikkan teks kepada 7:1 dan teks besar kepada 4.5:1.
Adakah teks logo atau teks butang yang dilumpuhkan perlu lulus?
Tidak. WCAG mengecualikan teks dalam logo dan nama jenama, teks hiasan semata-mata dan teks dalam komponen antara muka pengguna yang tidak aktif (dilumpuhkan).
Mengapa keputusan saya berbeza sedikit daripada pemeriksa lain?
Sesetengah alat membundarkan nisbah kepada satu perpuluhan atau membundarkannya ke atas. WCAG membandingkan nilai tepat, jadi alat ini memotong kepada dua perpuluhan. Perbezaan kecil juga boleh datang daripada warna yang dimasukkan dengan alfa.
Bagaimana pula dengan kaedah kontras APCA yang baharu?
APCA ialah kaedah berbeza yang dicadangkan untuk versi WCAG masa depan. Ia bukan sebahagian daripada WCAG 2.2, iaitu yang diukur oleh alat ini dan yang dirujuk oleh peraturan kebolehcapaian semasa.
Privasi
Warna disemak dalam pelayar anda. Tiada apa-apa dimuat naik atau disimpan.