Pemeriksa Kontras (nilai WCAG AA / AAA)

Cara kerja rasio kontras

WCAG (Web Content Accessibility Guidelines) mendefinisikan kontras sebagai rasio antara luminansi relatif dua warna. Rumusnya melinearkan setiap saluran sRGB, membobotnya berdasarkan sensitivitas mata manusia (R 0,2126, G 0,7152, B 0,0722), kemudian menghitung (lebih terang + 0,05) / (lebih gelap + 0,05). Hasilnya berkisar dari 1:1 (identik) hingga 21:1 (hitam di atas putih).

Kami menghitung ini di browser Anda menggunakan rumus WCAG 2.x resmi. Empat lencana nilai memeriksa terhadap ambang batas AA 4,5:1 (normal) dan 3:1 (besar), dan AAA 7:1 (normal) dan 4,5:1 (besar). 'Teks besar' adalah 24px / 18pt, atau 18,66px / 14pt tebal.

Mengapa lolos AA sebagai minimum

AA adalah tingkat yang dapat ditegakkan secara hukum di banyak yurisdiksi (ADA AS, EU EN 301 549, UK Equality Act untuk layanan digital). Gagal AA pada teks isi adalah masalah aksesibilitas yang paling umum dan termudah diperbaiki selama desain daripada setelah peluncuran.

AAA direkomendasikan untuk bacaan panjang, layanan pemerintah, dan antarmuka berisiko tinggi. Ini ketat — insting pertama desainer dengan abu-abu pucat di atas putih biasanya mudah gagal AAA. Jika situs Anda kebanyakan menyajikan konten yang dilihat sekilas, targetkan AA; jika Anda menerbitkan buku, artikel, atau informasi kritis, targetkan AAA.

Kesalahan umum

'Terlihat baik-baik saja di layar saya.' Layar terkalibrasi, lampu kantor fluoresen, dan penggunaan smartphone di luar ruangan semuanya mengubah kontras yang dirasakan. Gunakan rasio, bukan mata Anda.

Mendesain dark mode dengan membalik kode hex. Inversi mengubah hue dan merusak kontras. Uji ulang setiap pasangan warna setelah mengalihkan tema.

Mempercayai panduan merek. Banyak palet merek dipilih sebelum kesadaran WCAG. Jika merah muda merek di atas putih gagal, usulkan merah muda yang sedikit lebih gelap untuk salinan isi dan cadangkan warna asli untuk penggunaan dekoratif.