Alat Warna

Penyemak Kontras Warna: Nisbah WCAG AA dan AAA – Percuma

Percuma, tanpa daftar, berfungsi dalam penyemak imbas anda. Semak nisbah kontras WCAG antara warna teks dan latar, dengan keputusan lulus atau gagal untuk AA dan AAA. Jika gagal, klik warna terdekat yang lulus.

Teks besar kelihatan begini

Teks badan biasa kelihatan begini. Pantas si musang coklat melompat ke atas anjing yang malas, dan cetakan kecil, seperti kapsyen, terletak di bawahnya.

Teks kecil: kapsyen 14px.

Butang
Nisbah kontras13.08:1
  • Teks biasa, AA: LulusTeks badan, sekurang-kurangnya 4.5:1
  • Teks biasa, AAA: LulusDipertingkat, sekurang-kurangnya 7:1
  • Teks besar, AA: Lulus18pt+, atau 14pt+ tebal, sekurang-kurangnya 3:1
  • Teks besar, AAA: LulusDipertingkat, sekurang-kurangnya 4.5:1
  • Ikon dan kawalan, AA: LulusButang, sempadan, garisan carta: 3:1

Menggunakan formula kontras WCAG 2. Nisbah tidak sekali-kali dibundarkan ke atas, jadi 4.49:1 tidak dikira sebagai 4.5:1. Disemak pada peranti anda.

Mengapa guna Penyemak Kontras Warna

100% percuma
Gunakan seberapa kerap yang anda mahu. Tanpa daftar, tanpa tera air, tiada apa perlu dipasang.
Peribadi mengikut reka bentuk
Apa yang anda taip kekal dalam penyemak imbas anda dan tidak pernah dihantar kepada kami.
Berfungsi pada mana-mana peranti
Berjalan dalam penyemak imbas anda pada Windows, Mac, Linux, Android dan iPhone. Tiada aplikasi diperlukan.

Cara guna Penyemak Kontras Warna

  1. Masukkan Warna teks dan Latar sebagai HEX, rgb(), hsl() atau nama seperti navy, atau pilih dengan sampel warna. Guna Tukar tempat untuk menukarnya.
  2. Baca nisbah kontras dan lima keputusan: teks normal AA dan AAA, teks besar AA dan AAA, serta ikon dan kawalan.
  3. Semak pratonton langsung untuk melihat tajuk, teks badan, cetakan kecil dan butang dalam warna anda.
  4. Jika satu tahap gagal, klik salah satu Warna terdekat yang lulus. Ia mengekalkan rona anda dan hanya menukar tahap cerah atau gelap teks.

Soalan lazim

Apakah nisbah kontras yang saya perlukan?

WCAG AA memerlukan 4.5:1 untuk teks normal dan 3:1 untuk teks besar serta bahagian antara muka seperti butang, sempadan dan ikon. AAA memerlukan 7:1 untuk teks normal dan 4.5:1 untuk teks besar.

Apakah yang dikira sebagai teks besar?

Sekurang-kurangnya 18 titik (24px) biasa, atau 14 titik (lebih kurang 18.7px) tebal.

Bagaimanakah nisbah kontras dikira?

Dengan formula WCAG 2: kecerahan relatif setiap warna dikira, kemudian yang lebih cerah ditambah 0.05 dan dibahagi dengan yang lebih gelap ditambah 0.05. Hasilnya berjulat dari 1:1 (tiada kontras) hingga 21:1 (hitam atas putih).

Mengapa 4.49:1 gagal?

WCAG menyatakan nisbah tidak boleh dibundarkan ke atas, jadi apa-apa di bawah 4.5:1 tidak memenuhi AA untuk teks normal. Alat ini tidak sekali-kali membundarkan nisbah ke atas.

Bagaimana saya membetulkan warna yang gagal?

Di bawah Warna terdekat yang lulus, alat ini mencadangkan warna teks untuk AA dan satu untuk AAA. Setiap satu mengekalkan rona dan ketepuan anda dan hanya menukar kecerahan, supaya warna jenama anda tetap dikenali. Klik satu untuk menggunakannya.

Adakah ia mengendalikan warna teks lutsinar?

Ya. Warna teks lutsinar, seperti rgba(26, 20, 70, 0.6), dicampur dengan latar sebelum kontras diukur. Kelutsinaran latar diabaikan dan dianggap pepejal.

Adakah butang dan ikon juga memerlukan kontras?

Ya. WCAG 2.1 memerlukan 3:1 antara bahagian antara muka (sempadan butang, medan borang, ikon, garisan carta) dan warna di sebelahnya. Keputusan Ikon dan kawalan menyemaknya.

Adakah lulus bermakna laman saya boleh diakses?

Ia bermakna pasangan warna ini memenuhi peraturan kontras WCAG. Kebolehcapaian meliputi lebih banyak perkara, seperti saiz teks, keadaan fokus, teks alt dan penggunaan papan kekunci, jadi anggap ini sebagai satu semakan antara beberapa yang lain.

Adakah Penyemak Kontras Warna percuma?

Ya. Ia percuma digunakan, tanpa daftar dan tiada apa perlu dipasang.

Panduan bantuan dan cara (dalam bahasa Inggeris)

Alat berkaitan