Hitung rasio kontras antara dua warna dan periksa apakah lulus tingkat WCAG 2.1 AA dan AAA untuk teks normal dan besar.

Foreground

Background

21.00:1

AA Normal text

AA Large text

AAA Normal text

AAA Large text

Preview

The quick brown fox jumps over the lazy dog.

Cara Kerja

Web Content Accessibility Guidelines (WCAG) 2.1 mendefinisikan rasio kontras minimum antara teks dan latar belakang sehingga konten tetap dapat dibaca oleh orang dengan gangguan penglihatan. Alat ini menghitung rasio dalam tiga langkah: pertama, setiap warna dikonversi menjadi luminansi relatifnya dengan menerapkan koreksi gamma pada saluran sRGB (nilai di bawah 0,03928 dibagi dengan 12,92, nilai di atas dinaikkan oleh ((c+0,055)/1,055)^2,4) dan menggabungkan hasilnya dengan L = 0,2126*R + 0,7152*G + 0,0722*B. Kemudian luminansi warna paling terang dan paling gelap diambil sebagai L1 dan L2, dan rasio kontras adalah (L1 + 0,05) / (L2 + 0,05) — offset 0,05 memodelkan permukaan reflektif hitam pekat. Akhirnya rasio dibandingkan dengan ambang batas WCAG: AA memerlukan ≥ 4,5:1 untuk teks normal, ≥ 3:1 untuk teks besar (18pt+, atau 14pt+ tebal), AAA memerlukan ≥ 7:1 untuk teks normal, dan ≥ 4,5:1 untuk teks besar. Alat ini menampilkan pratinjau langsung dan lencana lulus/gagal untuk setiap tingkat WCAG sehingga Anda dapat menyesuaikan palet Anda dan melihat hasilnya segera.

Kasus Penggunaan

Pilih warna merek yang sesuai dengan aksesibilitas saat membangun sistem desain

Validasi bahwa komponen UI yang ada lulus WCAG AA atau AAA

Buktikan kepada klien bahwa kombinasi warna tertentu tidak cocok untuk teks

Ajari desainer dan pengembang tentang aksesibilitas

Siapkan dokumentasi untuk persyaratan aksesibilitas hukum