Warna merek Anda memiliki dampak emosional yang kuat, namun bagaimana warna tersebut terlihat oleh pengunjung situs yang mengalami gangguan penglihatan sebagian, buta warna, atau menghadapi faktor lingkungan yang mempersulit visibilitas?
Tingkat warna dan kontras sangat penting untuk komunikasi, dan mendapatkan detail yang tepat sangat penting bagi desainer yang mengutamakan aksesibilitas.'
Gangguan persepsi warna lebih umum terjadi daripada yang Anda bayangkan. Jadi, dalam postingan kali ini, kita akan membahas tentang bagaimana penyandang disabilitas seperti low vision, disleksia, dan buta warna berinteraksi dengan web.
Daftar Isi
Bagaimana cara menggunakan pemeriksa warna untuk meningkatkan aksesibilitas situs web saya?
Bagian ini sebenarnya cukup sederhana, meski memerlukan usaha. Anda perlu menggunakan alat Pemeriksa Kontras online WebAIM. WebAIM adalah organisasi nirlaba yang berbasis di Utah State University dengan misi meningkatkan aksesibilitas web di seluruh dunia.
Cukup masukkan warna latar depan (misalnya, warna teks atau ikon) dan warna latar belakang sebagai nilai heksadesimal (juga dikenal sebagai nilai hex), seperti yang ditentukan dalam HTML atau CSS, dan pemeriksa rasio kontras akan memberi tahu Anda jika rasio tersebut mencukupi. Ingatlah bahwa rasio kontras minimum yang harus Anda cari adalah 4.5 banding 1. Teks hitam dengan latar belakang putih memiliki rasio kontras 21 banding 1, sehingga Anda memiliki banyak waktu luang.
5 Alat Membuat Palet Warna Web yang Dapat Dilihat Semua Orang
1. Pemeriksa Kontras Warna WebAIM
Masukkan warna hex untuk latar depan dan latar belakang. Outputnya menunjukkan kepatuhan AA dan AAA untuk teks normal dan besar, bersama dengan contoh kalimat. Penggeser memungkinkan Anda mengubah berbagai hal hingga Anda menemukan kombinasi yang bagus.
Kekuatan
- Alat sederhana dengan antarmuka yang enak dipandang.
- Ini adalah alat yang bagus dan sederhana untuk pemula, dan bukan hanya desainer.
Kelemahan
- Tidak dapat membandingkan lebih dari dua warna, hanya dua.
- Penggeser kecerahan bukanlah cara yang baik untuk memilih warna. Sulit untuk mengatakan betapa menariknya warna dalam tampilan sederhana ini.
2. Pemeriksa Kontras untuk WCAG
Masukkan warna hex untuk latar depan dan latar belakang. Menampilkan kepatuhan AA dan AAA untuk teks normal dan besar di samping contoh teks Lorem Ipsum. Anda juga bisa mengunggah gambar. Palet 9 warna dipilih untuk Anda secara otomatis. Kemudian, Anda dapat membandingkan setiap warna sebagai warna Foreground atau Background.
Kekuatan
- Alat sederhana dengan antarmuka yang ramah pengguna.
- Memiliki kemampuan membuat palet dari gambar.
Kelemahan
- Palet dipilih secara otomatis, dan Anda dapat mengubahnya lebih lanjut dengan pemilih warna, namun perubahan tersebut tidak disimpan kembali ke palet. Seseorang harus menyalin dan menempelkan informasi tersebut ke dalam dokumen baru.
3. Kubus Warna
Masukkan warna untuk palet, masing-masing pada barisnya sendiri. Outputnya menunjukkan contoh huruf dengan rasio kontras dibandingkan dengan standar AA untuk font kecil dan besar. Tiga kolom menunjukkan kontras dengan latar belakang putih, latar belakang hitam, dan serangkaian warna merek yang “Paling mudah dibaca dari yang tersedia”.
Kekuatan
- Nyaman dilihat Antarmuka pengguna (UI) terorganisir dengan baik, dan status lulus/gagal/tepi mudah dilihat.
Kelemahan
- Tidak memenuhi standar yang ditetapkan oleh AAA.
- Tidak melakukan semua kombinasi warna yang mungkin, dan pada awalnya tidak jelas apakah ini masalahnya.
4.) Kotak Kontras Delapan Bentuk
Masukkan warna palet. Selain itu, Anda juga bisa memberi nama pada setiap warna. Aplikasi ini membuat tabel dengan setiap kemungkinan kombinasi warna. Ada tiga ukuran ubin. Ada isyarat visual untuk pass/fail/edge AA dan AAA serta rasio kontras efektif. Kolom dan baris dapat dipindahkan di aplikasi dengan menyeret dan melepas. Data tabular dapat disimpan, diekspor, dan dibagikan.
Kekuatan
- Ada banyak fitur bermanfaat yang membantu analisis seluruh palet.
Kelemahan
- Ini lebih sulit untuk dipelajari dibandingkan alat lain yang lebih mudah digunakan.
- Bukan cara yang tepat untuk membandingkan hanya dua warna.
- Tidak bagus untuk mencari tahu bagaimana warna menyatu.
- Agak berlebihan untuk dilihat, tetapi ada banyak informasi yang ditampilkan.
5. Warna aman
Ketikkan warna latar belakang. Pilih keluarga, ukuran, dan berat font. Pilih AA atau AAA sebagai standar. Menampilkan warna yang dipilih dan kode hexnya, serta sampel dan rasio kontras efektif. Thumbnail besar dari kemungkinan warna latar depan dengan kontras yang cukup adalah bagian terbaiknya. Anda dapat memilih untuk melihat semuanya atau hanya kelompok warna tertentu (hijau, biru, ungu, dll.)
Kekuatan
- Dengan antarmuka yang enak dipandang, mudah untuk menemukan kombinasi warna yang terlihat bagus dan berfungsi dengan baik.
- Ini adalah alat yang berguna jika Anda belum memiliki palet warna merek atau jika Anda ingin menambahkan palet warna yang sudah Anda miliki untuk web.
Kelemahan
- Anda hanya dapat membandingkan warna latar depan dan latar belakang dalam satu waktu.
- Anda harus menyalin dan menempelkan warna ke dalam dokumen terpisah jika ingin menyimpannya.
- Keluarlah dan buatlah sesuatu untuk semua orang!
Setelah Anda mengetahui cara menggunakan alat-alat ini, Anda mungkin menyadari bahwa Anda memerlukan lebih dari satu alat untuk sebuah proyek. Mungkin Color Cube adalah cara terbaik untuk menunjukkan kepada klien apa yang telah Anda pelajari tentang aksesibilitas. Mungkin Anda akan menggunakan alat WebAIM sepanjang waktu untuk melakukan pemeriksaan cepat.
Kesimpulan
Dengan menggunakan tips, pedoman, dan alat yang baru saja kita bahas, Anda dapat memberi warna dan label kontras tinggi pada situs web Anda. Hal ini akan memudahkan penyandang low vision, disleksia, dan buta warna untuk membaca website dan konten Anda. Jangan heran jika khalayak umum Anda juga merasa lebih mudah menggunakan website Anda.
