Pemeriksa Kontras

Tempelkan warna latar depan dan latar belakang (atau pilih dari tangkapan layar); dapatkan rasio kontras dan level WCAG yang diloloskan. WCAG 2.1 AA adalah dasar aksesibilitas hukum di sebagian besar yurisdiksi; AAA adalah standar lebih tinggi yang direkomendasikan untuk konten penting.

Ambang batas

• WCAG AA, teks normal: minimal 4,5:1.
• WCAG AA, teks besar (18pt+ atau 14pt+ tebal): minimal 3:1.
• WCAG AAA, teks normal: minimal 7:1.
• WCAG AAA, teks besar: minimal 4,5:1.
• Komponen UI non-teks (tombol, batas formulir): minimal 3:1 (WCAG 2.1+).

Mengapa kontras itu penting

Teks dengan kontras rendah tidak terbaca bagi pengguna dengan penglihatan rendah (sekitar 4% populasi), pengguna di bawah sinar matahari terang, pengguna dengan monitor murah, dan mata yang menua (pada akhirnya semua orang). Banyak sistem desain default ke abu-abu di atas abu-abu karena terlihat elegan di layar 5K yang dikalibrasi desainer — dan tidak terbaca di tempat lain.

Gagal memenuhi WCAG AA juga dapat dituntut secara hukum di AS (ADA Title III), UE (EAA), dan banyak yurisdiksi lainnya. Asuransi murah: jalankan setiap pasangan teks/latar belakang melalui pemeriksa sebelum dirilis.

Apa yang kami laporkan

1. Rasio kontras sebagai angka (mis. 4,71:1).
2. Lulus/gagal untuk setiap level WCAG dan ukuran teks.
3. Perbaikan yang disarankan: warna latar depan yang lebih gelap atau latar belakang yang lebih terang terdekat yang akan lolos.
4. Pratinjau langsung dengan contoh teks dalam pasangan warna tersebut.

Padukan dengan simulator buta warna

Kontras dan buta warna adalah sumbu aksesibilitas yang berbeda. Jalankan Color Blindness Simulator pada UI yang sama untuk memverifikasi bahwa itu berfungsi untuk pengguna dengan CVD juga.