Sebagai developer atau desainer antarmuka, kita sering menyukai tampilan yang bersih dan minimalis. Teks berwarna abu-abu muda di atas latar putih, tombol berwarna pastel, atau elemen dengan kontras yang sangat halus sering dianggap lebih modern dan elegan.

Namun, tampilan yang terlihat indah di monitor berkualitas tinggi belum tentu mudah digunakan oleh semua orang.

Bayangkan pengguna website Anda adalah:

1. seseorang dengan gangguan penglihatan (low vision);
2. pengguna dengan buta warna;
3. lansia yang mengalami penurunan kemampuan melihat;
4. atau seseorang yang sedang menggunakan ponsel di bawah sinar matahari.

Bagi mereka, teks abu-abu yang terlalu redup atau tombol dengan warna yang hampir menyatu dengan latar belakang dapat menjadi sangat sulit dibaca.

Pada artikel ini kita akan mempelajari dua prinsip penting dalam aksesibilitas visual:

1. memastikan kontras warna memenuhi standar WCAG;
2. memastikan informasi tidak hanya disampaikan melalui warna.

Aturan 1: Pastikan Kontras Warna Memadai

WCAG menetapkan bahwa teks harus memiliki perbedaan warna yang cukup terhadap latar belakang agar mudah dibaca.

Pada tingkat kepatuhan WCAG AA, ketentuannya adalah sebagai berikut.

Semakin tinggi rasio kontras, semakin mudah teks dibaca oleh berbagai pengguna.

Contoh

Kurang Tepat

Warna teks terlalu mendekati warna latar belakang sehingga sulit dibaca.

Direkomendasikan

Perbedaan warna lebih jelas sehingga teks tetap nyaman dibaca tanpa mengorbankan tampilan antarmuka.

Aturan 2: Jangan Mengandalkan Warna Saja

Warna memang dapat membantu menyampaikan informasi.

Namun menurut WCAG, warna tidak boleh menjadi satu-satunya cara untuk menyampaikan makna.

Sebagai contoh, sebuah formulir menampilkan kesalahan hanya dengan mengubah warna border menjadi merah.

Pengguna dengan buta warna mungkin tidak menyadari bahwa telah terjadi kesalahan.

Akibatnya mereka tidak mengetahui bagian mana yang perlu diperbaiki.

Cara yang Direkomendasikan

Tambahkan indikator lain selain warna.

Misalnya:

1. pesan kesalahan;
2. ikon peringatan;
3. perubahan bentuk atau gaya elemen;
4. penjelasan yang dapat dibaca oleh screen reader.

Contohnya:

Pada contoh tersebut:

1. warna merah tetap membantu pengguna yang dapat membedakan warna;
2. ikon membantu menarik perhatian;
3. teks menjelaskan masalah secara jelas;
4. atribut aria-describedby menghubungkan pesan kesalahan dengan kolom formulir sehingga dapat dikenali oleh screen reader.

Dengan demikian informasi tetap dapat dipahami meskipun pengguna tidak dapat membedakan warna.

Kesalahan yang Sering Terjadi

Praktik Cepat: Memeriksa Kontras Warna Menggunakan Chrome DevTools

Anda tidak perlu menghitung rasio kontras secara manual.

Google Chrome menyediakan Developer Tools (DevTools) yang dapat membantu memeriksa kontras antara warna teks dan latar belakang.

Langkah-langkah

1. Buka halaman web menggunakan Google Chrome.
2. Klik kanan pada teks yang ingin diperiksa, kemudian pilih Inspect.
3. Pada panel Elements, pastikan elemen yang ingin diperiksa telah dipilih.
4. Pada panel Styles, cari properti color, kemudian klik kotak warna di samping nilai warna tersebut.
5. Chrome akan menampilkan Color Picker beserta informasi Contrast Ratio dan indikator apakah kombinasi warna tersebut memenuhi persyaratan WCAG untuk ukuran teks yang bersangkutan.

Cara Membaca Hasil

1. AA menunjukkan bahwa kombinasi warna memenuhi persyaratan minimum WCAG untuk tingkat kepatuhan AA.
2. AAA menunjukkan bahwa kombinasi warna memenuhi persyaratan kontras yang lebih tinggi.

Apabila kombinasi warna belum memenuhi AA, pertimbangkan untuk mengubah warna teks, warna latar belakang, atau keduanya hingga kontrasnya mencukupi.

Hal yang Perlu Diperhatikan

Pemeriksaan menggunakan Chrome DevTools terutama mengevaluasi kontras antara warna teks dan warna latar belakang.

Pada halaman yang menggunakan:

1. gambar sebagai latar belakang;
2. gradien;
3. transparansi;
4. efek visual yang kompleks;

hasil pengukuran mungkin tidak sepenuhnya menggambarkan pengalaman pengguna.

Dalam kondisi tersebut, lakukan pengujian tambahan secara manual.

Kontras Bukan Satu-satunya Aspek Aksesibilitas

Kontras warna merupakan salah satu bagian dari aksesibilitas, tetapi bukan satu-satunya.

Website yang memenuhi WCAG juga perlu memperhatikan aspek lain, seperti:

1. struktur heading yang benar;
2. penggunaan HTML semantik;
3. ALT Text pada gambar;
4. label formulir yang jelas;
5. navigasi menggunakan keyboard;
6. indikator fokus yang terlihat;
7. pengelolaan fokus pada dialog dan komponen interaktif.

Rekomendasi Alat Bantu

Chrome DevTools sangat membantu untuk pemeriksaan cepat selama proses pengembangan.

Untuk evaluasi yang lebih menyeluruh, sebaiknya kombinasikan dengan alat aksesibilitas lainnya, seperti:

1. Accessibility Insights
2. axe DevTools
3. WAVE

Masing-masing alat tersebut dapat membantu menemukan berbagai masalah aksesibilitas lain yang tidak berkaitan dengan kontras warna.

Kontras warna yang baik bukan hanya membuat antarmuka terlihat lebih jelas, tetapi juga memastikan informasi dapat dibaca oleh lebih banyak pengguna dalam berbagai kondisi.

Selain itu, jangan pernah menggunakan warna sebagai satu-satunya cara menyampaikan informasi. Selalu lengkapi dengan teks, ikon, atau indikator lain yang mudah dipahami oleh semua pengguna, termasuk mereka yang menggunakan teknologi bantu.

Dengan memastikan kontras warna memadai dan informasi tidak hanya bergantung pada warna, Anda telah menerapkan dua prinsip penting WCAG yang berkontribusi pada pengalaman digital yang lebih inklusif dan mudah diakses.