# Penyemak Kontras Warna Bandingkan warna teks dengan warna latar belakang berdasarkan WCAG 2.2 terus di sini, atau masukkan alamat halaman untuk mencari setiap teks di bawah minimum kontras, berserta warna yang diukur dan warna terdekat yang lulus. ## Apa yang disemak oleh alat ini - Nisbah WCAG bagi mana-mana dua warna: Kalkulator menggunakan formula kecerahan relatif (relative luminance) daripada definisi WCAG 2.2 dan menunjukkan keputusan untuk teks biasa, teks besar dan bahagian antara muka, pada tahap AA dan AAA. Ia berjalan dalam pelayar anda. - Warna yang lulus, siap dikira: Apabila sesuatu pasangan gagal, ia mencari warna teks terdekat dengan rona yang sama yang mencapai 4.5:1 atau 7:1, supaya anda mengubah reka bentuk anda sesedikit mungkin. - Setiap teks berkontras rendah pada halaman: Imbasan halaman menjalankan peraturan color-contrast axe-core dalam pelayar Chrome sebenar dan menyenaraikan setiap elemen yang gagal berserta warna teks, warna latar belakang, saiz fon dan nisbahnya. - Dikumpulkan mengikut pasangan warna: Kegagalan dikumpulkan mengikut warna teks dan warna latar belakang, kerana satu perubahan pada warna tema biasanya membaiki setiap elemen yang menggunakannya. - Ambang yang betul untuk teks besar: Teks bersaiz sekurang-kurangnya 24 piksel, atau 18.66 piksel jika tebal, memerlukan 3:1 dan bukannya 4.5:1. Imbasan menggunakan ambang yang betul bagi setiap elemen berdasarkan saiz dan ketebalan yang dikira. - Apa yang tidak dapat diukur, dan sebabnya: Teks di atas imej, gradien atau elemen yang bertindih disenaraikan secara berasingan berserta sebabnya, supaya anda tahu dengan tepat apa yang perlu disemak dengan mata. ## Apa yang tidak dapat disemaknya - Mengukur teks di atas foto, gradien atau video. Perisian tidak dapat mengetahui bahagian imej yang berada di belakang setiap huruf, jadi teks ini disenaraikan untuk anda semak. - Menyemak keadaan hover, fokus atau keadaan lain. Imbasan melihat halaman seperti semasa dimuatkan; semak warna tersebut dengan kalkulator. - Mengimbas ikon, sempadan dan medan borang pada halaman untuk WCAG 1.4.11. Kalkulator menunjukkan keputusan 3:1 bagi mana-mana pasangan yang anda masukkan. - Membaca teks yang menjadi sebahagian daripada imej, seperti sepanduk yang perkataannya tertanam dalam imej. - Menguji lebih daripada halaman yang anda masukkan. Imbasan percuma penuh menguji sehingga lima halaman penting. ## Mengapa ia penting Kontras rendah ialah kegagalan kebolehcapaian yang paling biasa di web. Analisis WebAIM 2026 terhadap sejuta halaman utama teratas menemui teks berkontras rendah pada 83.9% daripadanya, dengan purata 34 kejadian bagi setiap halaman. Teks yang pudar sukar dibaca oleh orang yang mengalami penglihatan terhad atau kekurangan penglihatan warna, dan oleh sesiapa sahaja yang menggunakan telefon di bawah cahaya matahari terik. Kriteria kejayaan WCAG 2.2 1.4.3, pada Tahap AA, menetapkan minimum 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Ia juga antara masalah yang paling murah untuk dibaiki: di kebanyakan laman, segelintir warna tema menyebabkan hampir setiap kegagalan, dan menukarnya membaiki setiap halaman sekali gus. ## Cara membaca keputusan - Nisbah kontras: Daripada 1:1 (warna yang sama dua kali) hingga 21:1 (hitam di atas putih). Nisbah dibundarkan ke bawah, jadi pasangan yang menunjukkan 4.49:1 gagal mencapai minimum 4.5:1. - Teks biasa, AA (4.5:1): Minimum untuk teks badan, pautan, label dan teks butang di bawah WCAG 1.4.3. - Teks besar, AA (3:1): Untuk teks bersaiz sekurang-kurangnya 24 piksel, atau 18.66 piksel jika tebal. WCAG mentakrifkan teks besar sebagai 18 poin, atau 14 poin tebal. - AAA (7:1 dan 4.5:1): Tahap dipertingkat dalam WCAG 1.4.6. Ia tidak diperlukan untuk keakuran AA, tetapi membantu lebih ramai pembaca. - Ikon, sempadan dan medan borang (3:1): WCAG 1.4.11 menetapkan 3:1 berbanding warna bersebelahan bagi bahagian kawalan dan grafik yang perlu dilihat oleh orang untuk menggunakannya. - Teks yang gagal: Setiap elemen yang diukur oleh imbasan di bawah ambangnya, berserta pemilih, warna, saiz dan nisbahnya. Buka satu untuk melihat markupnya dan, jika tersedia, tangkapan skrin. - Untuk disemak dengan mata: Teks yang tidak dapat diukur oleh axe-core, berserta sebabnya, contohnya imej atau gradien di belakangnya. ## Cara membaiki masalah yang paling biasa - Teks kelabu di atas putih: #767676 ialah lebih kurang warna kelabu paling cerah yang mencapai 4.5:1 di atas putih (4.54:1). Kelabu yang lebih cerah seperti #999999 (2.84:1) ialah punca biasa kegagalan pada pengaki, kapsyen, teks pemegang tempat dan harga. - Teks putih pada butang berwarna jenama: Jika teks putih pada warna jenama anda gagal, gelapkan latar belakang butang beberapa peringkat atau gunakan teks gelap. Semak juga warna hover dan fokus, kerana warna ini selalunya menjadi lebih cerah. - Teks pemegang tempat dalam borang: Teks pemegang tempat (placeholder) tetap teks dan memerlukan 4.5:1. Lebih baik lagi, gunakan label yang kelihatan di atas medan supaya teks pemegang tempat bukan satu-satunya arahan. - Teks di atas imej dan peluncur: Letakkan teks pada latar padu atau separa lut sinar, atau tambah tindanan gelap pada imej, kemudian semak bahagian paling cerah imej yang berada di belakang teks. - Lencana jualan dan cetakan halus: Teks dalam kawalan yang dinyahdayakan dikecualikan daripada 1.4.3, tetapi lencana jualan, harga dan cetakan halus undang-undang tidak dikecualikan. Teks inilah yang selalunya paling pudar pada halaman kedai. ## Soalan lazim ### Apakah nisbah kontras yang ditetapkan oleh WCAG? Untuk Tahap AA, 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (kriteria kejayaan 1.4.3), dan 3:1 untuk komponen antara muka dan grafik yang bermakna (1.4.11). Tahap AAA menetapkan 7:1 dan 4.5:1 (1.4.6). ### Apakah yang dikira sebagai teks besar? WCAG mentakrifkan teks berskala besar sebagai sekurang-kurangnya 18 poin, atau 14 poin tebal. Dalam piksel CSS, ini lebih kurang 24px, atau 18.66px jika tebal. ### Adakah logo perlu memenuhi minimum kontras? Tidak. WCAG 1.4.3 mengecualikan logotaip dan teks yang menjadi sebahagian daripada logo atau nama jenama, serta teks yang semata-mata hiasan dan teks dalam kawalan yang tidak aktif. ### Mengapakah imbasan menyenaraikan teks di atas imej untuk disemak? axe-core mengukur warna rata. Apabila imej, gradien atau elemen lain berada di belakang teks, ia tidak dapat menentukan warna mana yang bertemu, jadi ia melaporkan elemen itu untuk disemak oleh manusia dan bukannya meneka. ### Adakah saya memerlukan kontras AAA? AAA tidak diperlukan untuk keakuran Tahap AA, dan W3C tidak mengesyorkan agar AAA diwajibkan untuk keseluruhan laman. Mencapai 7:1 untuk teks badan tetap amalan yang baik jika reka bentuk anda membenarkannya. ### Adakah APCA sebahagian daripada WCAG? Tidak. APCA ialah kaedah kontras yang berbeza yang telah dibincangkan untuk WCAG 3, yang masih dalam bentuk draf. Keakuran hari ini diukur dengan nisbah WCAG 2 yang dikira oleh alat ini. ## Sumber - [W3C: Memahami kriteria kejayaan WCAG 2.2 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Memahami kriteria kejayaan 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Memahami kriteria kejayaan 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: Definisi kecerahan relatif (relative luminance) dalam WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: Peraturan color-contrast axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)