Pastikan semua orang dapat membaca teks Anda
Teks abu-abu muda di atas latar putih, teks putih pada tombol pastel, atau tautan biru di latar belakang gelap mungkin terlihat elegan dalam file desain, tetapi tidak dapat dibaca oleh pengguna sebenarnya. Pemeriksa kontras ini mengukur rasio kontras antara warna teks dan latar belakang apa pun, lalu memberi tahu Anda secara instan apakah hasilnya memenuhi standar Web Content Accessibility Guidelines (WCAG) level AA dan AAA — dan jika tidak, alat ini akan menyarankan warna terdekat yang memenuhinya.
Fitur
- Rasio kontras dari 1:1 hingga 21:1.
- Hasil WCAG 2 AA dan AAA untuk teks normal, teks besar, dan komponen UI.
- Format warna apa pun: HEX, RGB, HSL, atau nama warna CSS.
- Pratinjau langsung dengan judul, isi, dan teks kecil.
- Saran warna aksesibel yang mempertahankan rona warna Anda.
- Tombol tukar untuk mengecek versi teks terang pada latar gelap.
Sekilas tentang persyaratan WCAG
| Konten | AA | AAA |
|---|---|---|
| Teks normal | 4.5:1 | 7:1 |
| Teks besar (≥ 24 px, atau ≥ 19 px tebal) | 3:1 | 4.5:1 |
| Komponen UI dan grafis | 3:1 | — |
| Logo dan teks dekoratif | Tidak ada persyaratan | Tidak ada persyaratan |
Kombinasi umum
| Teks | Latar Belakang | Rasio | Teks normal AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Lulus |
| #767676 | #FFFFFF | 4.54:1 | Lulus (abu-abu paling muda yang lulus) |
| #999999 | #FFFFFF | 2.85:1 | Gagal |
| #FFFFFF | #0EA5E9 | 2.77:1 | Gagal |
| #FFFFFF | #0369A1 | 5.93:1 | Lulus |
Alat terkait
Konversi warna antar format dengan Konverter Warna, buat palet warna lengkap dengan Generator Palet Warna, atau pilih warna persis dari tangkapan layar dengan Pemilih Warna Gambar.