🎨

🎨 Color Contrast Checker WCAG 2.1

Uji rasio kontras warna teks dan latar belakang sesuai pedoman aksesibilitas digital W3C WCAG 2.1 & ISO/IEC 40500. Lengkap dengan simulator buta warna, pengujian komponen UI, dan rekomendasi kepatuhan.

♿ WCAG 2.1 AA/AAA 👁️ Simulator Buta Warna 🛠️ Rekomendasi Auto-Fix 🖨️ Cetak Audit A4
💡 Presets Palet Industri Cepat:

1. Pengaturan Warna & Nilai HEX

Lum: 0.012
Lum: 0.953
Rasio Kontras Terhitung
15.58 : 1
Sangat Baik (Lolos WCAG AAA)

Audit Kepatuhan Standar WCAG 2.1:

AA Teks Normal
Min 4.5:1 (< 24px)
PASS
AA Teks Besar
Min 3.0:1 (≥ 24px / 18.5px bold)
PASS
AA Komponen UI / Ikon
Min 3.0:1 (SC 1.4.11)
PASS
AAA Teks Normal
Min 7.0:1 (Enhanced)
PASS
AAA Teks Besar
Min 4.5:1 (Enhanced)
PASS

2. Pratinjau Live Elemen UI Asli

Aksesibilitas Digital untuk Semua Orang

Kontras warna yang memadai menjamin bahwa pengguna dengan gangguan penglihatan rendah, pengguna di bawah terik sinar matahari, serta lansia dapat membaca informasi penting dengan nyaman dan tanpa kelelahan mata.

ℹ️ Notifikasi penting: Silakan periksa kembali rasio warna Anda.
CSS Snippet:
color: #0F172A;
background-color: #F8FAFC;

📖 Cara Menggunakan Cara Menguji Rasio Kontras Aksesibilitas WCAG

1
Tentukan Warna Teks & Latar

Masukkan kode HEX atau gunakan pemilih warna visual untuk elemen teks dan latar belakang.

2
Evaluasi Ambang Batas WCAG

Periksa rasio kontras terhadap standar minimum WCAG Level AA (4.5:1 untuk teks biasa) dan Level AAA (7.0:1).

3
Uji Persepsi Buta Warna (CVD)

Gunakan dropdown simulator untuk melihat bagaimana kombinasi warna tampil bagi penderita Protanopia, Deuteranopia, dan Tritanopia.

4
Gunakan Fitur Auto-Fix

Jika rasio gagal, tekan tombol Auto-Fix untuk otomatis menyesuaikan kecerahan warna terdekat yang memenuhi standar.

Pedoman Teknis Aksesibilitas Visual Desain Web

🎯 Perbedaan Level AA vs AAA Level AA (4.5:1) adalah persyaratan kepatuhan hukum standar industri internasional (ADA, EAA). Level AAA (7:1) adalah standar emas untuk keterbacaan tingkat tinggi.
🔠 Definisi Teks Besar (Large Text) Teks dianggap besar jika berukuran minimal 18pt (24px) reguler atau 14pt (18.5px) tebal (bold), sehingga hanya membutuhkan ambang rasio 3.0:1.
🔘 Kontras Komponen Antarmuka (SC 1.4.11) Border form input, ikon interaktif, dan status fokus keyboard wajib memiliki kontras minimal 3:1 terhadap warna latar sekitarnya.
☀️ Kondisi Nyata Pengguna Layar ponsel di bawah sinar matahari luar ruangan menurunkan kontras efektif hingga 60%. Selalu prioritaskan kontras tinggi demi kenyamanan pembaca.
Dwi Kurniawan, S.E.
Dwi Kurniawan, S.E. ✓ Verified Author & Developer
Industrial Technologist & Praktisi K3 · Pengembang Dwik.web.id

💡 Cerita di Balik Pembuatan Alat Ini

🔗 Coba Juga Tools Lain

Tools ini cocok dipadukan dengan kalkulator lainnya:

🔲 Border Radius Generator
Desain sudut komponen CSS 🌗 Box Shadow Generator
Elevasi bayangan modern 🪟 Glassmorphism Generator
Efek blur frosted glass

🔗 Alat Terkait yang Mungkin Anda Butuhkan

🔐 Secure Password Generator ✈️ Telegram Link Generator 🔗 UTM Link Builder 🔍 Meta Description Preview 💬 Generator Link WhatsApp ✉️ Email Signature Generator
🕐 Terakhir diperbarui: 10 Oktober 2026 · Dibuat oleh dwik.web.id · Syarat & Ketentuan

🔖 Daftar Bacaan