Mengapa 83.9% situs web gagal dalam kontras warna

WebAIM mengaudit satu juta halaman utama teratas setiap tahun. Survei 2026 menemukan kegagalan kontras yang terdeteksi di 83.9% halaman tersebut, dengan rata-rata 34 kasus kontras rendah per halaman. Tahun sebelumnya angkanya 79.1%.

Angkanya terus naik. Itulah bagian yang menarik, karena pemeriksaan kontras bukan masalah alat. Checker milik WebAIM sendiri gratis, sudah begitu selama bertahun-tahun, dan setiap desainer tahu keberadaannya.

Pemeriksaan bukanlah hambatannya

Tanyakan kepada desainer apa yang menghalangi mereka memperbaiki kegagalan kontras, dan jawabannya sangat seragam:

“Kebanyakan ingin mengikuti aturan WCAG, tetapi terjebak berputar-putar karena tidak tahu cara memperbaiki masalah kontras warna.”

“Banyak yang akan bilang ‘pilih warna yang aksesibel’ tanpa benar-benar membantu Anda memahami caranya, terutama saat Anda harus tetap memakai warna brand tertentu.”

“Bagi kebanyakan orang, WCAG itu mengintimidasi dan membingungkan. WCAG memberi tahu apa yang harus lolos, tetapi tidak punya panduan tentang cara melakukannya.”

Tidak satu pun dari keluhan ini tentang deteksi. Semuanya tentang langkah setelahnya: mengetahui apa yang harus diubah.

Alat yang ada menjawab “apakah ini lolos?” lalu berhenti. Itu jawaban lengkap untuk pertanyaan yang salah. Desainer sudah menduga warnanya gagal. Yang mereka butuhkan adalah warna terdekat yang lolos dan tetap terasa sebagai warna brand, dan mereka dibiarkan mencarinya dengan menggeser-geser nilai hex sampai angkanya berubah hijau.

Empat alasan keadaannya makin buruk, bukan makin baik

Warna brand adalah batasan, bukan pilihan. Warna itu ada di logo, di deck presentasi, dan di dokumen panduan yang sudah disetujui. “Pilih warna lain” bukan saran yang bisa dijalankan desainer secara sepihak. Jadi kegagalannya tetap ada.

Dark mode menggandakan cakupannya. Setiap palet kini harus bekerja ke dua arah, dan rumus WCAG 2 paling tidak andal di ujung gelap. Tema yang lolos di atas putih lalu dibalik tanpa diperiksa ulang adalah kegagalan yang umum dan tidak terlihat.

Design system menyebarkan satu kesalahan ke mana-mana. Satu token berkontras kurang di component library akan terulang di setiap produk yang memakainya. Design system melipatgandakan dampak, ke dua arah.

Kontras diperiksa paling akhir. Seperti kata seorang praktisi, banyak desainer “hanya menyesuaikan kontras menjelang akhir fase desain, dan hanya jika mudah dilakukan tanpa merusak desain mereka.” Saat itu warnanya sudah menjadi penopang, dan mengubahnya berarti meninjau ulang keputusan yang tidak ingin dibuka kembali oleh siapa pun.

Yang diukur dan tidak diukur angka itu

Perlu dirinci dengan tepat. Survei WebAIM mendeteksi kegagalan secara otomatis, artinya survei ini menangkap kasus teks di atas latar solid dan melewatkan kasus lain: teks di atas gambar, teks di atas gradien, dan apa pun yang membutuhkan penilaian manusia.

Jadi 83.9% adalah batas bawah, bukan batas atas. Angka sebenarnya lebih tinggi.

Angka itu juga tidak berarti situs-situs tersebut tidak bisa dipakai. Banyak kegagalan yang tipis, misalnya 4.2:1 yang seharusnya 4.5:1. Kegagalan seperti itu tetap penting, tetapi tidak sama dengan teks yang tidak terlihat.

Perbaikan yang benar-benar bisa diskalakan

Situs diperbaiki satu per satu. Pola yang menggerakkan angka keseluruhan adalah membuat pilihan yang benar menjadi pilihan yang mudah:

Taruh batasannya di token, bukan di proses review. Jika design system Anda merilis --text-brand yang sudah berada di tingkat ramp yang lolos, tidak ada yang perlu mengingatnya. Ramp-lah yang mengingat.

Uji kontras di CI. Rasio yang gagal seharusnya menggagalkan build, sama seperti unit test yang gagal. Kami melakukannya di situs kami sendiri: build gagal jika ada pasangan warna kami yang tidak lagi lolos di alat kami sendiri. Pada kali pertama dijalankan, pemeriksaan ini menangkap tujuh kegagalan nyata, di antarmuka yang lolos WCAG 2 di semua tempat.

Periksa pada ukuran dan ketebalan yang Anda rilis. WCAG 2 tidak bisa melihat tipografi, jadi rasio yang lolos pada caption 12px bergaris setipis rambut tidak membuktikan apa pun. APCA memodelkan hal ini, dan hasilnya tidak nyaman: 14px regular tidak bisa lolos pada kontras berapa pun.

Beri orang jawabannya, bukan putusannya. Jika sebuah alat bisa menghitung bahwa biru brand Anda perlu 11% lebih gelap agar lolos sambil mempertahankan hue-nya, alat itu seharusnya menyatakannya, bukan melaporkan 3.02:1 lalu selesai.

Celah yang ditutupnya

Alasan kami membangun contrast checker seperti ini adalah poin terakhir tadi. Diagnosis tidak pernah menjadi bagian yang sulit.

Alat ini mencari di sepanjang sumbu lightness warna Anda sendiri untuk menemukan nilai terdekat yang lolos, mempertahankan hue agar hasilnya tetap terasa sebagai brand Anda, mengurutkan kandidat berdasarkan seberapa sedikit warnanya bergeser, dan menawarkan untuk mengubah latar belakang sebagai gantinya jika itu kompromi yang lebih kecil.

Anda bisa mencobanya dengan warna yang katanya harus Anda relakan.