Cek kontras warna
Pastikan teks Anda mudah dibaca oleh semua orang, dan dapatkan perbaikannya jika belum.
Tersegel di perangkat ini
Berjalan di browser Anda. Tidak ada yang diunggah.
Tersegel
Warna
- Rasio kontras
- Teks normal
- AA · 4,5:1
- AAA · 7:1
- Teks besar
- AA · 3:1
- AAA · 4,5:1
- Elemen antarmuka dan ikon
- AA · 3:1
- Kontras APCA (sebagai informasi)
APCA adalah metode baru yang sedang dikaji untuk pedoman aksesibilitas mendatang. Saat ini WCAG 2.2 tetap menjadi acuan.
Pratinjau
Teks besar terlihat seperti ini
Teks normal harus tetap mudah dibaca oleh semua orang, termasuk orang dengan penglihatan lemah, di ponsel di bawah terik matahari, atau di layar lama.
Tulisan kecil dan keterangan gambar memerlukan kontras paling tinggi.
Saran perbaikan
Cara kerjanya
-
Masukkan dua warna Anda
Ketik atau pilih warna teks dan warna latar. Format apa pun bisa: HEX, RGB, HSL, atau nama CSS.
-
Baca hasilnya
Lihat rasio kontras dan apakah lolos WCAG 2.2 AA dan AAA untuk teks normal, teks besar, dan elemen antarmuka.
-
Terapkan perbaikan jika perlu
Jika suatu level gagal, pakai salah satu warna yang disarankan: itulah warna terdekat dengan rona yang sama yang lolos.
Pertanyaan umum
Rasio kontras berapa yang saya perlukan?
WCAG 2.2 level AA mensyaratkan minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Level AAA mensyaratkan 7:1 dan 4,5:1. Ikon, garis tepi kolom input, dan elemen antarmuka lain memerlukan minimal 3:1 terhadap warna di sekitarnya.
Apa yang termasuk teks besar?
Teks berukuran minimal 18 poin (24 piksel CSS), atau minimal 14 poin (sekitar 18,7 piksel CSS) jika tebal. Semua yang lebih kecil termasuk teks normal.
Mengapa 4,49:1 gagal padahal sangat dekat dengan 4,5:1?
Ambang batas WCAG adalah batas minimum yang ketat dan rasionya tidak boleh dibulatkan ke atas. Itulah sebabnya pemeriksa ini menampilkan rasio yang dibulatkan ke bawah: nilai yang tampak lolos memang benar-benar lolos.
Apa itu APCA?
APCA (Accessible Perceptual Contrast Algorithm) adalah cara baru mengukur kontras yang memperhitungkan apakah teks gelap di atas terang atau terang di atas gelap. Metode ini sedang dikaji untuk versi pedoman mendatang. Di sini APCA hanya ditampilkan sebagai informasi: saat ini, persyaratan hukum dan audit mengacu pada rasio WCAG 2.
Bagaimana warna yang disarankan dipilih?
Pemeriksa mempertahankan rona dan kepekatan warna Anda dan hanya mengubah kecerahannya, dalam ruang warna perseptual OKLCH, sampai menemukan nilai terdekat yang mencapai level tersebut. Warna Anda tetap terlihat seperti aslinya, hanya sedikit lebih terang atau lebih gelap.
Apakah bisa untuk warna transparan?
Bisa untuk warna teks: warna teks semi-transparan dicampur dulu dengan latar, karena itulah warna yang benar-benar dilihat orang. Latar dianggap solid.