Ada beberapa bahan utama yang diperlukan untuk membangun situs web yang dapat diakses. Masing-masing memiliki peran untuk dimainkan dalam memastikan bahwa semua pengguna dapat menavigasi dan mengonsumsi konten situs.
Warna mungkin merupakan elemen dasar. Karena, terlepas dari langkah lain yang Anda ambil, palet warna yang tidak dapat diakses sangat merusak kegunaan. Bahkan pengguna yang tidak memiliki gangguan penglihatan akan mengalami kesulitan membaca dan memahami teks.
Sebagai desainer, kita cenderung membuat fitur dengan cara yang menurut kita terlihat bagus tanpa selalu mempertimbangkan konsekuensinya. Klien mungkin juga bersikeras untuk menggunakan warna merek – meskipun warna tersebut tidak dapat diakses. Ini telah menyebabkan banyak masalah yang dapat dihindari.
Kabar baiknya adalah kepatuhan dengan standar kontras warna WCAG tidak terlalu sulit. Seperti yang akan kami tunjukkan, pengujian rasio kontras warna hanya membutuhkan beberapa detik. Dari sana, tinggal membuat penyesuaian yang diperlukan.
Memang, langkah yang paling penting adalah meluangkan waktu untuk menguji. Mari kita mulai!
Kapan Menguji Rasio Kontras Warna
Di dunia yang sempurna, rasio kontras warna harus diuji sejak awal proyek. Itu berarti menerapkan palet warna yang sesuai dalam maket situs web dan panduan gaya. Dengan begitu, Anda bisa yakin bahwa desain Anda akan lolos.
Memang, Anda mungkin ketinggalan kapal ketika datang ke proyek yang ada. Tetapi menguji skema warna situs dapat dilakukan kapan saja. Dan berkat kecanggihan CSS, proses memperbaiki kombinasi yang tidak sesuai dapat menjadi cukup sederhana. Pencarian-dan-ganti mungkin berhasil.
Namun, aksesibilitas adalah proses yang berkelanjutan. Hal ini terutama terjadi di situs-situs di mana konten baru ditambahkan secara teratur. Jika klien memiliki akses ke editor WYSIWYG dan kemampuan untuk mengubah warna, pengujian rutin mungkin diperlukan.
Ini juga menunjukkan pentingnya mendidik klien tentang aksesibilitas dan praktik terbaik. Menggunakan warna kontras yang buruk akan menghabiskan waktu dan uang untuk memperbaikinya. Ketika klien memahami masalahnya, mereka akan cenderung menghindari membuat keputusan yang keliru di bidang ini.
Alat Rasio Kontras Warna Situs Web
Sekarang setelah kita memiliki “kapan harus menguji”, mari fokus pada bagian “bagaimana”. Langkah pertama adalah menemukan alat yang cocok untuk menjalankan tes.
Ada beberapa alat yang tersedia di web. Namun, kami akan segera fokus pada pasangan. Satu (WebAIM Contrast Checker) adalah alat manual, sementara yang lain (Alat WAVE) otomatis.
Pemeriksa Kontras WebAim
Alat ini sesederhana untuk menguji rasio kontras situs Anda. Masukkan kode HEX untuk warna latar belakang dan latar depan Anda, dan Pemeriksa Kontras WebAIM akan menghitung rasio yang tepat.
Berdasarkan skor Anda, alat akan melaporkan apakah Anda mematuhi standar WCAG AA atau AAA atau tidak. Jika tidak, Anda dapat menggunakan penggeser warna untuk mengubah rona hingga Anda mendapatkan nilai kelulusan.
Alat Evaluasi Aksesibilitas Web WAVE
Masukkan URL situs Anda dan WAVE akan secara otomatis memindai situs Anda dan mengevaluasi beberapa faktor aksesibilitas – termasuk kontras warna. SEBUAH ekstensi peramban juga tersedia untuk Chrome, Firefox, dan Microsoft Edge.
WAVE menyediakan banyak data – dan ada kalanya melaporkan positif palsu. Berkenaan dengan kontras, ini cenderung terjadi ketika teks HTML berlapis di atas latar belakang gambar. Karena alat ini bergantung pada nilai warna CSS, memiliki teks berwarna terang tanpa warna latar belakang yang ditentukan akan menghasilkan kesalahan. Jadi, Anda akan ingin melakukan penyelidikan lebih lanjut untuk memverifikasi temuannya.
Salah satu dari alat ini akan menyelesaikan pekerjaan. Namun, perlu diperhatikan keterbatasan alat otomatis. Terkadang, pengujian manual perlu menjadi bagian dari proses.
Memahami Standar dan Menyelesaikan Masalah
Untuk sebagian besar situs web, tujuannya adalah untuk mematuhi standar AA WCAG untuk teks “normal” (berukuran di bawah 14 poin/18,66 piksel). Standar AAA lebih ketat, dan bahkan dokumentasi W3 menunjukkan bahwa beberapa jenis konten tidak mungkin memenuhi persyaratan.
Jika area konten situs web Anda memenuhi standar ini – bravo! Jika tidak, masalah apa pun harus cukup sederhana untuk diselesaikan.
Untuk HTML dan CSS, ubah kombinasi warna Anda hingga memenuhi atau melebihi rasio (4,5:1). Jika Anda menggunakan latar belakang gambar, Anda dapat menggunakan alat seperti Photoshop atau bahkan filter CSS untuk mengatur semuanya.
Bagian yang paling sulit mungkin meyakinkan klien untuk menggunakan warna yang berbeda. Harapannya adalah begitu mereka memahami apa yang dipertaruhkan, mereka akan lebih terbuka untuk berubah.
Selain itu, ada baiknya juga mempelajari elemen yang perlu Anda perbaiki secara visual. Mungkin ada skenario ketika Anda memenuhi persyaratan dan konten masih tidak dapat dibaca sebagaimana mestinya. Menggunakan rasio kontras yang lebih tinggi dapat meningkatkan pengalaman pengguna secara signifikan.
Warnai Situs Web Anda untuk Aksesibilitas
Warna berbicara banyak tentang sebuah situs web. Mereka membantu dengan pengenalan merek dan mengatur suasana hati. Tetapi dampak terbesarnya mungkin dalam aksesibilitas.
Dan, kecuali Anda menggunakan hitam-putih biasa, kepatuhan dengan standar WCAG tidak diberikan. Di situlah pengujian masuk.
Mudah-mudahan, panduan ini akan membuat Anda berpikir tentang warna di seluruh proyek web Anda. Memulai dengan palet yang dapat diakses adalah yang terbaik, tetapi bahkan situs web lama pun dapat dirusak. Ini sepadan dengan usaha!
