Penyemak Kontras Warna
Tentukan nisbah kontras antara warna teks dan warna latar belakang serta kelulusan kriteria keterbacaan (WCAG AA) dengan serta-merta
Ciri-ciri
Tentukan nisbah kontras serta-merta
Paparkan kelulusan atau kegagalan WCAG AA hanya dengan memasukkan warna teks dan warna latar belakang
Sokongan pengambil dan kod
Tentukan dengan menampal HEX, bentuk ringkas, rgb() atau memilih warna
Paparan sampel 2 saiz
Sahkan rupa sebenar teks biasa dan tajuk dengan segera
Terapkan warna yang lulus dengan satu klik
Gunakan cadangan warna yang mengubah kecerahan sambil mengekalkan nada warna
Cara Penggunaan
Tentukan warna teks
Pilih menggunakan pengambil warna atau masukkan kod warna dalam salah satu format: #333333, #333, atau rgb(51, 51, 51)
Tentukan warna latar belakang
Tentukan warna latar belakang dengan cara yang sama. Keputusan akan dikemas kini secara automatik apabila anda memasukkan tanpa perlu menekan butang
Sahkan nisbah, kelulusan, dan sampel
Sahkan nisbah kontras, kelulusan teks biasa dan teks besar, penilaian ringkas, dan rupa sampel teks
Gunakan warna yang dicadangkan dan sahkan semula
Jika gagal, gunakan butang cadangan seperti "Tukar warna teks kepada..." untuk menggunakan warna yang lulus. Anda juga boleh menukar warna teks dan warna latar belakang menggunakan butang tukar
Kes Penggunaan
Semak skema warna slaid dan bahan
Sahkan warna teks dan warna latar belakang bahan dalaman dan slaid boleh dibaca sebelum dibuat
Semak skema warna laman web
Sahkan skema warna tapak atau sepanduk memenuhi kriteria keterbacaan (WCAG AA)
Tentukan penggunaan warna jenama dalam teks badan
Tentukan seberapa gelap warna jenama harus digunakan sebagai warna teks untuk digunakan dalam badan teks
Betulkan skema warna yang gagal
Tukar skema warna yang ditunjuk kepada warna yang lulus sambil mengekalkan nada warna
Pengetahuan Asas
Apakah nisbah kontras?
Nisbah kontras ialah penunjuk yang menyatakan perbezaan kecerahan antara warna teks dan warna latar belakang dalam nilai dari 1 : 1 hingga 21 : 1. Kombinasi hitam dan putih mencapai maksimum 21 : 1, dan warna yang sama memberikan minimum 1 : 1.
- Cara pengiraan：Nisbah kontras dikira dengan menukar dua warna kepada kecerahan relatif sRGB, kemudian menambahkan 0.05 kepada kecerahan yang lebih cerah dan yang lebih gelap masing-masing, dan membahagikannya.
- Garis panduan nilai：Latar belakang putih (#FFFFFF) dengan kelabu #777777 memberikan nisbah kontras 4.47 : 1, #999999 memberikan 2.84 : 1, dan hitam (#000000) memberikan 21 : 1.
Perbezaan antara AA dan AAA WCAG
WCAG ialah garis panduan antarabangsa mengenai keterbacaan kandungan web, dan ia menetapkan garis kelulusan nisbah kontras dalam dua peringkat: AA dan AAA.
- AA (Peringkat Piawai)：AA ialah kriteria yang memerlukan 4.5 : 1 atau lebih untuk teks biasa dan 3.0 : 1 atau lebih untuk teks besar, dan merupakan peringkat yang targetkan oleh laman web am.
- AAA (Peringkat Lebih Ketat)：AAA ialah kriteria yang memerlukan 7 : 1 atau lebih untuk teks biasa dan 4.5 : 1 atau lebih untuk teks besar, bertujuan untuk keterbacaan oleh mereka yang mempunyai penglihatan lemah.
Takrif teks besar
Teks besar dalam WCAG merujuk kepada teks yang bersaiz kira-kira 18 poin (24px) atau lebih, atau teks tebal bersaiz 14 poin (kira-kira 18.7px) atau lebih.
- Teks biasa：Teks biasa ialah teks yang bersaiz yang tidak memenuhi syarat teks besar, seperti badan teks dan catatan, dan memerlukan nisbah kontras 4.5 : 1 atau lebih.
- Hubungan dengan tajuk：Walaupun tajuk, jika di bawah 24px dan bukan tebal, ia dianggap sebagai teks biasa, jadi anda perlu memeriksa kedua-dua saiz dan ketebalan.
Keselamatan dan Privasi
Selesai dalam pelayar
Data input diproses hanya dalam pelayar anda dan tidak dihantar ke luar.
Diproses hanya dalam pelayar
Pengiraan nisbah kontras dan cadangan warna semuanya dilakukan dalam pelayar anda, data input tidak dihantar ke pelayan.
Komunikasi disulitkan dengan HTTPS
Pemuatan halaman juga disulitkan oleh TLS, kandungan tidak boleh dibaca oleh pihak ketiga.
Tiada penghantaran kepada pihak ketiga
Kandungan input tidak dihantar ke perkhidmatan luaran seperti rangkaian iklan atau penjejak.
Tiada penyimpanan automatik hasil
Warna teks dan warna latar belakang yang dimasukkan dan cadangan input tidak disimpan di pelayan.
Ikuti RAKKOTOOLS di Carian Google
193 alat berguna yang mudah ditemui dari Carian Google dan Carian AI!
- Ditemui dalam carian
- Dipaparkan dalam Carian AI
- Menemui alat baharu
Maklumat kemas kini
- update #337
Tambah Penyemak Kontras Warna, nilai kemudahan membaca warna teks dan warna latar belakang