Pemeriksa & Simulator Kontras WCAG

Pemeriksa kontras warna WCAG 2.1 / 2.2 dan simulator aksesibilitas tingkat lanjut. Uji teks, komponen UI, gradien, dan simulasikan buta warna secara real-time.

Pratinjau Langsung

Desain Aksesibel Itu Penting

Ini adalah contoh paragraf untuk menunjukkan bagaimana warna yang Anda pilih terlihat bersama. Kontras yang baik memastikan keterbacaan bagi semua orang.

Pelajari lebih lanjut tentang WCAG

Select a simulation mode below to apply filters to the live preview area.

Penglihatan Normal

Protanopia (Tanpa Merah)

Deuteranopia (Tanpa Hijau)

Tritanopia (Tanpa Biru)

Akromatopsia (Tanpa Warna)

Penglihatan Rendah (Blur)

Sinar Matahari Terik (Kontras Rendah)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

Warna Latar Depan

Warna Latar Belakang

Teks Normal

21.00:1

AAA

Teks Besar

AAA

Komponen UI

AAA

Pertanyaan yang Sering Diajukan

Rasio kontras WCAG adalah pengukuran matematis dari perbedaan luminansi (kecerahan) yang dirasakan antara dua warna, dinyatakan sebagai angka dari 1:1 hingga 21:1. Rasio ini memastikan teks dan elemen UI cukup dapat dibedakan dari latar belakangnya agar dapat dibaca oleh pengguna dengan berbagai kemampuan visual.

Untuk kepatuhan WCAG AA, teks normal memerlukan rasio minimum 4,5:1, sedangkan teks besar (18pt atau 14pt tebal) dan komponen UI memerlukan 3,0:1. Untuk kepatuhan AAA yang ketat, teks normal membutuhkan 7,0:1, dan teks besar membutuhkan 4,5:1.

Ya, tab Simulasi Penglihatan menerapkan filter matriks SVG real-time pada pratinjau langsung Anda. Alat ini secara akurat mereplikasi Protanopia (buta merah), Deuteranopia (buta hijau), Tritanopia (buta biru), dan Akromatopsia (monokromasi), bersama dengan simulasi blur dan sinar matahari.

Tidak. Simulator PRO ini dibangun sepenuhnya di sisi klien menggunakan JavaScript. Semua perhitungan warna, pemrosesan gambar, dan pembuatan laporan terjadi langsung di dalam browser Anda, memastikan privasi penuh dan tanpa penyimpanan data server.

Jika warna yang Anda pilih gagal dalam uji WCAG, Anda dapat menggunakan fitur Auto-Fix kami. Fitur ini menghitung dan menyarankan corak warna yang sesuai dengan kepatuhan AA atau AAA terdekat secara matematis, memungkinkan Anda mempertahankan estetika merek sambil memenuhi standar aksesibilitas.

Cara Menggunakan Pemeriksa Kontras

Atur warna latar depan dan latar belakang
Masukkan warna teks (latar depan) dan warna latar belakang menggunakan color picker atau dengan mengetik nilai HEX, RGB, atau HSL. Rasio kontras diperbarui secara instan.
Baca hasil WCAG Anda
Alat ini menampilkan rasio kontras (mis. 5.2:1) dan apakah rasio tersebut lulus WCAG AA (4,5:1 untuk teks normal) dan AAA (7:1). Teks besar (18pt+) memiliki ambang batas yang lebih rendah.
Simulasikan buta warna
Beralih ke tab Simulator untuk melihat pratinjau bagaimana kombinasi warna Anda terlihat bagi pengguna dengan Deuteranopia, Protanopia, Tritanopia, atau tipe penglihatan lainnya.
Gunakan Auto-Fix jika diperlukan
Jika warna Anda gagal, klik Auto-Fix. Alat ini menghitung corak yang sesuai dengan AA atau AAA terdekat sambil mempertahankan hue dan saturasi sedekat mungkin.

Referensi Rasio Kontras

Persyaratan kontras minimum WCAG 2.1 untuk berbagai kategori teks:

Jenis Konten	WCAG AA	WCAG AAA	Contoh Rasio
Teks normal (<18pt)	4.5:1 ✓	7:1 ✓	#000 di atas #fff → 21:1
Teks besar (≥18pt tebal)	3:1 ✓	4.5:1 ✓	#333 di atas #fff → 12.6:1
Komponen UI & ikon	3:1 ✓	N/A	#767676 di atas #fff → 4.5:1
Elemen dekoratif	Tidak wajib	Tidak wajib	Gambar latar belakang dikecualikan

Kasus Penggunaan Umum

Tinjauan Desain UI / Visual

Uji setiap kombinasi teks dan latar belakang dalam sistem desain Anda sebelum diserahkan ke pengembangan, menangkap kegagalan sejak dini.

Audit Aksesibilitas

Sediakan rasio kontras terdokumentasi untuk laporan aksesibilitas klien dan sertifikasi kepatuhan WCAG 2.1 / 2.2.

Pengujian Buta Warna

Simulasikan bagaimana 8% pengguna pria mengalami palet Anda untuk memastikan tidak ada informasi penting yang hilang bagi audiens buta warna.

Kepatuhan Hukum

Penuhi persyaratan aksesibilitas digital ADA (AS), EAA (UE), dan EN 301 549 sebelum peluncuran produk atau tender publik.

QA Developer

Verifikasi kontras variabel warna CSS dengan cepat selama code review, tanpa harus beralih ke alat desain.

Cara Kerjanya

Semua perhitungan berjalan di browser Anda menggunakan rumus luminansi WCAG 2.1 — tanpa memerlukan kontak server.

Luminansi Relatif

WCAG mendefinisikan luminansi sebagai jumlah terbobot dari kanal RGB yang dilinierkan: L = 0,2126R + 0,7152G + 0,0722B. Rasio kontras kemudian adalah (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah warna yang lebih terang.

Simulasi Buta Warna

Simulator menerapkan matriks daltonisasi standar (Machado et al., 2009) untuk mengubah nilai sRGB sebagaimana dirasakan oleh setiap tipe defisiensi penglihatan warna.

Algoritma Auto-Fix

Auto-Fix melakukan iterasi pada kanal kecerahan di ruang HSL, menemukan penyesuaian minimum yang mencapai rasio target (AA atau AAA) sambil menjaga hue dan saturasi tetap tidak berubah.

Untuk Siapa Alat Ini

Desainer UI/UX

Uji kombinasi warna sebelum penyerahan desain dan pertahankan sistem desain yang patuh.

Spesialis Aksesibilitas

Buat bukti kontras untuk audit WCAG, laporan klien, dan sertifikasi kepatuhan.

Frontend Developer

Periksa variabel warna CSS dengan cepat selama pengembangan dan code review tanpa meninggalkan browser.

Product Manager

Pastikan kepatuhan aksesibilitas hukum (ADA, EAA) sebelum peluncuran produk atau pengajuan tender publik.

Content Creator

Verifikasi bahwa teks yang ditumpangkan pada gambar atau latar belakang berwarna dapat dibaca oleh semua audiens.

Tips untuk Desain Aksesibel yang Lebih Baik

Selalu targetkan WCAG AA (4,5:1) sebagai dasar, dan usahakan AAA (7:1) untuk teks isi — terutama pada situs kesehatan, pemerintahan, dan keuangan.
Jalankan simulasi buta warna untuk semua 8 tipe, bukan hanya Deuteranopia. Setiap tipe memengaruhi pasangan warna yang berbeda secara berbeda pula.
Jangan pernah mengandalkan warna saja untuk menyampaikan informasi — selalu padukan isyarat warna dengan ikon, pola, atau label teks.
Gunakan HSL untuk menyetel kontras: tingkatkan perbedaan kecerahan antara latar depan dan latar belakang alih-alih mengubah hue.
Uji pada perangkat mobile fisik di bawah sinar matahari terik — kondisi dunia nyata mengungkap masalah kontras yang tersembunyi di monitor.

Mengapa Kontras Aksesibilitas Penting

Sekitar 1 dari 12 pria dan 1 dari 200 wanita memiliki beberapa bentuk defisiensi penglihatan warna — kontras yang buruk secara langsung mengecualikan pengguna ini.
ADA (AS) dan European Accessibility Act (UE 2025) mewajibkan kepatuhan WCAG 2.1 AA untuk produk digital yang menghadap publik.
Kontras yang buruk adalah salah satu dari 3 kegagalan WCAG paling umum yang ditemukan dalam audit aksesibilitas secara global (laporan WebAIM Million).
Desain warna yang aksesibel meningkatkan keterbacaan bagi semua pengguna — di bawah sinar matahari terik, pada layar berkualitas rendah, dan seiring bertambahnya usia pengguna.

Performa & Privasi

Setiap perhitungan kontras, simulasi buta warna, dan auto-fix berjalan sepenuhnya di browser Anda menggunakan JavaScript. Tidak ada nilai warna, tangkapan layar, atau data penggunaan yang pernah dikirim ke server mana pun. Alat ini merespons dalam waktu kurang dari 5 md per perhitungan dan bekerja secara offline setelah pemuatan halaman pertama.

Catatan Edukasi: WCAG dan Penglihatan Warna

WCAG 2.1 vs 2.2

WCAG 2.2 (2023) memperkenalkan kriteria keberhasilan baru (2.4.11 Focus Appearance, 3.2.6 Consistent Help) tetapi mempertahankan persyaratan kontras inti (1.4.3, 1.4.6) identik dengan 2.1.

Luminansi vs Kecerahan

WCAG menggunakan luminansi relatif — ukuran yang dibobotkan secara perseptual. Kuning cerah (#ffff00) memiliki luminansi sangat tinggi (0,93) sementara biru tua (#003366) memiliki luminansi rendah (0,02), menghasilkan rasio 9,8:1.

Jenis-Jenis Buta Warna

Deuteranopia (merah-hijau, paling umum) memengaruhi ~6% pria. Protanopia (buta merah) ~2%. Tritanopia (biru-kuning) ~0,01%. Akromatopsia (buta warna total) ~0,003%.

APCA — Standar Masa Depan

Advanced Perceptual Contrast Algorithm (APCA) diusulkan untuk WCAG 3.0. Algoritma ini mengevaluasi kontras secara berbeda berdasarkan ukuran font, ketebalan, dan polaritas — pantau perkembangannya.

Pemecahan Masalah

Ya. WCAG AA adalah minimum yang diwajibkan secara hukum di sebagian besar yurisdiksi. AAA bersifat aspiratif dan tidak selalu dapat dicapai untuk semua kombinasi teks/latar belakang. Usahakan AAA pada teks isi jika memungkinkan.

Teks besar (18pt reguler atau 14pt tebal) memiliki ambang batas yang lebih rendah (3:1 untuk AA). Jika teks kecil Anda gagal pada 4,5:1, gelapkan teks atau terangkan latar belakang hingga rasio terpenuhi.

Coba sesuaikan hanya latar belakang alih-alih warna teks. Menggelapkan latar belakang putih sedikit (mis. menjadi abu-abu terang) dapat mencapai kepatuhan AA dengan perubahan visual minimal.

Perbedaan kecil dapat muncul dari cara alat membulatkan nilai luminansi floating-point. Kedua hasil seharusnya berada dalam rentang ±0,1 satu sama lain — gunakan nilai yang lebih konservatif (lebih rendah) untuk kepatuhan.

Tahukah Anda?

Rumus rasio kontras WCAG pertama kali diperkenalkan dalam WCAG 1.0 (1999) sebagai pemeriksaan perbedaan kecerahan sederhana. Rumus ini direvisi secara signifikan dalam WCAG 2.0 (2008) untuk menggunakan luminansi relatif — model yang didasarkan pada ruang warna CIE 1931 dan cara sistem penglihatan manusia memproses cahaya. Ambang batas 4,5:1 saat ini dipilih karena secara kurang lebih mengompensasi kehilangan kontras 3:1 yang dialami pengguna dengan penglihatan 20/80 (penglihatan rendah tanpa alat bantu).

Bangun Produk yang Bisa Digunakan Semua Orang

Kontras warna yang aksesibel bukan sekadar centang kepatuhan — ini adalah kualitas desain fundamental yang menguntungkan setiap pengguna. Alat gratis ini memberi Anda pemeriksaan WCAG real-time, simulasi buta warna, dan auto-fix cerdas dalam satu tempat, tanpa ada data yang meninggalkan browser Anda. Uji palet Anda sekarang, perbaiki yang gagal, dan luncurkan produk yang bekerja untuk semua orang.