Cara Membuat Bagan Ramah bagi Penyandang Buta Warna

Sebuah bagan bisa saja benar secara teknis namun tetap membuat pembaca gagal memahaminya. Biang keladinya biasanya warna yang dipaksa menanggung semua beban: garis merah berarti satu hal, garis hijau berarti hal lain, dan legenda menjadi satu-satunya kunci. Bagi penyandang gangguan penglihatan warna — dan bagi banyak orang yang melihat bagan di bawah silau, pada layar buruk, atau dalam hitam-putih — itu menciptakan hambatan yang tidak perlu.

Solusinya bukan berhenti memakai warna, melainkan menjadikan warna sebagai satu petunjuk di antara beberapa petunjuk. Panduan ini menerjemahkan prinsip itu menjadi keputusan praktis untuk bagan, dasbor, peta, dan infografik.

Aturan inti: warna tidak boleh menjadi satu-satunya petunjuk

Kriteria Keberhasilan WCAG 1.4.1 mensyaratkan warna bukan satu-satunya sarana visual untuk menyampaikan informasi, menandai tindakan, meminta respons, atau membedakan elemen visual. Untuk grafik data, artinya pembaca tetap harus dapat membedakan kategori, deret, status, atau makna tanpa mengenali sebuah rona.

Alternatif yang baik meliputi:

• Label teks dan nilai secara langsung
• Bentuk penanda berbeda pada garis atau titik
• Gaya garis penuh, putus-putus, dan bertitik
• Pola, tekstur, atau garis tepi pada batang dan area
• Ikon jelas dan teks legenda yang deskriptif
• Tabel data atau ringkasan teks yang memuat informasi penting yang sama

Kombinasi terbaik bergantung pada jenis bagan dan apakah pembaca membutuhkan gambaran cepat atau nilai yang persis.

Bangun bagan di sekitar pertanyaannya

Sebelum memilih warna, tulis satu kalimat yang menyatakan pesan utama bagan. Misalnya: “Penjualan tumbuh di semua wilayah, dengan pertumbuhan terkuat di barat.” Lalu periksa apakah pembaca masih bisa menjawab pertanyaan itu andai bagan dilihat dalam gradasi abu-abu.

Bila jawabannya tidak, tambahkan petunjuk non-warna. Uji sederhana ini menangkap kesalahan aksesibilitas yang paling umum: memakai palet yang tampak menarik tetapi menyandikan informasi hanya lewat rona.

Gunakan label langsung sebelum legenda yang berjauhan

Legenda memaksa pembaca mencocokkan kotak kecil dengan elemen bagan, kadang berulang kali. Ini makin sulit bila warnanya mirip atau garisnya saling silang. Bila ruang memungkinkan, beri label deret di ujung garis, letakkan nilai di samping batang, atau tandai titik penting secara langsung.

Misalnya, alih-alih garis biru, oranye, dan hijau dengan legenda di bawah, tambahkan nama kategori di sebelah titik terakhir tiap garis. Jaga agar label cukup dekat sehingga tidak tertukar dengan deret lain. Warna tetap membantu, tetapi teks yang melakukan pengenalan.

Sesuaikan petunjuk berlapis dengan jenis bagan

Bagan garis

Gunakan kombinasi gaya garis, bentuk penanda, dan label di ujung. Garis penuh dengan lingkaran, garis putus-putus dengan kotak, dan garis bertitik dengan segitiga tetap terbedakan meski warnanya tampak serupa.

Hindari terlalu banyak deret dalam satu bagan. Bila deretnya banyak, pertimbangkan bagan kecil berulang — bagan terpisah dengan skala konsisten — daripada berharap pembaca mengurai legenda yang padat.

Bagan batang

Gunakan label kategori dan nilai secara langsung. Bila batang mewakili kategori yang harus dibedakan dalam kelompok yang sama, tambahkan pola atau garis tepi yang jelas selain warna. Teknik G111 dari W3C secara khusus menjelaskan penggunaan warna dan pola bersama-sama pada batang.

Untuk batang bertumpuk, beri label segmen secara langsung bila memungkinkan dan sediakan tabel pendukung. Segmen yang tipis sulit dibaca siapa pun, bahkan dengan palet yang baik.

Diagram sebar dan gelembung

Padukan bentuk penanda dengan warna, dan gunakan ukuran serta kontras yang cukup agar penanda tidak lenyap. Tambahkan garis tepi pada titik bila isiannya terang atau latarnya ramai. Bila titik-titik bertumpuk, sediakan penyaringan, tabel data, atau tampilan kedua yang memisahkan kelompok.

Peta dan peta panas

Gunakan label, batas wilayah, simbol, atau pola selain warna isian. Peta transportasi, misalnya, dapat memasangkan warna tiap jalur dengan penanda halte yang khas. Pada peta koroplet, jangan membuat pesan utamanya bergantung hanya pada gradasi terang-ke-gelap yang halus; sertakan skala yang terlihat, nilai, dan tabel atau simpulan tekstual.

Rancang untuk kontras, bukan sekadar rona berbeda

Warna bisa berbeda rona tetapi mirip kecerahannya, sehingga menyatu dalam gradasi abu-abu atau pada perbedaan penglihatan warna. Kontras sangat penting untuk garis tipis, penanda kecil, batas bagan, dan teks.

Untuk objek grafis non-teks yang diperlukan agar bagan dapat dipahami, panduan kontras non-teks WCAG umumnya memakai ambang kontras 3:1 terhadap warna di sebelahnya. Konteks tetap penting, dan sebuah label atau tabel setara kadang dapat menyampaikan informasi tanpa menuntut pembaca membedakan grafiknya sendiri. Perlakukan pemeriksaan kontras sebagai satu bagian dari tinjauan desain, bukan pengganti label dan petunjuk berlapis.

Gunakan pemeriksa kontras untuk menelusuri kontras latar depan/latar belakang pada teks antarmuka dan elemen visual sederhana. Setelah itu, periksa bagan secara utuh: tata letak nyata menghadirkan kedekatan elemen, garis tipis, keadaan hover, dan lapisan tumpang tindih yang tidak tertangkap oleh pemeriksaan satu pasangan warna.

Berikan data di balik gambarnya

Bagan adalah ringkasan, bukan pengganti akses data. Bila sebuah bagan memuat keputusan atau klaim penting, sertakan satu atau beberapa hal berikut:

• Tabel berdekatan berisi kategori dan nilai
• Ringkasan tertulis yang padat tentang wawasan utamanya
• Unduhan yang dapat diakses, misalnya CSV
• Deskripsi panjang untuk hubungan visual yang rumit
• Tooltip yang dapat diakses papan ketik atau tampilan data yang bisa difokuskan pada bagan interaktif

Ini meningkatkan kemudahan pakai bagi pengguna pembaca layar sekaligus bagi orang yang tidak dapat membedakan setiap penyandian visual. Pembaca juga bisa memverifikasi pesannya tanpa menerka tinggi batang atau potongan diagram lingkaran.

Daftar periksa peninjauan bagan

Gunakan ini sebelum menerbitkan laporan, presentasi, dasbor produk, atau artikel:

• Apakah judulnya menyatakan isi bagan dan periode waktunya?
• Bisakah setiap deret atau kategori dikenali tanpa mengandalkan warna saja?
• Apakah nilai penting sudah diberi label, tersedia dalam tabel, atau dijelaskan dalam teks di dekatnya?
• Apakah garis, penanda, batang, dan butir legenda memiliki kontras cukup di tempat mereka bersinggungan atau bertumpuk?
• Apakah label terbaca pada perbesaran biasa dan di layar kecil?
• Apakah bagan menghindari label status merah/hijau yang ambigu seperti “baik” dan “buruk” tanpa teks atau ikon?
• Bisakah pengguna papan ketik menjangkau informasi pada bagan interaktif?
• Apakah tinjauan gradasi abu-abu atau simulasi penglihatan warna memunculkan elemen yang ambigu?

Uji dengan konten nyata dan orang sungguhan

Pemeriksaan otomatis dan simulasi berguna sebagai peringatan dini, tetapi bukan bukti bahwa bagan bekerja bagi setiap orang. Ujilah bagan jadi pada ukuran sebenarnya, di dalam produk atau dokumen tempat ia akan muncul. Minta peserta mengenali deret terpenting, nilai tertinggi, dan simpulannya tanpa dibimbing.

Simulator penglihatan warna kami dapat membantu desainer menelusuri tampilan sebuah gambar pada beberapa perbedaan penglihatan warna yang umum. Perlakukan sebagai langkah tinjauan tambahan, bukan pengganti riset pengguna atau evaluasi WCAG.

Untuk panduan antarmuka yang lebih luas, lihat desain untuk buta warna.

Contoh: memperbaiki bagan status

Bayangkan sebuah dasbor dengan lima departemen: batang hijau berarti sesuai target, batang merah berarti tertinggal, dan batang kuning berarti berisiko. Versi yang lebih aksesibel dapat:

1. Menambahkan kata status pada tiap batang: “Sesuai target”, “Berisiko”, atau “Tertinggal”.
2. Memakai ikon pada label, misalnya centang, segitiga peringatan, atau panah, disertai teks penjelasnya.
3. Memakai pola atau garis tepi sebagai petunjuk visual kedua.
4. Menampilkan persentase aktual dan nilai targetnya.
5. Menyediakan tabel di bawah bagan berisi departemen, nilai saat ini, target, dan status.

Warna tetap membuat polanya lebih cepat dipindai bagi banyak pengguna. Warna hanya tidak lagi menjadi satu-satunya jalan menuju pemahaman.

Intinya

Bagan yang aksesibel membuat pesannya tahan banting. Label langsung, pola, gaya garis, kontras, dan data setara membantu penyandang gangguan penglihatan warna memahami informasi yang sama seperti orang lain — sekaligus membuat karya Anda lebih jernih bagi seluruh audiens.