Desain & Gambar
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
Cek rasio kontras warna teks dan latar menurut WCAG 2.2, dapatkan warna terdekat yang lolos AA/AAA, dan simulasikan tampilan bagi penyandang buta warna.
Gratis, tanpa login · diproses di perangkatmu
Pemeriksa Kontras Warna WCAG
Alat terkait
- 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.
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.