Pertama, identifikasi objek yang akan diukur.
Masukkan warna teks dan warna latar belakang sebenarnya, menggunakan tiga atau enam bit HEX. Alat ini menghitung berdasarkan warna sRGB buram; untuk warna transparan, gambar latar belakang, dan gradien, Anda perlu terlebih dahulu menentukan latar belakang komposit sebenarnya di lokasi teks, dan Anda tidak dapat begitu saja menggunakan salah satu nilai warna sebagai pengganti.
Hasil pengecekan kontras teks pada rangkaian warna ini tidak menunjukkan bahwa seluruh halaman memenuhi peringkat WCAG. Ukuran font, jenis font, status interaktif, dan persyaratan aksesibilitas lainnya masih perlu diperiksa pada halaman sebenarnya.
Cara menghitung rasio
Bagilah setiap saluran warna 8-bit dengan 255 untuk mendapatkan c. Jika c ≤ 0,04045, nilai linearnya adalah c ÷ 12,92; jika tidak, nilainya adalah ((c + 0,055) ÷ 1,055) pangkat 2,4. Kecerahan relatif L = 0,2126R + 0,7152G + 0,0722B, di mana R, G, dan B menggunakan nilai linear di atas.
(L lebih tinggi + 0.05) ÷ (L lebih rendah + 0.05). Hitam dan putih menghasilkan 21:1; warna identik menghasilkan 1:1. Menukar teks dan latar belakang tidak mengubah rasio kontras, tetapi mengubah tampilannya.
Jangan salah mengartikan pembulatan sebagai lulus.
Teks normal memerlukan minimal 4.5:1 untuk AA dan 7:1 untuk AAA. Teks besar memerlukan 3:1 dan 4.5:1. Teks besar berukuran minimal 18pt, atau 14pt dengan huruf tebal. Jangan gunakan ambangnya untuk teks kecil.
Rasio kontras #777777 pada latar belakang putih kira-kira 4,478:1, yang tidak memenuhi persyaratan 4,5:1 untuk teks biasa (AA). Meskipun antarmuka menampilkannya sebagai 4,5, nilai yang ditampilkan tidak dapat digunakan untuk penilaian. Situs ini menampilkan tiga angka desimal; penilaian bersyarat menggunakan nilai lengkap yang dihitung.
Kembalikan pasangan warna ke antarmuka sebenarnya.
Pratinjau hanya menampilkan warna input, menggunakan 16px untuk teks isi dan 24px untuk judul. Pertama, periksa warna teks, latar belakang, ukuran font, dan ketebalan font yang sebenarnya pada halaman target, lalu periksa status normal, saat di-hover, dan saat fokus; jangan hanya memeriksa kumpulan warna yang paling bagus dalam draf desain.
Setelah teks secara bertahap digelapkan atau latar belakang diterangkan, perhitungan diulang, dan kemudian font dan pengalaman membaca pada perangkat nyata diperiksa. Tes kontras warna di sini tidak mengukur identifikasi buta warna, semantik ikon, atau kepatuhan halaman penuh; nilai warna dan lokasi verifikasi disimpan untuk tinjauan selanjutnya.