Pemeriksa Kontras – Rasio Kontras WCAG

Periksa Kontras Warna untuk Aksesibilitas

Kontras warna berpengaruh langsung terhadap keterbacaan. Ketika teks tidak cukup kontras dengan latar belakangnya, konten menjadi sulit dibaca — terutama bagi pengguna dengan gangguan penglihatan atau defisiensi penglihatan warna.

Alat ini menghitung rasio kontras antara dua warna apa pun dan mengevaluasinya berdasarkan kriteria keberhasilan WCAG 2.1. Masukkan warna dalam format HEX, RGB, atau HSL untuk mendapatkan hasil secara instan.

Memahami Level Kontras WCAG

Pedoman Aksesibilitas Konten Web (WCAG) menetapkan rasio kontras minimum untuk keterbacaan teks. Ada dua level kepatuhan:

• WCAG AA, teks normal — memerlukan rasio kontras minimal 4,5:1
• WCAG AA, teks besar — memerlukan rasio kontras minimal 3:1 (teks besar: 18pt ke atas atau 14pt tebal ke atas)
• WCAG AAA, teks normal — memerlukan rasio kontras minimal 7:1
• WCAG AAA, teks besar — memerlukan rasio kontras minimal 4,5:1

AA adalah level standar yang menjadi target sebagian besar situs web dan aplikasi. AAA adalah level yang lebih ketat, direkomendasikan untuk konten yang membutuhkan keterbacaan maksimal.

Cara Menggunakan Pemeriksa Kontras

1. Masukkan warna teks (foreground) — dalam format HEX, RGB, atau HSL
2. Masukkan warna latar belakang dalam format apa pun yang didukung
3. Lihat rasio kontras dan pratinjau langsung teks pada latar belakang tersebut
4. Periksa hasil lulus/gagal untuk level WCAG AA dan AAA
5. Gunakan tombol tukar untuk membalik warna teks dan latar belakang dengan cepat

Kapan Harus Memeriksa Kontras Warna

• Saat memilih warna teks dan latar belakang untuk situs web atau aplikasi
• Saat memverifikasi bahwa sistem desain memenuhi persyaratan aksesibilitas
• Saat menguji warna tombol, tautan, atau ikon terhadap latar belakangnya
• Saat memeriksa kombinasi warna dalam mode gelap (dark mode)
• Saat mematuhi standar aksesibilitas hukum (ADA, EAA, Section 508)

Akurat, Instan, dan Gratis

Alat ini menghitung rasio kontras WCAG 2.1 menggunakan rumus luminansi relatif standar. Semua perhitungan dilakukan langsung di browser Anda — tidak ada data yang dikirim ke server mana pun.

Perlu menemukan atau mengonversi warna terlebih dahulu? Gunakan Color Picker untuk mengekstrak warna dari gambar, atau Color Converter untuk beralih antara HEX, RGB, dan HSL.

Pertanyaan yang Sering Diajukan

Berapa rasio kontras yang baik untuk teks?

Untuk teks berukuran normal, WCAG AA mensyaratkan rasio kontras minimal 4,5:1. Untuk teks besar (18pt atau 14pt tebal ke atas), minimumnya adalah 3:1. Untuk level aksesibilitas tertinggi (WCAG AAA), teks normal memerlukan minimal 7:1.

Apa perbedaan antara WCAG AA dan AAA?

AA adalah level kepatuhan standar yang harus dicapai oleh sebagian besar situs web dan aplikasi. AAA adalah level yang lebih ketat dengan persyaratan kontras lebih tinggi, direkomendasikan untuk konten yang membutuhkan keterbacaan maksimal, seperti situs web pemerintah atau layanan kesehatan.

Apa yang dimaksud teks besar dalam WCAG?

Teks besar didefinisikan sebagai teks berukuran 18 poin (24px) atau lebih besar dengan ketebalan normal, atau 14 poin (sekitar 18,66px) atau lebih besar jika dicetak tebal. Teks besar memiliki persyaratan kontras yang lebih rendah karena ukurannya membuatnya lebih mudah dibaca.

Format warna apa saja yang didukung pemeriksa ini?

Anda dapat memasukkan warna dalam format HEX (contoh: #1E293B), RGB (contoh: rgb(30, 41, 59)), atau HSL (contoh: hsl(222, 33%, 17%)). Alat ini mendeteksi format secara otomatis.

Bagaimana cara menghitung rasio kontras?

Rasio kontras dihitung menggunakan rumus WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminansi relatif warna yang lebih terang dan L2 adalah warna yang lebih gelap. Hasilnya berkisar dari 1:1 (tanpa kontras) hingga 21:1 (kontras maksimum, hitam di atas putih).

Apakah alat ini berfungsi di perangkat seluler?

Ya. Pemeriksa kontras berfungsi di perangkat apa pun dengan browser modern — desktop, tablet, maupun ponsel.

Apakah alat ini gratis?

Ya. ColourPicker.app sepenuhnya gratis untuk digunakan, tanpa perlu mendaftar.

Bisakah saya memeriksa kontras untuk komponen UI, bukan hanya teks?

WCAG 2.1 juga mensyaratkan rasio kontras minimum 3:1 untuk komponen UI yang bermakna dan objek grafis (Kriteria Keberhasilan 1.4.11). Anda dapat menggunakan pemeriksa ini untuk memverifikasi kombinasi tersebut juga — rumus perhitungannya sama.