Pemeriksa Kontras Warna
Hitung rasio kontras antara dua warna dan periksa apakah lulus tingkat WCAG 2.1 AA dan AAA untuk teks normal dan besar.
Saya makan nasi goreng dengan ayam dan sambal pedas yang sangat lezat.
Saya makan nasi goreng dengan ayam dan sambal pedas yang sangat lezat.
Cara Kerja
Pemeriksa kontras warna mengukur rasio kontras luminansi antara warna teks dan warna latar belakang sesuai panduan WCAG 2.1 — standar aksesibilitas yang digunakan oleh organisasi di seluruh dunia.
Masukkan warna teks dan latar belakang dalam format HEX, RGB, atau HSL. Alat langsung menghitung luminansi relatif setiap warna dan rasio kontrasnya.
Hasilnya diuji terhadap level WCAG: AA memerlukan ≥4,5:1 untuk teks normal dan ≥3:1 untuk teks besar; AAA memerlukan ≥7:1 dan ≥4,5:1. Pratinjau visual menunjukkan bagaimana teks sebenarnya terlihat di latar belakang tersebut.
Kontras rendah membuat konten sulit dibaca bagi pengguna dengan gangguan penglihatan, terutama mereka yang buta warna.
Contoh Praktis
Periksa teks abu-abu #767676 di latar putih: rasio kontrasnya tepat 4,54:1 — lolos WCAG AA untuk teks normal (yang menuntut 4,5:1) tetapi gagal AAA (7:1), dan kartu hasil menampilkan tiap ambang terpisah, termasuk aturan longgar untuk teks besar. Bilah skala logaritmik menunjukkan posisi pasangan itu antara 1:1 dan 21:1 milik hitam pekat di atas putih. Kartu APCA mencicipkan metrik WCAG 3, dan tombol tukar langsung menjawab apakah membalik latar depan dan belakang menolong. Pratinjau langsung merender teks sungguhan agar Anda menilai dengan mata sendiri.
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
Pertanyaan yang Sering Diajukan
- Apa itu WCAG?
- Panduan Aksesibilitas Konten Web — standar aksesibilitas yang diterbitkan oleh W3C, yang semakin diwajibkan secara hukum.
- Kontras minimum berapa yang harus saya capai?
- Minimum AA (4,5:1 untuk teks normal) untuk sebagian besar situs; AAA untuk konten yang sangat penting.
- Apakah teks besar memiliki persyaratan berbeda?
- Ya — teks ≥18pt atau ≥14pt tebal hanya memerlukan 3:1 (AA) atau 4,5:1 (AAA).
- Apakah pemeriksa memperhitungkan buta warna?
- Skor luminansi didasarkan pada matematika persepsi yang secara alami mencakup jenis buta warna yang paling umum.
- Bisakah saya menempel kode HEX langsung?
- Ya, tempel #RRGGBB atau hanya RRGGBB — alat menerima kedua format.