Cara mengaudit kontras warna tanpa memasang apa-apa

Audit kontras warna sering dianggap sebagai tugas kebolehcapaian khusus: buka fail reka bentuk, pasang pemalam, eksport tangkapan skrin, jalankan laporan, kemudian berdebat tentang warna jenama. Itu boleh berguna, tetapi bukan di situ kebanyakan pasukan patut bermula.

Untuk laman web produksi, audit yang paling pantas dan boleh dipercayai biasanya dilakukan dalam pelayar yang sudah pun anda buka. DevTools pelayar moden boleh memeriksa warna terhitung, menunjukkan nisbah kontras, mendedahkan gaya keadaan, dan membantu anda menguji kes rumit yang terlepas oleh laporan automatik.

Panduan ini mengandaikan anda tidak memasang apa-apa. Tiada sambungan pelayar. Tiada pemalam reka bentuk. Tiada suite audit berbayar. Hanya halaman, pelayar, dan kaedah yang ringkas.

Peraturan kontras yang sebenarnya anda perlukan

Untuk kebanyakan kerja web, kontras WCAG bergantung pada beberapa ambang:

• Teks biasa: sekurang-kurangnya kontras 4.5:1 terhadap latar belakangnya.
• Teks besar: sekurang-kurangnya 3:1. WCAG mentakrifkannya sebagai kira-kira 24 piksel CSS, atau kira-kira 18.66 piksel CSS jika tebal.
• Komponen UI dan objek grafik: sekurang-kurangnya 3:1 untuk sempadan, ikon, keadaan dan bahagian carta yang bermakna serta diperlukan untuk memahami antara muka.
• Kontras dipertingkat: 7:1 untuk teks biasa dan 4.5:1 untuk teks besar jika anda menyasarkan melebihi garis dasar.

Terdapat pengecualian, seperti kawalan tidak aktif, elemen hiasan dan logo. Gunakan pengecualian tersebut dengan berhemat. “Ia sebahagian daripada jenama” bukan pengecualian; ia ialah kekangan reka bentuk.

Ingat juga bahawa kontras hanyalah satu bahagian daripada penggunaan warna yang boleh dicapai. Jika keadaan ralat berwarna merah mempunyai kontras yang mencukupi tetapi tiada teks, label ikon atau petunjuk programatik, ia masih boleh gagal untuk pengguna yang tidak dapat membezakan merah daripada warna berhampiran.

Mulakan dengan halaman yang dirender, bukan fail reka bentuk

Fail reka bentuk berguna, tetapi ia tidak merangkumi setiap pemboleh ubah dunia sebenar: tindanan CSS, kelegapan, keadaan hover, perenderan fon pelayar, zum pengguna, mod gelap, gaya diwarisi, kandungan CMS dan benaman pemasaran.

Audit halaman sebagaimana pengguna menerimanya.

Buka halaman dalam pelayar desktop semasa. Chrome, Edge, Firefox dan Safari semuanya mempunyai alat pemeriksaan yang berguna. Label tepat mungkin berbeza, tetapi aliran kerjanya sama:

1. Klik kanan teks atau elemen UI.
2. Pilih Inspect.
3. Cari color dan background-color yang terhitung.
4. Gunakan swatch warna pelayar atau panel kebolehcapaian untuk membaca nisbah kontras.
5. Catat lulus, gagal dan ketidakpastian.

Dalam pelayar berasaskan Chromium, pemilih warna sering menunjukkan nisbah kontras dan panduan lulus/gagal WCAG untuk teks. Firefox DevTools juga memaparkan maklumat kebolehcapaian dan alat warna. Safari’s Web Inspector boleh menunjukkan gaya terhitung dan maklumat kebolehcapaian, walaupun aliran kerjanya sedikit berbeza.

Yang penting bukan pelayar tertentu. Yang penting ialah membaca hasil terhitung, bukan nilai yang seseorang fikir komponen itu gunakan.

Bina senarai audit kecil dahulu

Jangan periksa teks secara rawak sehingga anda penat. Buat inventori ringkas pola:

• Teks isi pada latar belakang halaman utama.
• Teks pudar, kapsyen, metadata dan ruang letak.
• Pautan dalam keadaan biasa, hover, dilawati dan fokus.
• Butang utama, sekunder dan destruktif.
• Label borang, teks bantuan, ralat dan mesej kejayaan.
• Item navigasi, breadcrumbs dan tab.
• Kad, badge, pill dan tag.
• Ikon yang menyampaikan makna.
• Carta, peta, bar kemajuan dan warna status.
• Teks di atas imej, video, gradien atau tindanan lut cahaya.

Ini mencukupi untuk menemukan kebanyakan kegagalan pada laman biasa. Ia juga memastikan audit terikat pada komponen, bukan piksel sekali guna.

Jika audit anda merangkumi butang, padankan semakan kontras dengan asas dalam senarai semak butang web boleh capai kami. Masalah kontras butang sering berada bersebelahan dengan keadaan fokus yang hilang, label yang tidak jelas atau tingkah laku papan kekunci yang rosak.

Periksa kontras teks dalam DevTools

Untuk teks biasa pada latar belakang pejal, pelayar biasanya boleh mengira kontras untuk anda.

Periksa elemen dan cari sifat color. Buka pemilih warna daripada swatch. Jika pelayar boleh menentukan latar belakang, ia akan menunjukkan nisbah kontras. Sesetengah alat juga melukis garisan dalam pemilih warna yang menunjukkan tempat warna tersebut akan lulus 3:1, 4.5:1 atau 7:1.

Apabila pelayar melaporkan kegagalan, percayainya sehingga anda boleh membuktikan sebaliknya. Apabila ia melaporkan lulus, tetap gunakan pertimbangan. Jenis huruf kecil dan nipis, paparan berkualiti rendah, anti-aliasing yang berat dan latar belakang sibuk boleh membuatkan teks yang secara teknikal lulus terasa lemah.

Peraturan praktikal: jika teks isi hanya sekadar lulus pada 4.55:1, jangan meraikannya. Beri lebih ruang. Keperluan kontras ialah minimum, bukan sasaran ideal.

Tipografi juga penting. Sistem taip yang lebih besar dan lebih jelas mengurangkan beban sebelum anda pun perlu melaras warna. Jika halaman terasa sukar dibaca walaupun kontras lulus, semak semula panjang baris, saiz, berat dan jarak dengan lensa kebolehbacaan yang lebih luas seperti panduan praktikal kepada taip yang mudah dibaca ini.

Semak latar belakang sebenar, termasuk kelegapan

Banyak kesilapan kontras berlaku kerana latar belakang yang kelihatan bukan latar belakang yang diisytiharkan.

Perangkap lazim termasuk:

• Teks di dalam kad separa lut.
• Teks pada induk dengan opacity digunakan.
• Tindanan menggunakan rgba() atau color-mix().
• Gradien di belakang tajuk.
• Imej latar belakang yang berbeza-beza merentasi kawasan teks.
• Pemboleh ubah tema yang berubah dalam mod gelap.

Jika DevTools tidak dapat mengira kontras dengan yakin, kenal pasti warna latar depan dan latar belakang yang dirender secara manual. Gunakan panel gaya terhitung, nyahaktifkan lapisan buat sementara, atau ambil sampel warna yang kelihatan dengan pemilih warna terbina dalam jika pelayar anda menyokongnya.

Untuk teks di atas imej, jangan ambil sampel bahagian imej yang paling cantik. Ambil sampel kawasan munasabah yang paling buruk di belakang teks. Jika imej berubah melalui muat naik CMS, carousel atau pangkasan responsif, ini bukan sistem kontras yang stabil. Tambahkan tindanan yang boleh dipercayai, bayang teks, bekas pejal atau rawatan gradien yang melindungi teks tanpa mengira imej.

Sistem tindanan imej yang baik itu membosankan: kekuatan tindanan yang sama, kawasan pangkasan yang boleh diramal, kontras yang mencukupi walaupun dengan foto cerah. Membosankan tidak mengapa. Pengguna sedang cuba membaca.

Jangan lupa keadaan

Tangkapan skrin statik terlepas banyak kegagalan kontras. Audit keadaan interaksi secara langsung dalam pelayar.

Dalam DevTools, paksa pseudo-class seperti:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

Kemudian periksa warna terhitung sekali lagi.

Penunjuk fokus memerlukan perhatian khusus. WCAG 2.2 memperkukuh jangkaan terhadap penampilan fokus, dan garis luar biru pucat pada kad kelabu muda masih merupakan kegagalan yang lazim. Penunjuk fokus memerlukan kontras yang mencukupi terhadap warna bersebelahan dan keluasan yang cukup untuk disedari.

Untuk kawalan dinyahdayakan, peraturan kontras WCAG mempunyai pengecualian bagi komponen tidak aktif. Itu tidak bermakna kawalan dinyahdayakan patut tidak boleh dibaca secara lalai. Jika keadaan dinyahdayakan membawa maklumat berguna, jadikannya boleh dibaca. Jika tidak, pertimbangkan sama ada ia patut wujud sama sekali.

Gunakan Lighthouse, tetapi jangan serahkan pertimbangan kepadanya

Audit pelayar seperti Lighthouse boleh menangkap beberapa kegagalan kontras dengan cepat. Jalankan audit terbina dalam jika pelayar anda menyediakannya, kemudian anggap hasilnya sebagai titik mula.

Semakan automatik bagus untuk menemukan nod teks dengan kegagalan kontras terhitung yang jelas. Ia lebih lemah pada:

• Teks yang dibenamkan dalam imej.
• Label yang dirender dengan canvas.
• Kes pinggir SVG.
• Kegagalan hover sahaja.
• Kualiti penunjuk fokus.
• Carta yang hubungan warnanya membawa makna.
• Komponen yang tersembunyi di sebalik pengesahan, menu atau langkah borang.

Jika laporan kembali hijau, anda masih perlu memeriksa komponen wakil. Jika laporan kembali merah, elakkan panik dan tapis kegagalan mengikut impak kepada pengguna. Prinsip yang sama terpakai kepada laporan prestasi dan kebolehcapaian secara umum: baca output alat sebagai bukti, bukan keputusan muktamad. Kami menggunakan pemikiran itu dalam panduan kami untuk membaca laporan Lighthouse tanpa panik, dan ia terpakai dengan kemas di sini.

Audit kontras bukan teks juga

Teks mendapat kebanyakan perhatian, tetapi WCAG juga meliputi kandungan bukan teks yang diperlukan untuk memahami atau mengendalikan antara muka.

Semak sekurang-kurangnya kes ini:

• Sempadan input terhadap latar belakang halaman.
• Garis luar checkbox dan radio.
• Keadaan toggle.
• Butang ikon sahaja.
• Ikon ralat dan simbol amaran.
• Garisan, bar dan label carta.
• Penunjuk kemajuan.
• Penunjuk tab terpilih atau navigasi aktif.

Sasarannya biasanya 3:1 terhadap warna bersebelahan. Contohnya, sempadan input kelabu muda pada latar belakang putih mungkin hampir tidak kelihatan. Carta dengan lima garisan pastel mungkin kelihatan elegan tetapi masih tidak boleh digunakan.

Untuk carta, kontras sahaja tidak mencukupi. Gunakan label, corak, gaya garisan, anotasi langsung atau jarak supaya maklumat tidak bergantung pada warna sahaja. Ini membantu pengguna buta warna, pengguna penglihatan rendah, orang yang melihat dalam silau, dan sesiapa yang membaca tangkapan skrin dalam dokumen.

Catat dapatan dalam format yang boleh digunakan pembangun

Audit kontras yang berguna tidak mengatakan “beberapa kelabu gagal.” Ia mengenal pasti komponen, keadaan, nilai semasa, ambang yang dijangka dan pembaikan yang dicadangkan.

Format ringkas berfungsi dengan baik:

| Komponen | Keadaan | Latar depan | Latar belakang | Nisbah | Sasaran | Keputusan | Cadangan pembaikan | |---|---:|---:|---:|---:|---:|---|---| | Metadata kad | Lalai | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Gagal | Gunakan --color-text-muted-strong | | Butang utama | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Lulus | Kekalkan | | Sempadan input | Lalai | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Gagal | Gelapkan token sempadan |

Ikat pembaikan kepada token reka bentuk jika laman mempunyainya. Jangan tampal dua puluh komponen individu jika satu token yang lemah ialah masalah sebenar.

Buat pembaikan sedikit lebih kuat daripada minimum

Kegagalan kontras sering mudah dibaiki dengan cara yang buruk. Pasukan melaras warna sehingga penyemak mengatakan 4.51:1, kemudian terus bergerak. Itu tidak meninggalkan margin untuk perenderan fon, ketelusan, perbezaan pelayar, tema, variasi imej atau suntingan jenama pada masa depan.

Utamakan sasaran yang selesa:

• Teks isi: lebih hampir kepada 7:1 apabila praktikal.
• Teks pudar: masih melebihi 4.5:1 jika ia kandungan sebenar.
• Sempadan dan ikon UI: selesa melebihi 3:1.
• Teks di atas imej: gunakan tindanan terkawal dan bukan meneka bagi setiap imej.

Web dilihat pada komputer riba murah, telefon malap, kaki lima yang terang, monitor bertona dan paparan yang semakin usang. Pematuhan minimum tidak sama dengan pembacaan yang selesa.

<!-- tool-cta:start -->

💡 Cuba ini: Apabila menyemak pasangan kontras yang anda ambil daripada DevTools, Color Converter membantu menukar antara hex, RGB dan HSL supaya nilai sepadan dengan nota audit anda.

<!-- tool-cta:end -->

Senarai semak audit kontras tanpa pemasangan

Gunakan urutan ini apabila anda memerlukan audit yang cepat tetapi boleh dipercayai:

1. Buka halaman produksi dalam pelayar moden.
2. Senaraikan pola teks, UI dan keadaan utama.
3. Periksa warna latar depan dan latar belakang terhitung dalam DevTools.
4. Gunakan pemilih warna terbina dalam atau panel kebolehcapaian untuk membaca kontras.
5. Paksa keadaan hover, fokus, aktif, dilawati dan tidak sah.
6. Semak teks di atas imej dan gradien terhadap latar belakang munasabah yang paling buruk.
7. Semak bahagian UI bukan teks terhadap keperluan 3:1.
8. Jalankan audit automatik terbina dalam sebagai jaringan keselamatan, bukan sebagai keseluruhan audit.
9. Catat kegagalan mengikut komponen dan token.
10. Baiki dengan margin, bukan sekadar melepasi ambang.

Itu sudah cukup untuk menangkap majoriti isu kontras tanpa menambah alat lain pada stack anda. Audit yang lebih lanjutan masih ada tempatnya, terutamanya untuk sistem reka bentuk besar, produk terkawal atau visualisasi data yang kompleks. Tetapi untuk banyak laman web, pelayar sudah memberikan bukti yang anda perlukan. Bahagian yang sukar ialah cukup sistematik untuk menggunakannya.