Pemeriksa Kontras Warna

Uji pematuhan kontras WCAG 2.1 AA/AAA untuk reka bentuk web yang boleh diakses

Pemeriksa Kontras Warna

Warna Latar Depan (Teks)

Warna Latar Belakang

Nisbah Kontras

21:1

AA Teks Biasa

Lulus

AA Teks Besar

Lulus

AAA Teks Biasa

Lulus

AAA Teks Besar

Lulus

Pratonton Langsung

Pratonton Teks Besar (18pt+) Beginilah rupa teks badan biasa (14px) dengan kombinasi warna yang anda pilih. Pastikan kontras yang mencukupi untuk kebolehbacaan.

Alternatif Boleh Diakses

Semua tahap kontras lulus! Tiada cadangan diperlukan.

Keperluan WCAG 2.1

Tahap	Biasa	Besar
AA	4.5:1	3:1
AAA	7:1	4.5:1

Semua pemprosesan berlaku dalam pelayar anda. Tiada data dihantar ke mana-mana pelayan.

Ciri-ciri

Pematuhan WCAG 2.1

Menguji tahap AA dan AAA untuk teks biasa dan besar mengikut garis panduan rasmi WCAG 2.1

Pratonton Langsung

Lihat kombinasi warna anda secara masa nyata dengan teks contoh pada saiz berbeza

Cadangan Pintar

Dapatkan alternatif warna yang boleh diakses secara automatik apabila kombinasi anda gagal memenuhi keperluan kontras

Privasi Diutamakan

Semua pengiraan dilakukan secara tempatan dalam pelayar anda, tiada data dihantar ke pelayan

Cara Menggunakan?

Pilih Warna

Masukkan warna latar depan (teks) dan latar belakang menggunakan pemilih warna atau medan input HEX.

Semak Keputusan

Lihat nisbah kontras dan status pematuhan WCAG AA/AAA untuk teks biasa dan besar.

Gunakan Cadangan

Jika kontras gagal, klik pada alternatif warna yang boleh diakses yang dicadangkan untuk menggunakannya serta-merta.

Soalan Lazim

WCAG (Web Content Accessibility Guidelines) ialah piawaian antarabangsa untuk kebolehcapaian web yang diterbitkan oleh W3C. Keperluan nisbah kontras memastikan teks boleh dibaca oleh pengguna yang mempunyai penglihatan rendah, buta warna, atau ketidakupayaan kognitif. Kegagalan mematuhi WCAG 2.1 juga merupakan isu pematuhan undang-undang di bawah undang-undang seperti ADA (AS), EN 301 549 (EU), dan Equality Act (UK).

Tahap AA (minimum): teks biasa memerlukan 4.5:1, teks besar memerlukan 3:1. Tahap AAA (dipertingkat): teks biasa memerlukan 7:1, teks besar memerlukan 4.5:1. Teks besar ialah 18pt (24px) atau lebih besar dalam berat biasa, atau 14pt (kira-kira 18.67px) atau lebih besar dalam berat tebal. Kebanyakan organisasi menyasarkan AA; AAA disyorkan untuk kandungan penjagaan kesihatan atau undang-undang.

Formula WCAG ialah: (L1 + 0.05) / (L2 + 0.05), di mana L1 ialah luminans relatif warna lebih cerah dan L2 ialah warna lebih gelap. Luminans relatif dikira daripada nilai RGB menggunakan pembetulan gamma. Putih tulen (1.0) berbanding hitam tulen (0.0) memberikan nisbah maksimum 21:1. Alat ini melakukan pengiraan penuh dengan serta-merta.

Teks yang sekurang-kurangnya 18pt (24px) dalam berat biasa, atau sekurang-kurangnya 14pt (kira-kira 18.67px) dalam berat tebal. Teks besar mempunyai keperluan kontras yang lebih longgar (3:1 untuk AA) kerana aksara yang lebih besar lebih mudah dibaca pada kontras yang lebih rendah. Fon tebal 16px layak sebagai teks besar.

Apabila warna anda gagal memenuhi keperluan kontras, alat ini secara automatik mencadangkan warna latar depan atau latar belakang alternatif yang mengekalkan warna yang serupa tetapi menyesuaikan kecerahan untuk memenuhi WCAG AA. Klik mana-mana cadangan untuk menggunakannya serta-merta — tiada perlu meneka nilai kecerahan HSL secara manual.

Julat adalah dari 1:1 (tiada kontras — warna yang sama) hingga 21:1 (maksimum — hitam tulen pada putih tulen). Nisbah 4.5:1 bermakna warna lebih cerah adalah 4.5 kali lebih terang daripada warna lebih gelap. Contoh biasa: hitam pada putih = 21:1, kelabu gelap pada putih = 7-15:1, kelabu sederhana pada putih = 3-5:1 (sempadan), kelabu cerah pada putih = sering di bawah 3:1 (gagal).

Alat ini menggunakan warna HEX pepejal, yang merupakan pendekatan yang betul untuk pengujian pematuhan WCAG. WCAG memerlukan pengujian warna akhir yang dipaparkan seperti yang dilihat oleh pengguna. Jika anda menggunakan ketelusan rgba, uji warna campuran sebenar (bagaimana teks kelihatan pada latar belakang sebenarnya), bukan kod warna telus itu sendiri.

Tidak. Semua pengiraan dijalankan secara tempatan dalam pelayar anda melalui JavaScript. Tiada nilai warna yang dihantar ke mana-mana pelayan.

Apa itu Pemeriksa Kontras Warna?

Alat yang memberitahu anda sama ada warna teks dan latar belakang anda memenuhi standard kebolehcapaian WCAG 2.1. Pilih dua warna dan lihat serta-merta sama ada ia lulus tahap AA dan AAA untuk teks biasa dan besar. Jika gagal, alat ini mencadangkan alternatif yang boleh diakses dengan satu klik.

Kenapa kontras penting

Kontras warna yang lemah adalah salah satu masalah kebolehcapaian paling biasa di web. Ia memberi kesan kepada orang yang mempunyai masalah penglihatan, buta warna dan juga pengguna di bawah cahaya matahari terik. Mematuhi WCAG bukan sahaja amalan baik, ia sering menjadi keperluan undang-undang.

Cara menggunakan

Masukkan warna latar depan dan belakang menggunakan kod HEX atau pemilih warna. Alat ini mengira nisbah kontras serta-merta dan menunjukkan lulus atau gagal untuk setiap tahap WCAG. Jika kontras rendah, semak bahagian cadangan.

Tips untuk pereka

Uji palet warna awal dalam proses reka bentuk, bukan selepas laman siap dibina. Teks gelap pada latar terang biasanya berkesan. Elakkan bergantung pada warna sahaja untuk menyampaikan maklumat.

Privasi

Semua berjalan dalam pelayar anda. Tiada data warna dihantar ke pelayan. Tiada akaun, tiada penjejakan.

Keselamatan dan Privasi

Keselamatan data anda adalah keutamaan kami

Pemprosesan Tempatan

Semua pemprosesan berlaku dalam pelayar anda

Tiada Pemindahan Data

Data anda tidak dihantar ke pelayan kami

Tiada Penyimpanan Data

Tiada data disimpan atau dikongsi

Penyulitan SSL

Penyulitan SSL untuk sambungan selamat

Langkah Seterusnya

Pemilih Warna

Pemilih warna lanjutan dengan penukaran HEX, RGB, HSL, HSV, CMYK dan pemeriksa kontras

Penukar HEX ke RGB

Tukar antara format warna HEX, RGB dan HSL

Adakah alat ini berguna?

Pemeriksa Kontras Warna