Cara menggunakan
- Masukkan warna teks (latar depan) dan warna latar belakang dalam format HEX, rgb(), hsl(), atau format CSS lainnya, atau gunakan pemilih warna.
- Lihat rasio kontras dan hasil lulus atau gagal untuk setiap persyaratan WCAG.
- Jika suatu persyaratan tidak terpenuhi, pilih target dan terapkan warna yang disarankan. Warna ini mempertahankan rona dan hanya mengubah kecerahan.
- Gunakan “Tukar” untuk memeriksa kombinasi sebaliknya, misalnya teks terang pada tombol gelap.
Cara kerja
Rasio ini mengikuti definisi WCAG 2.2: luminans relatif setiap warna dihitung dari kanal sRGB-nya, dan rasionya adalah (warna lebih terang + 0.05) ÷ (warna lebih gelap + 0.05). Nilainya berkisar dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih).
Persyaratan yang diperiksa: kriteria keberhasilan 1.4.3 (AA) mensyaratkan 4.5:1 untuk teks biasa dan 3:1 untuk teks besar; 1.4.6 (AAA) mensyaratkan 7:1 dan 4.5:1; 1.4.11 mensyaratkan 3:1 untuk komponen antarmuka pengguna dan grafik bermakna seperti batas input dan ikon. Teks besar berukuran minimal 24px dengan ketebalan normal atau sekitar 18.66px dengan cetak tebal. WCAG tidak mengizinkan pembulatan ke atas, jadi 4.49:1 tidak memenuhi AA meskipun hampir mencapai batas; rasio yang ditampilkan di sini dipotong, bukan dibulatkan.
Saran mempertahankan rona dan kroma teks dalam OKLCH, lalu mencari tingkat kecerahan terdekat—lebih gelap atau lebih terang—yang memenuhi target. Rasio kontras hanyalah salah satu faktor keterbacaan: ketebalan dan ukuran font serta perbedaan penglihatan warna juga berpengaruh. WCAG 2.2 adalah rekomendasi W3C terbaru yang menjadi acuan bagi sebagian besar peraturan aksesibilitas.
Contoh
Teks abu-abu yang hampir memenuhi syarat
Warna #777777 di atas putih menghasilkan rasio 4.48:1. Rasio ini memenuhi syarat untuk teks besar dan komponen UI, tetapi tidak memenuhi AA untuk teks biasa. Abu-abu terdekat yang memenuhi syarat adalah sekitar #767676, dengan rasio 4.54:1.
Teks putih pada tombol bermerek
Teks putih di atas #ff8800 menghasilkan rasio sekitar 2.4:1, bahkan tidak memenuhi tingkat 3:1 untuk teks besar. Solusi yang umum adalah menggelapkan warna oranye atau menggunakan teks berwarna gelap; saran menunjukkan seberapa gelap warna teks yang diperlukan.
Memeriksa batas kolom formulir
Batas abu-abu muda #cccccc di atas putih menghasilkan rasio sekitar 1.6:1. Berdasarkan kriteria 1.4.11, batas yang menandai input memerlukan rasio 3:1, jadi gunakan warna sekitar #949494 atau yang lebih gelap.
Pertanyaan yang sering diajukan
Berapa rasio kontras yang diperlukan untuk WCAG AA?
4.5:1 untuk teks isi biasa, 3:1 untuk teks besar (24px atau 18.66px dengan cetak tebal), serta 3:1 untuk komponen UI dan grafik bermakna. Tingkat AAA mensyaratkan rasio 7:1 untuk teks dan 4.5:1 untuk teks besar.
Apakah teks logo atau tombol yang dinonaktifkan harus memenuhi syarat?
Tidak. WCAG mengecualikan teks dalam logo dan nama merek, teks dekoratif murni, serta teks dalam komponen antarmuka pengguna yang tidak aktif (dinonaktifkan).
Mengapa hasil saya sedikit berbeda dari alat pemeriksa lain?
Beberapa alat membulatkan rasio ke satu angka desimal atau membulatkannya ke atas. WCAG membandingkan nilai yang tepat, jadi alat ini memotong rasio hingga dua angka desimal. Perbedaan kecil juga dapat terjadi karena warna yang dimasukkan memiliki alpha.
Bagaimana dengan metode kontras APCA yang baru?
APCA adalah metode berbeda yang diusulkan untuk versi WCAG mendatang. Metode ini bukan bagian dari WCAG 2.2, yang diukur oleh alat ini dan menjadi acuan aturan aksesibilitas saat ini.
Privasi
Warna diperiksa di browser Anda. Tidak ada yang diunggah atau disimpan.