Desain & Gambar
Pemeriksa Kontras Warna WCAG
Cek rasio kontras warna teks dan latar menurut WCAG 2.2, lihat hasilnya di komponen nyata, dapatkan warna terdekat yang lolos AA/AAA, dan simulasikan tampilan bagi penyandang buta warna.
- Gratis, tanpa login
- Diproses di perangkatmu
- Sumber diperiksa 2026-09-26
Bagikan
Tautan alat
Pasang di situsmu
Boleh untuk blog, situs kampus, atau intranet kantor.
<iframe src="https://kelasgratis.com/alat/pemeriksa-kontras?embed=1" width="100%" height="640" style="border:1px solid #e4e4e7;border-radius:12px" title="Pemeriksa Kontras Warna WCAG — KelasGratis" loading="lazy"></iframe>
Pemeriksa Kontras Warna WCAG
Masukan dan berkasmu diproses di peramban ini dan tidak dikirim ke server KelasGratis.
Langkah berikutnya
- Ekstrak palet →Ambil warna dominan dari gambar beserta porsinya, ambil warna di titik mana pun dengan pipet, lihat HEX/RGB/HSL, lalu ekspor sebagai variabel CSS, Tailwind, SCSS, JSON, atau gambar palet.
- QR Code →Buat QR code untuk tautan, teks, WhatsApp, Wi-Fi, kontak (vCard), email, SMS, atau lokasi, dengan logo di tengah, modul bulat, bingkai berteks ajakan, dan ekspor PNG/SVG. Bisa membuat banyak QR sekaligus dari CSV.
- Isi warna teks dan latar dalam HEX, rgb(), atau hsl(), atau pakai pemilih warna.
- Baca rasio dan hasil tiap kriteria; lihat pratinjau di judul, paragraf, tombol, dan ikon.
- Bila gagal, tekan Pakai pada saran warna terdekat yang lolos.
Warna dan kontras dipasang lewat CSS, dan kelasnya melatih mengatur tampilan halaman. Buka kelas CSS Tata Letak dan Responsif — gratis sampai selesai, latihannya dinilai otomatis.
Rasio kontras WCAG = (L1 + 0,05) ÷ (L2 + 0,05), dengan L luminans relatif warna yang lebih terang (L1) dan lebih gelap (L2). Batas WCAG 2.2: teks biasa AA 4,5:1, teks besar AA 3:1, AAA 7:1 dan 4,5:1, komponen dan ikon 3:1. Teks besar = minimal 24 px, atau 18,66 px tebal.
Saran perbaikan mempertahankan hue dan saturasi warna, lalu menggeser kecerahan sedikit demi sedikit sampai lolos, sehingga warna merek tetap dikenali. Simulasi buta warna memakai model Machado dkk. (2009) untuk memeriksa warna yang hanya dibedakan lewat hue.
Contoh: Teks abu-abu yang terlalu pucat
- Teks #9CA3AF di latar putih: 2,54:1 — gagal untuk teks biasa.
- Saran AA: #6D7787 (4,53:1) — hue dan saturasi sama, hanya lebih gelap. Tekan Pakai.
- Pratinjau komponen: paragraf dan teks kecil kini terbaca.
- Cek simulasi deuteranopia: rasio tetap di atas 4,5:1.
Kesalahan yang sering terjadi
- Lolos untuk teks besar tidak berarti lolos untuk teks biasa; periksa ukuran teks yang sebenarnya dipakai.
- Teks di atas foto kontrasnya berubah-ubah; beri latar semi-gelap atau bayangan di bawah teks.
- Membedakan status hanya dengan warna merah/hijau menyulitkan penyandang buta warna; tambahkan ikon atau label teks.
Apakah Pemeriksa kontras ini gratis?
Gratis dan tanpa akun. Prosesnya berjalan di peramban kamu; masukan dan berkasmu tidak dikirim ke server kami dan tidak disimpan setelah halaman ditutup.
Dari mana aturan dan rumusnya?
Dari W3C — WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum); W3C — WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced). Bagian yang dipakai dan tanggal pemeriksaannya tercantum di bagian Sumber.
Boleh dipasang di situs saya?
Boleh. Buka menu Bagikan di halaman ini lalu salin kode embed; bingkainya menampilkan alat saja beserta tautan balik ke https://kelasgratis.com/alat/pemeriksa-kontras.
- W3C — WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum) — Ambang 4,5:1 teks biasa dan 3:1 teks besar; rumus luminans relatif dan rasio kontras di bagian definisi. Diperiksa 2026-09-26.
- W3C — WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced) — Ambang AAA 7:1 dan 4,5:1. Diperiksa 2026-09-26.