Intinya...

Warna tidak boleh menjadi satu-satunya cara menyampaikan informasi atau makna.

Selalu sediakan tanda visual lain seperti ikon, label, garis bawah, bentuk, atau pola (misal polkadot, garis-garis).

Apa itu WCAG 1.4.1?

Warna sangat penting untuk menciptakan pengalaman web yang inklusif dan aksesibel bagi pengguna. Warna digunakan untuk menyampaikan informasi dan membedakan elemen visual satu sama lain. WCAG 1.4.1 memperbolehkan penggunaan warna untuk menyampaikan informasi, tetapi yang penting adalah tidak memperbolehkan penggunaan warna saja untuk menyampaikan informasi. Intinya, kamu bebas menggunakan warna, tetapi pastikan ada metode cadangan untuk menyampaikan informasi yang sama bagi pengguna yang tidak dapat melihat warna.

Mengapa ini penting?

Meskipun warna dapat meningkatkan daya tarik estetika situs web dan memberikan pengalaman yang menyenangkan, warna juga dapat menyampaikan berbagai informasi. Penggunaan warna untuk hal-hal seperti memberi kode warna pada poin penting di peta adalah hal yang umum. Warna memungkinkan orang untuk menyerap banyak informasi dengan sekali pandang.

Bayangkan kamu mencari daftar tanaman di situs web, yang disusun berdasarkan jenisnya. kamu akhirnya menemukan informasi yang kamu cari. Tetapi jenis tanaman tersebut hanya ditunjukkan dengan warna, ada daftar tanaman perenial dan sukulen, masing-masing dengan latar belakang warna yang berbeda untuk menunjukkan jenisnya.

Ilustrasi daftar tanaman yang disandingkan dengan simulasi tanpa warna

Tanaman perenial dan sukulen ditampilkan dan diberi kode warna dengan latar belakang teal dan ungu. Sebagai perbandingan, tanaman yang sama dengan latar belakang yang kini berwarna abu-abu menunjukkan bahwa tidak ada perbedaan yang jelas antara latar belakang teal dan ungu.

Penyajian ini bekerja dengan baik untuk pengguna yang dapat melihat warna. Mereka dengan mudah dapat melihat tanaman perenial dengan latar belakang teal, dan sukulen dengan latar belakang ungu. Tetapi untuk pengguna yang tidak dapat melihat warna, semua nama tampak sama, dan tidak ada cara untuk membedakan perenial dengan sukulen. Betapa frustrasinya memiliki informasi yang tepat di depan mata tetapi tidak dapat mengaksesnya dengan cara yang berarti.

Masalah ini sebenarnya cukup mudah diatasi. Misalnya, kamu bisa menambahkan simbol atau ikon yang berbeda di depan setiap tanaman dalam daftar, untuk menunjukkan jenis tanaman tersebut.

Ilustrasi daftar tanaman yang disandingkan dengan simulasi tanpa warna yang masih bisa dibedakan karena ada ikon

Tanaman perenial dan sukulen ditampilkan dengan latar belakang teal dan ungu, tetapi juga dengan ikon untuk membedakan jenisnya. Sebagai perbandingan, gambar yang sama ditampilkan dalam warna abu-abu, di mana ikon tersebut membantu membedakan tanaman perenial dan sukulen.

WCAG 1.4.1 bertujuan untuk mengatasi masalah terkait penggunaan warna untuk menyampaikan informasi. Pedoman ini memastikan bahwa semua pengguna dapat mengakses informasi yang disampaikan melalui perbedaan warna, meskipun pengguna tersebut tidak dapat melihat warna sama sekali.

Siapa yang terpengaruh?

Pengguna dengan gangguan penglihatan (termasuk netra), pengguna low vision dan penglihatan terbatas, dan pengguna dengan defisiensi penglihatan warna.

Pengguna netra menggunakan teknologi bantu seperti screen reader atau tampilan braille yang dapat diperbarui untuk mengakses konten di situs web. Teknologi ini tidak membedakan atau menyampaikan warna, sehingga pengguna teknologi ini tidak dapat mengakses informasi yang hanya disampaikan melalui warna. Dalam hal ini, penting untuk memastikan ada alternatif teks untuk warna tersebut. Jika kamu menambahkan simbol atau ikon untuk menunjukkan kategori, kamu harus menambahkan alternatif berupa teks pada simbol atau ikon tersebut sehingga informasi yang disampaikan bisa dibaca oleh screen reader atau tampilan Braille yang dapat diperbarui.

Pengguna low vision dan penglihatan terbatas juga bisa menggunakan screen reader atau tampilan Braille yang dapat diperbarui dan menghadapi tantangan yang sama. Mereka juga bisa menggunakan pembesar layar yang memperbesar teks dan gambar agar lebih mudah dilihat. Tetapi meskipun dengan bantuan ini, mungkin masih sulit untuk membedakan warna hanya dengan melihatnya, dan metode tambahan untuk menyampaikan informasi akan sangat membantu.

Terakhir, ada berbagai bentuk defisiensi penglihatan warna, yang semuanya memengaruhi kemampuan seseorang untuk melihat warna. Buta warna cukup umum, dengan sekitar 10% laki-laki tidak dapat membedakan antara merah dan hijau, misalnya. Pengguna dengan defisiensi penglihatan warna dan tidak memiliki gangguan lainnya kemungkinan tidak akan menggunakan teknologi bantu; beberapa bahkan mungkin tidak menyadari bahwa ada warna yang tidak dapat mereka lihat. Untuk pengguna ini, metode visual tambahan untuk menyampaikan informasi warna, seperti simbol, ikon, atau pola, sangat membantu.

Cara menerapkan WCAG 1.4.1

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Sediakan alternatif berupa teks

Pastikan informasi yang disampaikan melalui perbedaan warna juga memiliki alternatif berupa teks. Misalnya, jika kamu membuat formulir dengan beberapa input yang wajib diisi, kamu mungkin mengubah outline input yang kosong menjadi merah ketika pengguna mencoba mengirim formulir dengan data yang kurang.

Namun, hanya dengan outline merah saja tidak terlalu membantu bagi pengguna yang kesulitan melihat warna tersebut. Kamu juga perlu menyertakan cara lain untuk membedakan kolom input yang bermasalah dari kolom yang tidak bermasalah. Menambahkan teks yang mengidentifikasi kolom yang memiliki kesalahan dan menjelaskan kesalahannya akan sangat membantu, tidak hanya bagi mereka yang tidak dapat melihat warna tetapi juga bagi siapa saja yang bingung mengapa kolom formulir tersebut memiliki kesalahan.

Perbandingan dua formulir yang dijelaskan pada caption

Sebagai contoh, formulir dengan hanya tanda asterisk untuk menunjukkan kolom yang wajib diisi dibandingkan dengan formulir yang memiliki garis batas yang disarankan, pemberitahuan kesalahan, dan teks wajib.

Itu belum semuanya. Jika situs web atau formulir kamu menyertakan color picker, pastikan nama warna tersedia dalam bentuk teks. Misalnya, kamu bisa menambahkan instruksi yang memberi tahu pengguna bahwa warna yang mereka pilih adalah biru.

Perbandingan dua colorpicker yang dijelaskan pada caption

Color picker dengan garis tebal di sekitar warna yang dipilih, Biru, dan teks yang digarisbawahi untuk warna yang terkait; dibandingkan dengan color picker yang memilih warna Biru, tetapi tidak sepenuhnya jelas apakah warna tersebut telah dipilih atau tidak.

Tautan dalam Teks

Ketika membahas tautan yang berada dalam blok teks, jangan hanya menggunakan warna untuk membedakan antara tautan dan teks di sekitarnya. Berikan petunjuk visual lainnya. Petunjuk visual yang disarankan untuk tautan dalam teks adalah garis bawah untuk tautan, tetapi kamu juga bisa memilih untuk memodifikasi gaya font, ketebalan font, border, atau bahkan ukuran font untuk membantu membedakan tautan dari teks sekitarnya.

Perbandingan dua paragraf yang tautannya disertai/tidak disertai garis bawah

Tautan dalam teks menonjol dengan warna yang berbeda dan digarisbawahi untuk membedakannya dari teks biasa. Sebagai perbandingan, tautan yang tidak digarisbawahi dalam teks yang padat sulit untuk dilihat.

Sampaikan informasi tambahan

Misalkan kamu memiliki gambar peta transportasi yang menggambarkan berbagai jalur bus di suatu halaman. Dalam situasi ini, kamu ingin memastikan perbedaan warna digunakan untuk menekankan setiap jalur. Namun, kamu tidak bisa hanya berhenti di situ. Menambahkan simbol atau ikon untuk jalur tersebut juga akan memberikan cara lain untuk membedakan jalur satu sama lain.

Perbandingan dua peta yang dijelaskan pada caption

Peta transportasi yang menggambarkan jalur bus, hanya menggunakan warna untuk membedakan jalur; dibandingkan dengan peta transportasi yang menggambarkan jalur bus menggunakan warna, bentuk, dan garis yang berbeda untuk membedakan jalur.

Buat fokus jelas

Banyak pengguna yang tidak dapat menggunakan mouse dengan nyaman dan akurat, sehingga mereka menavigasi web hanya dengan menggunakan keyboard. Pengguna dapat berpindah antara tombol, kolom formulir, dan tautan hanya dengan menggunakan tombol Tab. WCAG 2.4.7 Fokus Terlihat mensyaratkan bahwa ketika sebuah elemen menerima fokus keyboard, elemen tersebut harus memiliki indikasi visual yang jelas. Ini membantu pengguna yang hanya menggunakan keyboard untuk dengan mudah mengidentifikasi elemen mana di halaman yang saat ini memiliki fokus, sehingga mereka dapat memastikan mengikuti tautan yang tepat atau mengklik tombol yang tepat.

Kamu dapat menambahkan indikator visual yang jelas ke elemen dengan memodifikasi CSS untuk mengubah penampilan elemen saat menerima fokus. Dengan cara ini, elemen akan menonjol dan mudah untuk melihat di mana posisi kamu di halaman.

Tempat di mana WCAG 1.4.1 dan WCAG 2.4.7 bertemu adalah bahwa kamu tidak dapat hanya menggunakan warna untuk menunjukkan bahwa sebuah elemen memiliki fokus. Misalnya, jika kamu bekerja dengan kolom formulir, kamu mungkin mengubah warna latar belakang saat kolom tersebut memiliki fokus. Namun, kamu juga ingin menambahkan indikator non-warna tambahan, seperti mengubah lebar border atau menambahkan outline ke kolom input formulir.

Perbandingan dua kolom formulir yang dijelaskan pada caption

Kolom formulir dalam fokus, tanpa indikator lain yang menunjukkan bahwa itu dipilih, dibandingkan dengan kolom formulir dalam fokus dengan perubahan warna latar belakang dan border.

Kesimpulan

Situs web dengan penggunaan dan penekanan warna yang luar biasa lebih mudah dibaca, dinavigasi, dan dipahami, yang mengarah pada keterlibatan yang lebih besar dan pengguna yang lebih puas. Memastikan pengguna yang tidak dapat melihat warna masih dapat mengakses informasi yang disampaikan melalui warna tidak memerlukan banyak usaha tambahan dan sangat membantu membuat situs web dan konten kamu tersedia untuk semua orang.