Memahami Formula Kontras WCAG 2.1 / 2.2
Kebolehcapaian kandungan web bergantung kuat pada kejelasan visual antara teks dan latar belakangnya. Alat Pemeriksa Kontras ini menggunakan formula standard WCAG 2.1 / 2.2 untuk mengira nisbah kontras antara dua warna yang ditentukan. Formula ini mengukur perbezaan kecerahan relatif (relative luminance) antara warna teks dan warna latar belakang.
Nisbah kontras yang dihasilkan dinyatakan dalam format "X:1", di mana nilai minimum ialah 1:1 (tiada kontras langsung, seperti teks putih di atas latar belakang putih) dan nilai maksimum ialah 21:1 (kontras tertinggi, iaitu teks hitam di atas latar belakang putih).i seluruh dunia.
Format Input Warna yang Disokong
Untuk memulakan semakan, anda perlu memasukkan nilai warna bagi dua parameter utama:
- Warna teks (warna hadapan)
- Warna latar belakang
Alat ini menerima tiga format warna standard industri:
- Nilai Hex: Contohnya
#1a1a1aatau#ffffff. - Nilai
rgb(): Contohnyargb(26, 26, 26)ataurgb(255, 255, 255). - Nilai
hsl(): Format Hue, Saturation, dan Lightness.
Secara lalai, alat ini bermula dengan warna awal #4f46e5 untuk teks dan #ffffff untuk latar belakang, yang menghasilkan nisbah kontras 6.29:1. Anda juga boleh menggunakan butang tukar untuk menukar kedudukan antara warna teks dan warna latar belakang secara langsung.
Jika format yang dimasukkan tidak sah, sistem akan memaparkan mesej ralat berikut:
- Ralat warna teks: "Masukkan warna teks yang sah, seperti #1a1a1a or rgb(26, 26, 26)."
- Ralat warna latar belakang: "Masukkan warna latar belakang yang sah, seperti #ffffff atau rgb(255, 255, 255)."
Perbezaan Tahap Kebolehcapaian AA dan AAA
Standard Web Content Accessibility Guidelines (WCAG) membahagikan tahap kebolehcapaian kepada beberapa peringkat pematuhan, khususnya AA dan AAA. Perbezaan utama antara kedua-dua tahap ini terletak pada had minimum nisbah kontras yang diperlukan untuk memastikan teks boleh dibaca oleh pengguna yang mempunyai gangguan penglihatan:
| Kategori Elemen | Tahap AA (Minimum) | Tahap AAA (Lebih Ketat) |
|---|---|---|
| Teks biasa | Sekurang-kurangnya 4.5:1 | Sekurang-kurangnya 7:1 |
| Teks besar | Sekurang-kurangnya 3:1 | Sekurang-kurangnya 4.5:1 |
| UI & grafik | Sekurang-kurangnya 3:1 (Satu ambang sahaja) | Tidak berkenaan (Tiada perbezaan AA/AAA) |
Tahap AA ialah sasaran standard bagi kebanyakan laman web komersial dan awam, manakala tahap AAA memberikan kemudahan membaca yang optimum untuk kumpulan pengguna yang lebih luas.
Definisi Teks Biasa, Teks Besar, dan Komponen UI
Sistem penilaian kontras membedakan saiz teks kerana teks yang lebih besar lebih mudah dibaca walaupun pada nisbah kontras yang lebih rendah. Berikut adalah takrifan saiz mengikut standard WCAG:
- Teks besar: Ditakrifkan sebagai teks yang bersaiz dari 18pt (kira-kira 24px) ke atas, atau bersaiz dari 14pt (kira-kira 18.5px) ke atas apabila ditulis dalam format tebal (bold).
- Teks biasa: Semua teks yang berada di bawah ukuran ambang teks besar tersebut.
- UI & grafik: Komponen antara muka pengguna dan elemen grafik aktif. Kategori ini dinilai berdasarkan satu ambang kelulusan tunggal iaitu 3:1. Tiada perbezaan antara tahap AA dan AAA untuk kategori UI & grafik ini.
Memahami Keputusan dan Ringkasan Penilaian
Selepas anda memasukkan warna, alat ini akan memaparkan status kelulusan ("Lulus" atau "Gagal") bagi setiap kategori. Di samping itu, satu mesej ringkasan (verdict) akan dipaparkan untuk menunjukkan tahap kelulusan tertinggi yang dicapai oleh kombinasi warna tersebut:
- "Lulus AA dan AAA untuk teks biasa." — Dipaparkan apabila kontras mencapai sekurang-kurangnya 7:1.
- "Lulus AA untuk teks biasa." — Dipaparkan apabila kontras mencapai sekurang-kurangnya 4.5:1 tetapi di bawah 7:1.
- "Lulus AA untuk teks besar sahaja." — Dipaparkan apabila kontras mencapai sekurang-kurangnya 3:1 tetapi di bawah 4.5:1.
- "Di bawah minimum AA — tingkatkan kontras." — Dipaparkan apabila kontras berada di bawah 3:1.
Pemprosesan Tempatan dan Privasi Data
Keselamatan data anda adalah keutamaan kami. Setiap pemeriksaan kontras dijalankan sepenuhnya di dalam penyemak imbas internet anda sendiri. Tiada sebarang data warna, teks, atau maklumat input yang anda masukkan akan dimuat naik ke pelayan BroBroGo. Proses pengiraan formula berlaku secara tempatan pada peranti anda.
Soalan Lazim (FAQ)
Apakah maksud keputusan AA dan AAA?
AA ialah tahap yang disasarkan oleh kebanyakan tapak: ia memerlukan nisbah sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. AAA adalah lebih ketat — 7:1 untuk teks biasa dan 4.5:1 for teks besar. Nisbah bermula dari 1:1 (tiada kontras) hingga 21:1 (hitam atas putih).
Apakah yang dikira sebagai teks besar?
Teks daripada 18pt (kira-kira 24px), atau 14pt (kira-kira 18.5px) apabila tebal. Teks yang lebih besar kekal mudah dibaca pada kontras yang lebih rendah, jadi ia lulus AA pada 3:1 dan AAA pada 4.5:1 berbanding ambang teks biasa yang lebih ketat.
Apakah format warna yang boleh saya masukkan?
Taip nilai hex seperti #1a1a1a, nilai rgb() seperti rgb(26, 26, 26), atau nilai hsl() — atau klik mana-mana contoh warna untuk memilih warna. Gunakan butang tukar untuk menukar warna teks dan latar belakang.
Adakah ini WCAG 2 atau kaedah APCA yang lebih baharu?
Ia menggunakan formula WCAG 2.1 / 2.2, iaitu formula yang dirujuk oleh peraturan dan audit kebolehaksesan hari ini. APCA ialah kaedah yang lebih baharu dan lebih berasaskan persepsi yang masih dirangka untuk WCAG 3 — berpotensi, tetapi belum menjadi standard pematuhan, jadi keputusan lulus di sini tidak menggunakannya.