Pemeriksa Matriks Kontras Warna
Memeriksa rasio kontras WCAG untuk berbagai kombinasi warna
AAA ≥ 7.0 · Teks besar:AA ≥ 3.0
Mengapa perlu memeriksa semua kombinasi warna sekaligus, bukan satu per satu?
Panduan aksesibilitas WCAG mensyaratkan rasio kontras minimum antara warna teks dan latar belakang, jika tidak pengguna dengan gangguan penglihatan atau buta warna mungkin tidak dapat membaca teks tersebut. Dalam praktiknya, kebanyakan situs mengombinasikan beberapa warna merek, warna latar belakang, dan warna status —judul berwarna utama di atas kartu abu-abu terang, warna peringatan di atas putih, teks gelap di atas latar belakang berwarna— dan memeriksa setiap pasangan secara manual mudah menyebabkan kesalahan atau terlewat. Alat ini memungkinkan Anda menempelkan semua warna yang benar-benar Anda gunakan, dan secara instan menghitung rasio kontras untuk setiap kemungkinan pasangan, disajikan sebagai satu matriks —tidak perlu lagi memeriksa kombinasi satu per satu.
Cara rasio dihitung — contoh konkret
WCAG 2.1 mendefinisikan rasio kontras sebagai (L1 + 0,05) / (L2 + 0,05), di mana L1 dan L2 adalah luminansi relatif dari kedua warna (nilai lebih tinggi berarti lebih mendekati putih). Hitam murni #000000 terhadap putih murni #FFFFFF mendapatkan skor sempurna 21:1, tetapi abu-abu terang #999999 terhadap putih hanya mendapatkan 2,85:1 —jauh di bawah minimum 4,5:1 yang disyaratkan untuk teks normal. Teks normal (di bawah 18px, atau di bawah 14px tebal) membutuhkan AA ≥ 4,5:1, atau AAA ≥ 7:1 untuk standar yang lebih ketat; teks besar (tebal 18px+ atau 24px+) memiliki ambang yang lebih rendah yaitu AA ≥ 3:1.
Cara membaca matriks hasil
Setiap sel dalam matriks menunjukkan rasio kontras antara warna baris tersebut dan warna kolom tersebut, diberi kode warna hijau (lolos AAA), kuning (hanya lolos AA), atau merah (gagal) —sehingga Anda dapat mengenali pasangan yang bermasalah sekilas tanpa perlu menghitung satu per satu secara manual.
Kontras dihitung murni dari nilai RGB masing-masing warna —tidak memperhitungkan ketebalan font, anti-aliasing, atau lapisan semi-transparan dalam rendering sebenarnya. Selalu periksa ulang di perangkat asli sebelum diluncurkan.
Kamu mungkin juga butuh