Warna status Bootstrap dan Tailwind gagal bagi pengguna buta warna

Kebanyakan sistem desain menyertakan merah untuk error dan hijau untuk sukses. Konvensi ini begitu mapan sehingga tidak ada yang mengauditnya. Kami mengukur apa yang terjadi pada warna bawaan itu dengan simulasi defisiensi penglihatan warna, dan angkanya lebih buruk daripada yang tersirat dari konvensi tersebut.

Apa yang kami ukur

Kami mengambil warna status bawaan dari dua sistem yang banyak dipakai dan menghitung jarak perseptual CIEDE2000 antara setiap pasangan merah dan hijau: pertama untuk penglihatan normal, lalu untuk setiap defisiensi yang disimulasikan menggunakan model Machado dkk. (2009).

Secara kasar, jarak di bawah sekitar 10 berarti dua warna sulit dibedakan saat bersebelahan. Di bawah 5, keduanya terbaca sebagai warna yang sama.

Pasangan	Normal	Deuteranopia	Protanopia	Akromatopsia
Bootstrap danger / success	74.1	4.0	25.4	10.0
Tailwind red-500 / green-500	76.1	7.8	25.9	12.9
Merah / hijau generik	70.6	6.0	23.0	10.1
Biru / oranye	62.4	74.2	66.1	28.7

Deuteranopia adalah kolom yang paling penting, karena deuteranomali (bentuknya yang lebih ringan) dialami sekitar 5% pria. Bagi pengguna tersebut, status error dan sukses di Bootstrap hanya terpisah oleh jarak perseptual empat. Itu bukan penurunan yang halus. Itu warna yang sama.

Baris terakhir adalah kontrolnya. Biru dan oranye bukan sekadar bertahan; keduanya justru terpisah lebih jauh pada deuteranopia dibanding pada penglihatan normal.

Mengapa setiap audit kontras melewatkan ini

Bagian ini layak benar-benar dipahami, karena menjelaskan bagaimana masalah ini bertahan di sistem yang selebihnya dibangun dengan cermat.

Pemeriksa kontras hanya mengajukan satu pertanyaan: apakah latar depan ini bisa dibedakan dari latar belakang ini? #dc3545 milik Bootstrap di atas putih bernilai 4.53:1. #28a745 miliknya di atas putih bernilai 3.01:1. Keduanya masuk kategori dapat diterima, keduanya disetujui.

Tetapi pemeriksa tidak pernah membandingkan merah dengan hijau, karena keduanya tidak pernah bertumpuk. Keduanya muncul di tempat berbeda (satu di toast error, satu di toast sukses) dan alat itu tidak mengenal hubungan apa pun di antara keduanya.

Kegagalan buta warna berada tepat di titik buta itu. Kegagalan ini terjadi antarpasangan warna latar depan, sedangkan rangkaian alat standar hanya menguji latar depan terhadap latar belakang.

Protanopia berbeda, dan itu penting

Perhatikan bahwa skor protanopia jauh lebih baik di tabel: sekitar 25, bukan 4. Itu bukan karena penyandang protanopia mudah membedakan warna-warna ini.

Protanopia melibatkan berkurangnya kepekaan terhadap cahaya merah secara keseluruhan, sehingga merah tampak lebih gelap sekaligus bergeser hue-nya. Perbedaan kecerahan itulah yang mendorong jaraknya naik kembali: kedua warna menjadi bisa dibedakan, tetapi lewat terang-gelapnya, bukan lewat hue.

Ini petunjuk berguna tentang cara memperbaikinya.

Apa yang benar-benar berhasil

Pisahkan dengan kecerahan. Persepsi kecerahan tidak terpengaruh oleh defisiensi merah-hijau jenis apa pun. Jika warna error dan sukses Anda berbeda satu langkah kecerahan yang jelas selain berbeda hue, keduanya tetap bisa dibedakan, apa pun yang terjadi pada sel kerucut mata. Satu perubahan ini memperbaiki sebagian besar palet.

Gunakan sumbu biru-oranye untuk pengodean dua nilai. Grafik, toggle, perbandingan sebelum dan sesudah. Biru dan oranye adalah pasangan dua warna paling tangguh yang tersedia, dan pengukuran di atas menunjukkan alasannya.

Berhenti menjadikan warna sebagai satu-satunya penanda makna. Inilah perbaikan yang benar-benar memenuhi WCAG, dan perbaikan yang tidak bergantung pada ketepatan hitungan. Success Criterion 1.4.1 mensyaratkan bahwa warna tidak pernah menjadi satu-satunya cara menyampaikan informasi. Dalam praktiknya:

• Ikon pada alert, bukan hanya border berwarna
• Label langsung pada seri grafik, bukan hanya legenda warna
• Garis solid versus garis putus-putus
• Kata “Error” di dalam pesan error

Begitu ada isyarat kedua, palet tidak lagi menanggung makna sendirian, dan warna yang menyatu menjadi masalah kosmetik, bukan fungsional.

Catatan tentang nilai bawaan framework

Semua ini tidak berarti Bootstrap atau Tailwind dibangun dengan buruk. Keduanya menyediakan cara untuk menimpa nilai-nilai ini, dan keduanya mendokumentasikan persyaratan aksesibilitasnya.

Namun, nilai bawaan itulah yang akhirnya dirilis. Nilai bawaan yang tidak terlihat oleh 5% pria layak diubah di lapisan tema Anda sendiri alih-alih diwarisi begitu saja. Biayanya satu baris di file konfigurasi, dan alternatifnya adalah jenis bug yang tidak akan pernah dimunculkan oleh audit otomatis mana pun di pipeline Anda.

Periksa palet Anda sendiri

Pengukuran dalam tulisan ini berasal dari simulator buta warna kami, yang menguji setiap pasangan dalam palet terhadap delapan jenis penglihatan yang disimulasikan dan melaporkan pasangan yang menyatu. Alat ini berjalan sepenuhnya di browser Anda: tempelkan warna brand Anda dan lihat pasangan mana yang selama ini diam-diam diloloskan oleh audit kontras Anda.