Cek kontras warna
Periksa warna latar depan dan latar belakang terhadap ambang kontras WCAG 2.2 AA dan AAA. Sertakan transparansi di atas kanvas yang ditentukan, pratinjau teks, dan ekspor laporan.
Juga dikenal sebagaicontrast checker · pemeriksa kontras warna · color contrast checker · contrast checker WCAG · cek rasio kontras
Gunakan nama warna CSS, HEX, RGB/RGBA, atau HSL/HSLA. Warna transparan dikomposisikan di atas kanvas yang dipilih sebelum perhitungan.
| Penggunaan | Minimum | Hasil |
|---|---|---|
| Teks normal · AA | 4.5:1 | Lulus |
| Teks normal · AAA | 7:1 | Lulus |
| Teks besar · AA | 3:1 | Lulus |
| Teks besar · AAA | 4.5:1 | Lulus |
| UI dan grafik esensial · AA | 3:1 | Lulus |
Lulus/gagal menggunakan rasio tanpa pembulatan. Teks besar berarti minimal 24 CSS px, atau sekitar 18,67 CSS px jika tebal. Kontras UI bergantung pada warna berdampingan yang sebenarnya; pasangan ini saja tidak dapat menetapkan kesesuaian WCAG penuh.
Buat setiap kata mudah dibaca.
Pratinjau menggunakan ambang teks normal. Latar belakang efektif: #FFFFFF (dibulatkan untuk tampilan).
Tiga langkah kecil.
- Masukkan warna teks dan latar belakang sebagai nama warna CSS, HEX, RGB, atau HSL.
- Pilih kanvas opak di belakang warna transparan, lalu tinjau hasil kontras.
- Pratinjau teks normal atau besar, tukar warna, lalu salin atau unduh laporan.
Beberapa hal yang perlu diketahui.
Menggunakan perhitungan luminans relatif sRGB dari WCAG dengan rasio tanpa pembulatan untuk lulus/gagal. Teks besar berukuran minimal 24 piksel CSS atau sekitar 18,67 piksel jika tebal. Alat ini memeriksa sepasang warna solid; gradien, gambar, rendering font yang sebenarnya, warna UI di sekitarnya, dan kesesuaian aksesibilitas penuh memerlukan peninjauan terpisah.
Cara kerja privasi Anda →Sedikit lebih jelas.
Mengapa 4,50:1 kadang gagal?
Rasio yang ditampilkan dibulatkan ke dua angka desimal. Keputusan memakai nilai penuh tanpa pembulatan, sehingga rasio sedikit di bawah 4,5 tetap gagal memenuhi ambang AA untuk teks normal.
Bagaimana transparansi memengaruhi hasil?
Latar belakang lebih dulu dikomposisikan di atas kanvas opak yang dipilih. Teks kemudian dikomposisikan di atas latar belakang efektif itu sebelum kontras dihitung. Kanvas yang berbeda dapat mengubah hasilnya.
Pencarian terkaitcara cek kontras warna