Menggunakan Kontras Warna Tinggi Untuk Reka Bentuk Lebih Mudah Dihubungi
Kadar melantun yang tinggi sering disebabkan oleh kebolehcapaian visual yang lemah di tapak web. Apabila fon terlalu kecil, atau mereka tidak dapat dibaca, apabila terlalu banyak gangguan atau ruang kosong yang tidak mencukupi, ramai orang hanya meninggalkan tapak tanpa pemikiran kedua.
Salah satu sebab yang paling kerap berlaku untuk pengabaian awal ialah yang kurang dipilih skim warna yang mengurangkan kebolehbacaan kandungannya.
Menurut statistik WHO, terdapat kira-kira 285 juta orang cacat penglihatan di seluruh dunia, kebanyakannya buta sebahagiannya atau sepenuhnya berwarna. Orang kurang upaya visual melihat warna yang berbeza, jadi mengelakkan kontras warna rendah dalam reka bentuk kami tidak dapat dielakkan jika kami ingin menyediakan pelanggan kami dengan laman web yang boleh diakses dan mesra pengguna.
Standard Web Untuk Kontras Warna
Nisbah kontras warna mengukur perbezaan di antara dua warna. Nilai yang lebih tinggi ialah, lebih mudah untuk membezakan objek (teks, imej, grafik) di latar depan dari latar belakang.
Warna boleh berbeza dengan pelbagai cara, seperti dalam hue, nilai dan ketepuan. Nisbah kontras warna dihitung dengan formula yang disediakan oleh W3C, organisasi standard antarabangsa utama untuk World Wide Web.
Ia boleh mengambil nilai antara 1: 1 (tiada perbezaan sama sekali, latar depan dan latar belakang mempunyai warna yang sama) dan 21: 1 (kontras maksimum yang hanya wujud antara hitam dan putih).
Garis Panduan Kebolehaksesan Kandungan Web Terkini W3C (WCAG) 2.0 menyediakan pembangun laman web dan pencipta kandungan dengan tanda aras untuk tahap minimum (Level AA) dan nilai tambah (Level AAA) nisbah kontras warna yang boleh diterima.
Tahap AA memerlukan sekurang-kurangnya Nisbah 4.5: 1 untuk teks biasa, dan 3: 1 untuk teks besar. Lebih mudah membaca teks besar seperti sub judul, itulah sebabnya ia memerlukan kontras warna yang lebih rendah.
Sekiranya anda ingin mencapai Tahap AAA yang merupakan tahap yang dipertingkatkan, anda perlu merancang skema warna anda dengan penjagaan yang lebih besar, kerana memerlukan sekurang-kurangnya Nisbah kontras 7: 1 untuk teks biasa, dan 4.5: 1 untuk besar. Sekiranya teks adalah sebahagian daripada logo atau nama jenama, tiada keperluan warna kontras minimum di peringkat WCAG sama ada.
Kami hanya boleh memanggil laman web yang boleh diakses secara visual jika nisbah kontras warna di antara setiap objek latar depan dan latar belakangnya mencapai sekurang-kurangnya Tahap AA.
Manfaat Nisbah Kontras Warna Tinggi
Dengan memastikan kebolehbacaan yang lebih baik anda tidak hanya melibatkan pengguna cacat penglihatan, tetapi juga orang yang membaca kandungan anda pada skrin kecil seperti pada telefon pintar atau smartwatch, antara keadaan pencahayaan yang buruk, dan seterusnya monitor berkualiti rendah.
Orang juga membaca lebih cepat apabila terdapat kontras yang lebih tinggi antara teks dan latar belakang, jadi kemungkinan besar akan mengambil lebih banyak waktu bagi mereka untuk bosan dengan kandungan tapak.
Jika anda bimbang bahawa menggunakan nisbah kontras yang lebih tinggi akan mempunyai kesan negatif terhadap estetika reka bentuk anda, anda perlu menyemak projek web Pemberontakan Kontras yang membuktikan, dengan contoh kehidupan sebenar, yang berpegang pada peraturan nisbah kontras yang tinggi masih boleh menyebabkan dalam reka bentuk menarik dan sejuk.
Apps Untuk Memeriksa Kontras Warna
Terdapat banyak alat percuma yang hebat di seluruh web yang boleh membantu pereka memeriksa nisbah kontras warna laman web mereka.
Cara paling mudah untuk menguji reka bentuk anda untuk kontras warna ialah memilih warna utama dengan baik Photoshop atau pelanjutan pelayar yang sesuai seperti ini untuk Firefox, dan salin nilai ke salah satu aplikasi di bawah.
Perkara yang paling penting untuk diingat adalah bahawa anda sentiasa perlu bandingkan warna latar depan seperti warna teks ke kawasan sekitarnya (warna latar belakang).
1. Pemeriksa Kontras Warna WebAim
WebAim (Web Accessibility In Mind) adalah organisasi yang mempromosikan kebolehaksesan web yang menawarkan pemaju pemeriksa kontras warna yang mudah tetapi boleh dipercayai di antara banyak alat aksesibilitas yang hebat seperti Wave, aplikasi penilaian kebolehcapaian umum yang dapat membantu anda cepat menilai isu akses laman web anda.
Pemeriksa Kontras Warna WebAim memberitahu anda jika warna anda melepasi ujian WCAG AA dan AAA, kedua-dua teks biasa dan besar.
2. Pemeriksaan Kontras Warna Snook
Jonathan Snook, yang kini bekerja sebagai pemaju front-end di Shopify, telah menjadi tuan rumah alat pemeriksaan kontras warnanya selama lebih dari satu dekad. Aplikasi Snook membolehkan anda menukar nilai HSL dan RGB latar depan dan warna latar belakang satu persatu dengan menggunakan slider jarak yang mudah sehingga anda mencapai keputusan yang mematuhi tanda aras WCAG 2.0.
CheckMyColours
CheckMyColours yang dicipta oleh Giovanni Scala membolehkan anda menyemak nisbah kontras warna dari semua kombinasi warna latar belakang latar depan di laman web secara langsung.
Ia mengira nisbah kontras kecerahan, perbezaan kecerahan, dan perbezaan warna, dan memberikan anda laporan lengkap tentang hasilnya. Laporan CheckMyColours dapat mempermudah pemahaman anda tentang bagaimana anda dapat meningkatkan akses visual dari tapak anda.
Pereka Skim Warna
Pereka Skim Warna tidak semestinya pemeriksa kontras warna, tetapi alat untuk merancang skim warna lengkap.
Kami menyertakannya dalam koleksi ini, kerana ia mempunyai ciri yang membolehkan anda melihat bagaimana skema warna anda dilihat oleh orang yang mempunyai jenis kecacatan visual yang berbeza. Anda boleh menguji warna anda untuk buta warna, protanopi, deuteranopy, dan banyak masalah visual yang lain. Aplikasi ini mempunyai versi yang lebih baru yang dipanggil Paletton yang menjadikan pengimejan penglihatan lebih canggih mungkin (anda juga boleh menguji perkara seperti paparan LED yang buruk atau paparan CRT yang lemah).
W3C juga menyediakan anda dengan Senarai Alat Penilaian Akses Kebolehaksesan Web yang besar di mana anda boleh menemui banyak alat kontras warna lain seperti Roda Warna Kebolehaksesan ini.
Tips Untuk Membuat Laman Web Boleh Dikunjungi secara Visual
Jika anda ingin membuat laman web yang boleh diakses secara visual, ia sentiasa menjadi idea yang baik elakkan menggunakan warna sahaja untuk menyampaikan fungsi atau makna. Ikon yang menukar warna mereka berdasarkan keadaan semasa mereka adalah contoh tipikal untuk ini.
Jika boleh, selalu reka bentuk isyarat visual tambahan yang membantu orang yang melihat warna secara berbeza dalam fungsi pemahaman.
Jangan lupa memberi perhatian lebih kepada kontras warna butang, pautan dan menu, kerana ia adalah cara navigasi di laman web anda. Jika pengguna tidak dapat menavigasi dengan mudah di laman web anda, anda akan kehilangannya dengan cepat. Warna yang boleh diakses untuk butang panggilan ke tindakan juga penting untuk kadar penukaran yang baik.
Amalan aliran kerja yang baik untuk menguji nisbah kontras warna seawal mungkin dalam proses reka bentuk kerana sukar untuk memujuk klien anda untuk menukar skema warna tapak kemudian di bawah proses reka bentuk.
Sekarang Baca: Pendekatan Praktikal Memilih Skim Warna Laman Web
