Tiada muat naik, 100% setempat, tiada akaun

Penyemak kontras WCAG

Taip atau pilih dua warna dan lihat nisbah kontras WCAG serta-merta, dengan lencana lulus AA/AAA bagi teks biasa dan besar.

Cara Penyemak kontras berfungsi

Alat ini mengira nisbah kontras WCAG antara dua warna dan menunjukkan sama ada pasangan itu mencapai tahap AA atau AAA untuk teks biasa, teks besar dan komponen UI bukan teks. Semuanya dikira secara tempatan dalam pelayar anda; warna yang anda masukkan tidak pernah dimuat naik.

Ditulis oleh Bastien Sulyan

Cara menggunakan Penyemak kontras, langkah demi langkah

  1. Masukkan atau pilih warna latar depan (teks).
  2. Masukkan atau pilih warna latar belakang.
  3. Baca nisbah kontras dan lencana AA/AAA bagi teks biasa, teks besar dan komponen UI bukan teks.
  4. Guna Tukar warna untuk menyemak pasangan itu dalam arah bertentangan.

Kes penggunaan biasa

  • Menyemak warna utama jenama berbanding putih atau hitam sebelum melancarkan komponen butang.
  • Mengesahkan teks badan berwarna kelabu pudar masih mencapai AA pada latar belakang kad yang cerah.
  • Mengesahkan warna pautan dalam sesuatu perenggan mencapai ambang 4.5:1 bagi teks biasa.
  • Menguji sama ada tajuk besar dan lebih nipis masih mencapai ambang longgar 3:1 bagi teks besar.

Soalan lazim

Adakah alat ini menghantar warna saya ke pelayan?

Tidak, pengiraan berlaku sepenuhnya dalam pelayar anda menggunakan JavaScript; tiada apa yang anda masukkan dimuat naik.

Nisbah kontras apa yang saya perlukan untuk AA atau AAA?

WCAG 2.x memerlukan 4.5:1 untuk AA teks biasa, 7:1 untuk AAA teks biasa, 3:1 untuk AA teks besar dan 4.5:1 untuk AAA teks besar.

Apakah yang dikira sebagai teks besar?

Sekurang-kurangnya 24px (18pt) berat biasa, atau kira-kira 18.7px (14pt) tebal; apa-apa yang lebih kecil menggunakan ambang teks biasa.

Mengapa menukar latar depan dan latar belakang tidak mengubah nisbah?

Formula nisbah itu simetri: ia hanya membandingkan kecerahan yang lebih terang dan lebih gelap, bukan warna mana yang digunakan untuk teks. Menukar tetap berguna kerana ia memberitahu anda sama ada pasangan itu turut berfungsi apabila peranan dibalikkan, contohnya teks gelap pada cip terang berbanding teks terang pada cip gelap.

Adakah lulus AA menjamin reka bentuk saya boleh diakses?

Tidak. Kontras hanyalah satu kriteria kejayaan WCAG antara banyak lagi. Pemilihan warna bagi orang dengan kekurangan penglihatan warna, keterlihatan fokus, saiz semula teks dan navigasi papan kekunci adalah semakan berasingan; simulator buta warna di laman ini meliputi salah satu daripadanya.

Adakah ini alat rasmi W3C atau WebAIM?

Tidak. Ia melaksanakan formula kontras WCAG 2.x yang awam secara bebas dan tidak berafiliasi dengan W3C atau mana-mana organisasi kebolehcapaian lain.

Alat berkaitan

Kekalkan semuanya setempat, terokai alat pelengkap.

Semua alat pembangun