Kalkulator Rasio Kontras Warna

• Perhitungan rasio kontras seketika: hitung rasio WCAG antara dua warna seketika saat Anda mengetik. Kalkulator kami memperbarui secara real-time — tanpa menekan tombol — agar Anda bisa mengulang iterasi palet tanpa gangguan.
• Kalkulator kontras warna online yang aman: semua perhitungan terjadi lokal di browser Anda. Nilai warna Anda tidak pernah meninggalkan perangkat, menjamin privasi 100% saat memakai kalkulator online kami.
• Kalkulator rasio kontras warna — tanpa instalasi: gunakan kalkulator kami langsung di browser apa pun, tanpa unduhan, plugin, atau perangkat lunak desain. Periksa kepatuhan WCAG dari perangkat apa pun seketika.
• Pemeriksaan kepatuhan WCAG 2.1 AA dan AAA lengkap: dapatkan hasil lulus/tidak lulus seketika untuk level WCAG 2.1 AA dan AAA pada teks normal, teks besar, dan komponen UI. Termasuk pratinjau teks langsung.

• Kepatuhan aksesibilitas web: desainer dan pengembang memakai kalkulator untuk memastikan situs mereka memenuhi persyaratan WCAG 2.1 AA sebelum peluncuran. Mendeteksi kegagalan kontras lebih awal mencegah audit aksesibilitas yang mahal dan masalah hukum.
• Pemilihan warna UI dan merek: saat membangun design system atau palet merek, periksa setiap kombinasi latar depan/latar belakang untuk kepatuhan WCAG. Gunakan kalkulator untuk menemukan nuansa minimal warna merek yang lolos kontras AA pada latar putih atau gelap.
• Desain tombol dan CTA: tombol ajakan bertindak harus memenuhi rasio 3:1 untuk komponen UI menurut WCAG 2.1. Uji warna teks tombol terhadap latar tombol sebelum dirilis ke produksi.
• Palet mode gelap: mode gelap menghadirkan tantangan kontras baru — warna yang lolos pada latar terang sering gagal pada latar gelap. Periksa setiap pasangan teks/latar pada tema terang dan gelap.
• Aksesibilitas formulir dan input: teks placeholder, label, teks bantuan, dan pesan kesalahan memerlukan kontras yang cukup. Periksa setiap elemen teks terhadap latarnya agar pengguna dengan penglihatan lemah dapat membaca formulir Anda.
• Visualisasi data dan grafik: label grafik, teks legenda, dan anotasi titik data harus terbaca terhadap latar grafik. Periksa apakah warna visualisasi data Anda memenuhi standar aksesibilitas.

Rasio kontras warna adalah ukuran numerik perbedaan luminansi yang dipersepsikan antara dua warna — biasanya warna latar depan (teks) dan warna latar belakang. Didefinisikan oleh Web Content Accessibility Guidelines (WCAG) dan berkisar dari 1:1 (tanpa kontras — warna identik) hingga 21:1 (kontras maksimum — hitam pekat di putih bersih). Rasio dihitung memakai luminansi relatif setiap warna, yang memperhitungkan cara mata manusia mempersepsikan kecerahan secara non-linear. Kalkulator kami menerapkan rumus WCAG 2.1 yang tepat, sehingga hasilnya sama dengan alat audit aksesibilitas resmi mana pun.

1. 1. Masukkan warna Anda: ketik warna dalam format HEX (#rrggbb), RGB (rgb(r,g,b)), atau HSL (hsl(h,s%,l%)) di kolom latar depan dan latar belakang, atau klik sampel untuk membuka pemilih warna asli. Kalkulator menerima HEX singkat (#rgb) dan varian alfa. Semua pemrosesan terjadi lokal di browser Anda.
2. 2. Perhitungan real-time seketika: rasio kontras diperbarui seketika saat Anda mengetik — tanpa menekan tombol. Kalkulator mengonversi setiap warna ke luminansi relatif memakai rumus linearisasi sRGB WCAG, lalu menghitung rasio sebagai (L1 + 0,05) / (L2 + 0,05), dengan L1 luminansi lebih terang dan L2 lebih gelap.
3. 3. Tinjau kepatuhan WCAG: panel hasil menampilkan status lulus/tidak lulus untuk WCAG 2.1 AA dan AAA dalam tiga konteks: teks normal, teks besar, dan komponen UI. Pratinjau teks langsung memungkinkan Anda melihat tepatnya tampilan kombinasi pada berbagai ukuran teks.

• AA - Teks normal (4,5:1): rasio minimum untuk badan teks, label, dan teks lebih kecil dari 18pt (atau 14pt tebal). Ini syarat standar untuk kepatuhan WCAG 2.1 Level AA, dasar hukum di sebagian besar yurisdiksi.
• AA - Teks besar (3:1): teks besar didefinisikan sebagai 18pt (24px) atau lebih, atau 14pt (sekitar 18,67px) tebal atau lebih. Memerlukan rasio minimum lebih rendah karena lebih mudah dibaca pada kontras rendah.
• AA - Komponen UI (3:1): objek grafis dan komponen antarmuka seperti kolom formulir, tombol, indikator fokus, dan ikon harus memiliki rasio kontras 3:1 terhadap warna yang berdekatan menurut Kriteria Sukses 1.4.11 WCAG 2.1.
• AAA - Ditingkatkan (7:1): Level AAA WCAG memerlukan rasio 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Kepatuhan AAA direkomendasikan untuk konten kritis (dokumen hukum, informasi medis, layanan pemerintah), tetapi tidak wajib untuk kepatuhan web umum.

Rumus rasio kontras WCAG hanya berlaku untuk warna opak — warna semitransparan harus dievaluasi terhadap latar belakang yang benar-benar dirender. Rumus juga tidak memperhitungkan rendering font, anti-aliasing, atau kalibrasi layar, yang dapat memengaruhi kontras yang dipersepsikan dalam praktik. Selain itu, persyaratan kontras WCAG tidak berlaku untuk teks dekoratif, teks yang merupakan bagian dari logo, atau teks pada komponen UI yang tidak aktif. Selalu uji desain Anda dengan pengguna nyata dan teknologi pendukung selain pemeriksaan kontras otomatis.