Go Toolstack

Pemeriksa Rasio Kontras Warna WCAG

Uji rasio kontras teks terhadap latar belakang sesuai standar aksesibilitas WCAG 2.1.

Pemeriksa Rasio Kontras Warna WCAG

Uji rasio kontras teks terhadap latar belakang sesuai standar aksesibilitas WCAG 2.1.

Cara Kerja

1
Masukkan Detail Kueri
Tentukan parameter, lokasi, atau data yang ingin Anda cari.
2
Ambil atau Validasi Data
Dapatkan dan validasi informasi secara aman dalam sesi peramban Anda.
3
Tinjau Hasil Terperinci
Periksa jadwal, angka referensi, atau tabel data lengkap yang disajikan.

Temukan utilitas sisi klien lainnya dalam kategori ini.

Pusat Alat Pengembang • Alur Kerja & Panduan Perbandingan

Jelajahi semua alat alat pengembang, batasan teknis peramban, dan panduan pemilihan alat.

Jelajahi Pusat →
Pemformat & Validator JSON

Format, validasi, dan rapikan kode JSON seketika di peramban Anda.
Enkoder & Dekoder Base64

Enkode dan dekode teks atau string biner ke format Base64 secara instan.
Pemformat Kueri SQL

Rapikan dan susun kueri SQL kompleks dengan indentasi profesional seketika.

Panduan Blog Terkait

Panduan teknis, pemecahan masalah, dan praktik terbaik

Pusat Konsep & Pengetahuan

Panduan Rasio Kontras Warna WCAG: Standar Aksesibilitas AA/AAA, Keterbacaan & Luminansi

Aksesibilitas web (Web Accessibility) menjamin bahwa konten digital dapat diakses dan dibaca dengan nyaman oleh semua orang, termasuk jutaan pengguna yang mengalami gangguan penglihatan warna (color blindness), rabun jauh, katarak, atau pengguna ponsel di bawah terik sinar matahari. Standar internasional WCAG 2.1 (Web Content Accessibility Guidelines) menetapkan ambang batas rasio kontras luminansi minimum antara teks dan warna latar belakangnya.

Alat ini menghitung rasio kontras matematis presisi dalam skala 1:1 (tanpa kontras, teks tidak terlihat) hingga 21:1 (kontras maksimum hitam di atas putih). Masukkan kode warna latar depan dan latar belakang, alat seketika melaporkan status kepatuhan: Tingkat AA mengharuskan rasio minimal 4.5:1 untuk teks normal dan 3.0:1 untuk teks besar (≥ 18pt atau 14pt tebal); Tingkat AAA (standar tertinggi pemerintah dan perbankan) mengharuskan rasio minimal 7.0:1 untuk teks normal dan 4.5:1 untuk teks besar.

Evaluasi matematis luminansi warna dijalankan secara lokal di peramban Anda secara instan.

Arsitektur Inti & Rumus Matematis

Rasio Kontras = (Luminansi_Relatif_Terang + 0.05) / (Luminansi_Relatif_Gelap + 0.05)

Luminansi relatif (L) dihitung dari nilai sRGB yang dinormalisasi dan dikoreksi gamma: L = 0.2126×R + 0.7152×G + 0.0722×B sesuai standar IEC 61966-2-1.

Praktik Terbaik & Panduan Penting

  • Bidik Standar WCAG AA sebagai Standar Minimum Proyek: Pastikan semua teks isi artikel dan keterangan tombol memenuhi rasio kontras minimal 4.5:1.
  • Waspadai Teks Abu-abu Halus pada Latar Belakang Putih: Teks abu-abu terang (#9ca3af) sering kali gagal dalam uji kontras dan menyulitkan pembaca lanjut usia.
  • Evaluasi Status Fokus dan Hover pada Tombol: Periksa rasio kontras tidak hanya pada kondisi diam, tetapi juga saat kursor melayang atau tombol mendapat fokus keyboard.
  • Gunakan Teks Lebih Tebal Jika Kontras Mendekati Batas: Teks tebal (font-weight: 700) meningkatkan keterbacaan mata manusia pada nilai kontras marginal.

Pertanyaan yang Sering Diajukan (FAQ)

Berapa rasio kontras ideal untuk teks paragraf biasa?
Standar WCAG Level AA menetapkan rasio minimal 4.5:1 untuk teks normal. Untuk standar Level AAA yang lebih tinggi, dibutuhkan rasio minimal 7.0:1.
Apa yang dikategorikan sebagai 'Teks Besar' menurut WCAG?
Teks besar didefinisikan sebagai teks berukuran minimal 18pt (24px) biasa, atau minimal 14pt (kira-kira 18.66px) dengan ketebalan font tebal (bold).
Apakah rasio kontras berlaku juga untuk elemen ikon grafis?
Ya. Standar WCAG 2.1 Success Criterion 1.4.11 menetapkan rasio minimal 3.0:1 untuk ikon antarmuka dan garis batas input formulir aktif.
Apakah warna yang diuji dikirimkan ke server?
Tidak. Semua konversi koordinat warna RGB dan perhitungan luminansi dieksekusi murni di mesin peramban Anda.