Menggunakan Kontras Warna Tinggi Untuk Desain Yang Lebih Dapat Diakses
Tingkat bouncing yang tinggi sering disebabkan oleh aksesibilitas visual yang buruk dari suatu situs web. Ketika font terlalu kecil, atau mereka hampir tidak terbaca, ketika ada terlalu banyak gangguan atau tidak cukup spasi, banyak orang hanya meninggalkan situs tanpa berpikir dua kali.
Salah satu alasan paling sering untuk pengabaian dini adalah yang dipilih dengan buruk skema warna yang mengurangi keterbacaan dari konten.
Menurut statistik WHO, ada sekitar 285 juta orang tunanetra di seluruh dunia, banyak di antaranya buta warna sebagian atau sepenuhnya. Orang cacat visual melihat warna secara berbeda, jadi menghindari kontras warna yang rendah dalam desain kami tidak dapat dihindari jika kami ingin menyediakan pelanggan kami dengan situs web yang dapat diakses dan ramah pengguna.
Standar Web Untuk Kontras Warna
Rasio kontras warna mengukur perbedaan kontras antara dua warna. Semakin tinggi nilainya, semakin mudah membedakan objek (teks, gambar, grafik) di latar depan dari latar belakang.
Warna dapat kontras dengan berbagai cara, seperti dalam warna, nilai dan kejenuhan. Rasio kontras warna dihitung dengan formula yang disediakan oleh W3C, organisasi standar internasional utama untuk World Wide Web.
Ini bisa mengambil nilai antara 1: 1 (tidak ada kontras sama sekali, latar depan dan latar belakang memiliki warna yang sama) dan 21: 1 (kontras maksimum yang hanya ada antara hitam dan putih).
Pedoman Aksesibilitas Konten Web (WCAG) 2.0 terbaru dari W3C menyediakan benchmark bagi pengembang web dan pembuat konten untuk nilai minimum (Level AA) dan peningkatan (Level AAA) dari rasio kontras warna yang dapat diterima.
Level AA membutuhkan setidaknya Rasio 4,5: 1 untuk teks biasa, dan 3: 1 untuk teks besar. Jauh lebih mudah untuk membaca teks besar seperti subtitle, karena itu perlu kontras warna yang lebih rendah.
Jika Anda ingin mencapai Level AAA yang merupakan level yang disempurnakan, Anda perlu merancang skema warna Anda dengan lebih hati-hati, karena membutuhkan setidaknya Rasio kontras 7: 1 untuk teks normal, dan 4.5: 1 untuk besar. Jika teks adalah bagian dari logo atau nama merek, tidak ada persyaratan kontras warna minimum di tingkat WCAG.
Kami hanya dapat menghubungi situs web yang dapat diakses secara visual jika rasio kontras warna antara setiap objek latar depan dan latar belakangnya mencapai setidaknya Level AA.
Manfaat Rasio Kontras Warna Tinggi
Dengan memastikan keterbacaan yang lebih baik Anda tidak hanya melibatkan pengguna tunanetra, tetapi juga orang yang membaca konten Anda di layar kecil seperti pada smartphone atau jam tangan pintar, di antaranya kondisi pencahayaan buruk, dan terus monitor berkualitas lebih rendah.
Orang-orang juga membaca lebih cepat ketika ada kontras yang lebih tinggi antara teks dan latar belakang, sehingga kemungkinan besar akan membutuhkan lebih banyak waktu bagi mereka untuk bosan dengan konten situs.
Jika Anda khawatir bahwa menerapkan rasio kontras yang lebih tinggi akan berdampak negatif pada estetika desain Anda, Anda perlu memeriksa proyek web Contrast Rebellion yang membuktikan, dengan contoh nyata, bahwa tetap berpegang pada aturan rasio kontras tinggi masih dapat menghasilkan dalam desain yang menarik dan keren.
Aplikasi Untuk Memeriksa Kontras Warna
Ada banyak alat gratis hebat di seluruh web yang dapat membantu para desainer memeriksa rasio kontras warna situs web mereka.
Cara termudah untuk menguji desain Anda untuk kontras warna adalah dengan memilih warna-warna utama dengan Photoshop atau ekstensi browser yang cocok seperti ini untuk Firefox, dan salin nilainya ke salah satu aplikasi di bawah ini..
Yang paling penting untuk diingat adalah bahwa Anda selalu perlu bandingkan warna latar depan seperti warna teks dengan area di sekitarnya (warna latar belakang).
1. WebAim Color Contrast Checker
WebAim (Aksesibilitas Web dalam Pikiran) adalah organisasi yang mempromosikan aksesibilitas web yang menawarkan kepada pengembang pemeriksa kontras warna yang sederhana namun dapat diandalkan di antara banyak alat aksesibilitas hebat lainnya seperti Wave, aplikasi evaluasi aksesibilitas umum yang dapat membantu Anda cepat menilai masalah aksesibilitas situs Anda.
Color Contrast Checker WebAim memberi tahu Anda jika warna Anda lulus tes WCAG AA dan AAA, baik untuk teks normal dan besar.
2. Pemeriksaan Kontras Warna Snook
Jonathan Snook, saat ini bekerja sebagai pengembang front-end terdepan di Shopify, telah menjadi tuan rumah alat pemeriksaan kontras warna yang praktis selama lebih dari satu dekade. Aplikasi Snook memungkinkan Anda untuk melakukannya ubah nilai HSL dan RGB dari warna foreground dan background satu per satu dengan menggunakan slider kisaran nyaman sampai Anda mencapai hasil yang sesuai dengan tolok ukur WCAG 2.0.
CheckMyColours
CheckMyColours yang dibuat oleh Giovanni Scala memungkinkan Anda untuk memeriksa rasio kontras warna dari semua kombinasi warna latar depan di situs web langsung.
Itu menghitung rasio kontras luminositas, perbedaan kecerahan, dan perbedaan warna, dan memberi Anda laporan lengkap tentang hasilnya. Laporan CheckMyColours secara signifikan dapat memfasilitasi pemahaman Anda tentang bagaimana Anda dapat meningkatkan aksesibilitas visual situs Anda.
Desainer Skema Warna
Perancang Skema Warna tidak khusus pemeriksa kontras warna, tetapi alat untuk merancang skema warna yang lengkap.
Kami memasukkannya ke dalam koleksi ini, karena memiliki fitur yang memungkinkan Anda melihat bagaimana skema warna Anda dirasakan oleh orang-orang dengan berbagai jenis cacat visual. Anda dapat menguji warna Anda untuk kebutaan penuh warna, protanopy, deuteranopy, dan banyak gangguan visual lainnya. Aplikasi ini memiliki versi yang lebih baru yang disebut Paletton yang memungkinkan simulasi penglihatan yang lebih canggih (Anda juga dapat menguji hal-hal seperti tampilan LED yang buruk atau tampilan CRT yang lemah).
W3C juga menyediakan Anda dengan Daftar Alat Evaluasi Aksesibilitas Web yang besar di mana Anda dapat menemukan banyak alat kontras warna lainnya seperti Roda Warna Aksesibilitas yang bermanfaat ini..
Tips Untuk Membuat Situs Web yang Dapat Diakses Secara Visual
Jika Anda ingin membuat situs web yang dapat diakses secara visual, itu selalu ide yang baik untuk hindari menggunakan warna saja untuk menyampaikan fungsionalitas atau makna. Ikon yang mengubah warna berdasarkan kondisi saat ini adalah contoh umum untuk ini.
Jika memungkinkan, selalu rancang isyarat visual tambahan yang membantu orang yang melihat warna berbeda dalam memahami fungsionalitas.
Jangan pernah lupa memberi perhatian ekstra pada kontras warna tombol, tautan dan menu, karena mereka adalah sarana navigasi di situs Anda. Jika pengguna tidak dapat menavigasi dengan mudah di situs Anda, Anda akan dengan cepat kehilangan mereka. Warna yang dapat diakses untuk tombol ajakan bertindak juga merupakan sangat penting untuk tingkat konversi yang baik.
Ini adalah praktik alur kerja yang baik untuk menguji rasio kontras warna sedini mungkin dalam proses desain karena akan sulit untuk membujuk klien Anda untuk mengubah skema warna situs nanti pada proses desain.
Sekarang Baca: Pendekatan Praktis Untuk Memilih Skema Warna Situs Web
