Intinya...

Kontrol interaktif (misalnya tombol, kolom form, indikator fokus) dan grafik yang memiliki makna (misalnya ikon, bagan, grafik) harus memiliki rasio kontras setidaknya 3:1 dengan warna latarnya.

Apa itu WCAG 1.4.11?

WCAG 1.4.11 berfokus pada memastikan bahwa elemen visual, seperti ikon, grafik, dan elemen formulir, memenuhi rasio kontras minimum 3:1 terhadap latar belakang atau elemen di sekitarnya. Kriteria ini terkait erat dengan 1.4.3 Kontras (Minimum) yang berfokus pada kontras untuk teks.

WCAG 1.4.11 menyatakan bahwa:

  • Gambar informatif harus memiliki kontras yang cukup
  • Elemen yang menerima fokus harus menawarkan kontras yang memadai dalam kondisi fokus dan hover
  • Ikon harus dapat dipersepsi
  • Batas harus jelas di antara elemen yang menyampaikan informasi, seperti irisan dalam diagram pai
  • Teks yang muncul di atas gambar harus memiliki kontras yang cukup terhadap bagian mana pun dari gambar yang dilapisinya

1.4.11 juga memperkenalkan tantangan baru untuk tautan yang muncul dalam teks, seperti tautan di tengah paragraf sebuah artikel. Sementara 1.4.3 mensyaratkan warna tautan memiliki kontras yang cukup dengan latar belakang, 1.4.11 juga mengharuskan tautan memiliki kontras yang cukup dengan teks di sekitarnya jika tidak ada indikator lain bahwa teks tersebut adalah tautan.

Misalnya, jika kamu menghapus garis bawah pada tautan dan hanya membedakannya dengan warna, warna tautan tersebut harus memenuhi rasio kontras minimal 4.5:1 terhadap latar belakang dan minimal 3:1 terhadap teks sekitarnya. Karena ini cukup sulit, saran umumnya adalah tetap menggunakan garis bawah untuk membedakan tautan di dalam teks.

Mengapa ini penting?

Kontras yang memadai membantu pengguna dengan defisiensi penglihatan warna, low vision, atau gangguan penglihatan, untuk melihat dan membedakan konten non-teks dari latar belakang sekitarnya. Kontras yang kurang bisa menyebabkan ketegangan mata dan kelelahan, membuat informasi sulit dipahami. Bentuk, simbol, elemen formulir, dan gambar yang lebih mudah dibedakan akan membantu pemahaman konten secara keseluruhan. Mengenali petunjuk visual, ikon, tombol, dan elemen formulir sangat penting untuk navigasi dan interaksi di sebuah website.

Bayangkan situasi di mana kamu mencoba mengisi formulir, tapi kamu sama sekali tidak tahu di mana bidang inputnya berada. Ini tentu akan sangat membuat frustrasi dan merusak pengalaman pengguna secara keseluruhan. Memberikan petunjuk tentang bagaimana suatu elemen interaktif bekerja juga sangat penting. Misalnya, panah kecil pada elemen pilih (select) atau daftar dropdown membantu memberi tahu pengguna bahwa mereka dapat membuka daftar pilihan. Jika kamu tidak bisa melihat panah itu, mungkin kamu akan melewatkan fungsi penting tersebut.

Bayangkan kita dihadapkan pada sistem penilaian bintang untuk sebuah film yang ingin kita tonton:

Rating 5 bintang dengan kontras buruk

Tampilan rating dengan 5 bintang yang memiliki kontras buruk.

Rating 5 bintang yang sama pada lensa pengguna dengan gangguan penglihatan

Simulasi tampilan rating yang sama ketika dilihat oleh pengguna dengan gangguan penglihatan

Ini mungkin awalnya tidak terlihat terlalu buruk. Namun, bagi siapa pun yang memiliki gangguan penglihatan, mereka akan sulit membedakan berapa banyak bintang yang sebenarnya terisi. Warna bintang yang terisi terlalu mirip dengan bintang yang kosong, sehingga membingungkan untuk dipahami.

Situasi seperti ini bisa diperbaiki dengan mudah, yaitu dengan memastikan warna isi bintang memiliki kontras yang lebih dramatis dan memenuhi rasio minimal 3:1. Pastikan juga bahwa garis tepi (border) memenuhi standar kontras dalam keseluruhan tampilan. Alternatif berupa teks, meskipun tidak diwajibkan oleh WCAG 1.4.11, juga akan membantu untuk memenuhi persyaratan WCAG 1.1.1.

Rating 5 bintang dengan kontras yang baik

Tampilan rating 5 bintang dengan kontras dan garis tepi yang lebih jelas, sehingga mudah untuk melihat berapa banyak bintang yang terisi. Alternatif berupa teks ditampilkan sebagai tooltip saat kursor diarahkan.

Simulasi penglihatan rating 5 bintang dengan kontras yang baik

Simulasi tampilan rating bintang yang sama ketika dilihat oleh pengguna dengan gangguan penglihatan.

WCAG 1.4.11 bertujuan untuk memastikan bahwa pengguna dengan gangguan penglihatan dapat membaca dan mengidentifikasi elemen tanpa kesulitan atau ketegangan mata.
Pedoman ini memastikan semua pengguna dapat mengakses dan memahami informasi yang disajikan di halaman.

Siapa yang terpengaruh?

Pengguna low vision dan penglihatan terbatas, dan pengguna dengan defisiensi penglihatan warna.

Elemen dan kontrol dengan kontras buruk sebenarnya bisa memengaruhi semua orang, tapi ini terutama menjadi masalah bagi mereka yang memiliki gangguan penglihatan. Penglihatan terbatas adalah kondisi yang mengurangi kemampuan seseorang untuk melihat detail, warna, dan kontras. Jika elemen dan latar belakang sekitarnya memiliki kontras rendah, akan jauh lebih sulit untuk membedakan dan memahami konten.

Bagi pengguna dengan defisiensi penglihatan warna, elemen dengan kontras rendah juga dapat menyebabkan masalah. Defisiensi penglihatan warna adalah kondisi di mana seseorang kesulitan membedakan warna tertentu, seperti merah dan hijau. Jika elemen dan latar belakangnya terlalu mirip, seseorang dengan defisiensi penglihatan warna mungkin sepenuhnya melewatkan informasi yang disampaikan.

Pie chart dengan kontras buruk

Pie chart dengan kontras buruk yang masih bisa dibedakan oleh pengguna awas.

Simulasi pie chart dengan lensa pengguna gangguan penglihatan

Simulasi tampilan pie chart ketika dilihat oleh pengguna dengan defisiensi penglihatan warna.

Elemen dan kontrol dengan kontras buruk membuat konten menjadi melelahkan untuk dipahami. Kontras rendah bisa menyebabkan ketegangan mata, sakit kepala, serta mengganggu fokus dan konsentrasi. Dengan memastikan kontras yang baik antara elemen non-teks dan kontrol di halaman, desainer dan developer web dapat menciptakan situs web yang luar biasa dan bisa diakses serta dinikmati semua orang.

Cara Menerapkan 1.4.11

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

Gunakan Indikator Fokus yang Terlihat Jelas

Seringkali, indikator fokus bawaan di browser hanya berupa garis putus-putus tipis berwarna hitam. Ini bisa sangat sulit dilihat oleh banyak pengguna, terutama jika elemen sudah memiliki garis luar (outline) atau jika elemen fokus berada di dalam sel tabel, atau berada di atas latar belakang yang gelap.

Untuk mengatasi ini, elemen yang menerima fokus harus memiliki kontras yang cukup terhadap latar belakangnya. Ini memungkinkan pengguna membedakan elemen fokus dari elemen normal lainnya.

Sebagai contoh, jika fokus berada pada tautan di atas latar belakang yang sangat gelap, tautan tersebut bisa diberi garis luar (outline) berwarna terang yang cukup tebal (beberapa piksel) agar lebih menonjol dan mudah dilihat.

Styling outline yang baik

Baik: Gambar tautan yang menerima fokus di atas latar belakang biru tua,dengan garis luar (outline) yang tebal dan berwarna cerah.

Styling outline yang buruk

Buruk: Gambar tautan yang menerima fokus di atas latar belakang gelap hanya menggunakan garis putus-putus hitam yang sangat tipis, sehingga sulit dibedakan.

Tentukan rasio kontras untuk ikon

Ikon tidak dikecualikan dari kriteria ini jika mereka diperlukan untuk memahami konten. Semua ikon grafis harus memberikan kontras yang cukup agar pengguna dapat membedakannya. Ini berlaku baik untuk ikon di atas latar belakang solid maupun gradasi.

Kita bisa mengambil seperti ini. Ikon-ikon di bawah ini terlihat menarik, tetapi yang terpenting, ikon harus tetap cukup kontras dengan latar belakangnya. Tips: Ambil warna tergelap dari ikon dan pastikan ikon tersebut memiliki kontras yang cukup terhadap latar belakang. Atau, jika ikon berwarna putih, pastikan bagian latar belakang yang paling terang tetap memberikan kontras yang cukup.

Styling icon yang baik

Baik: Gambar ikon kue pengguna dan kue yang lucu. Ikon berada di dalam lingkaran gradas yang cukup kontras.

Styling icon yang buruk

Buruk: Bagian paling terang dari ikon menyatu dengan bagian paling terang dari gradasi, sehingga terlalu cerah dan sulit terlihat.

Pastikan kontras yang cukup untuk batas (boundaries)

Pie chart memang menarik untuk disertakan dalam halaman, tetapi akan sulit dinikmati jika irisan-irisannya sulit dibedakan. Memastikan bahwa batas antara warna-warna yang bersebelahan memiliki kontras yang cukup akan sangat membantu dalam membedakan informasi yang disajikan.

Beberapa cara untuk mengatasi ini:

  • Gunakan kombinasi warna terang dan gelap secara bergantian pada irisan.
  • Jika itu kurang sesuai, gunakan garis batas (border) antar segmen, tetapi garis batas tersebut tetap harus memenuhi rasio kontras minimal 3:1.
  • Lebih baik lagi: Gunakan pattern/pola agar tiap segmen mudah dibedakan, baik di dalam pie chart-nya maupun di legend-nya. Ini juga untuk memenuhi kriteria WCAG 1.4.1.

Contoh pie chart yang baik

Baik: Diagram pai yang menggambarkan warna yang bergantian dan batas yang mudah dibedakan.

Contoh pie chart yang buruk

Buruk: Diagram pai yang tidak terlihat batasannya, dan warnanya tidak memiliki kontras yang cukup.

Sediakan kontrol dengan rasio kontras yang cukup

Sebagai solusi terakhir, jika sebagian dari situs tidak dirancang untuk memenuhi tingkat kontras yang diperlukan, kamu bisa menyediakan kontrol yang memungkinkan pengguna beralih ke versi halaman yang ramah kontras. Dengan cara ini, semua elemen akan sesuai dengan tingkat kontras yang dibutuhkan, sehingga pengguna dapat dengan mudah membaca dan membedakan informasi.

Contoh halaman web yang memiliki mode kontras

Baik: Gambar berdampingan yang menunjukkan ‘halaman’ dengan versi asli yang tidak terlalu ramah, kemudian versi ramah kontras yang memenuhi semua persyaratan yang bisa didapatkan dengan menekan tombol 'Enable Contrast Mode'.

Contoh halaman web yang tidak menawarkan mode apapun

Buruk: Hanya versi asli dari halaman, yang bisa tidak memenuhi kriteria.

Kesimpulan

Memenuhi WCAG 1.4.11 untuk kontrol dan elemen di halaman web akan memastikan bahwa konten non-teks kamu dapat diakses oleh semua pengguna, memungkinkan setiap orang untuk memahami dan membedakan informasi yang disampaikan serta berhasil menggunakan elemen interaktif di halaman web kamu.