Pemeriksa Rasio Kontras WCAG Periksa rasio kontras WCAG antara warna latar depan dan latar belakang.

🎨

Pemeriksa Rasio Kontras

Periksa rasio kontras WCAG antara warna latar depan dan latar belakang.

Tetapkan Warna

Masukkan warna teks dan latar belakang.

Periksa Kepatuhan

Lihat rasio kontras dan hasil lolos/gagal WCAG AA/AAA.

Sesuaikan & Tukar

Modifikasi warna hingga Anda mencapai tingkat kepatuhan yang diinginkan.

Loading tool...

What Is Pemeriksa Rasio Kontras?

Sebuah pemeriksa rasio kontras WCAG mengevaluasi aksesibilitas kombinasi warna dengan menghitung rasio kontras antara warna latar depan (teks) dan latar belakang sesuai dengan Pedoman Aksesibilitas Konten Web (WCAG) 2.1. Alat ini menghitung rasio kontras berbasis luminans dan mengujinya terhadap empat ambang batas WCAG: AA untuk teks normal (≥4,5:1), AA untuk teks besar (≥3,0:1), AAA untuk teks normal (≥7,0:1), dan AAA untuk teks besar (≥4,5:1). Menggunakan ambang batas ini memastikan bahwa teks dapat dibaca oleh pengguna dengan berbagai tingkat gangguan visual, termasuk pandangan rendah dan buta warna. Alat ini menyediakan pratinjau teks langsung yang menunjukkan bagaimana kombinasi warna Anda sebenarnya terlihat pada ukuran yang berbeda, bersama dengan indikator lulus/gagal yang jelas untuk setiap tingkat WCAG. Ini adalah alat penting bagi pengembang web atau desainer mana pun yang berkomitmen untuk menciptakan pengalaman digital yang dapat diakses dan inklusif.

Why Use Pemeriksa Rasio Kontras?

Pemeriksaan kepatuhan WCAG AA dan AAA secara instan
Pratinjau teks visual pada beberapa ukuran menunjukkan keterbacaan dunia nyata
Indikator lolos/gagal yang jelas dengan ambang batas rasio yang diperlukan
Tombol tukar untuk menguji kombinasi warna terbalik dengan cepat
Menguji empat tingkat kepatuhan: AA/AAA untuk teks normal dan besar

Common Use Cases

Aksesibilitas Web

Verifikasi kombinasi teks/latar belakang memenuhi persyaratan WCAG 2.1 untuk kepatuhan ADA dan AODA.

Pemeriksaan Sistem Desain

Menguji semua kombinasi warna dalam sistem desain untuk kepatuhan aksesibilitas.

Evaluasi Warna Merek

Periksa apakah warna merek dapat digunakan untuk kombinasi teks/latar belakang yang memenuhi standar aksesibilitas.

Kepatuhan Hukum

Pastikan konten digital memenuhi hukum aksesibilitas yang merujuk pada kriteria WCAG.

Technical Guide

Rasio kontras dihitung menggunakan rumus luminans relatif WCAG 2.1. Pertama, setiap saluran warna dilinear: jika sRGB ≤ 0,03928, linear = sRGB/12,92; jika tidak, linear = ((sRGB + 0,055)/1,055)^2,4. Luminans relatif L = 0,2126×R + 0,7152×G + 0,0722×B. Rasio kontras = (L_lebih terang + 0,05) / (L_lebih gelap + 0,05). Rasio ini berkisar dari 1:1 (tidak ada kontras, warna sama) hingga 21:1 (hitam di atas putih). WCAG 2.1 mendefinisikan empat ambang batas: Tingkat AA memerlukan ≥4,5:1 untuk teks normal (<18pt atau <14pt bold) dan ≥3:1 untuk teks besar (≥18pt atau ≥14pt bold). Tingkat AAA memerlukan ≥7:1 untuk teks normal dan ≥4,5:1 untuk teks besar. Ambang batas ini didasarkan pada penelitian tentang ketajaman visual dan memastikan keterbacaan bagi pengguna dengan visi 20/40 atau gangguan pandangan rendah sedang.

Tips & Best Practices

1
Tujuan minimal kontras 4,5:1 untuk teks tubuh - ini adalah minimum untuk WCAG AA
2
Teks besar (18px+ atau 14px+ tebal) memiliki persyaratan yang lebih rendah dari 3:1 untuk AA
3
Kepatuhan AAA (7:1) memastikan keterbacaan untuk pengguna dengan gangguan visual yang lebih parah
4
Gunakan tombol Tukar untuk menguji apakah warna Anda bekerja dengan baik dalam kedua orientasi
5
Desain mode gelap memerlukan rasio kontras yang sama - uji kedua mode

Related Tools

Konverter HEX ke RGB

Ubah kode warna HEX menjadi nilai RGB secara instan dengan pratinjau langsung.

🎨 Color Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Pembuat Nuansa Warna

Buat nuansa warna yang lebih gelap dari warna apa pun dengan jumlah langkah yang dapat disesuaikan.

🎨 Color Tools

Pembuat Palet Warna yang Dapat Diakses

Buat palet warna yang memenuhi persyaratan kontras WCAG.

🎨 Color Tools

Simulator Kebutaan Warna

Simulasikan bagaimana warna tampak bagi orang dengan berbagai jenis defisiensi penglihatan warna.

🎨 Color Tools

Frequently Asked Questions

Q Apa itu rasio kontras WCAG?

Ini adalah ukuran numerik (1:1 hingga 21:1) dari perbedaan kecerahan antara dua warna. WCAG menentukan rasio minimum untuk memastikan keterbacaan teks bagi orang dengan gangguan visual.

Q Apa perbedaan antara AA dan AAA?

AA adalah standar aksesibilitas minimal (4,5:1 untuk teks normal). AAA adalah aksesibilitas yang ditingkatkan (7:1 untuk teks normal). Sebagian besar regulasi mengharuskan AA; AAA adalah praktik terbaik.

Q Apa yang dianggap sebagai teks besar?

WCAG mendefinisikan teks besar sebagai 18pt (24px) atau lebih besar untuk berat normal, atau 14pt (18,67px) atau lebih besar untuk berat tebal. Teks besar memiliki persyaratan kontras yang lebih rendah.

Q Apakah warna saja menentukan aksesibilitas?

Tidak. Rasio kontras adalah salah satu faktor. Anda juga harus memastikan bahwa warna bukan satu-satunya cara untuk menyampaikan informasi (gunakan ikon, pola, label juga) dan uji dengan simulasi buta warna.

About This Tool

Pemeriksa Rasio Kontras is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.