WCAG 2 vs APCA: standar kontras mana yang sebaiknya Anda pakai di 2026?

Desainer terus menjumpai dua angka kontras yang saling bertentangan tanpa panduan jelas tentang mana yang harus diikuti. Jawaban singkatnya: keduanya menjawab pertanyaan yang berbeda, dan Anda membutuhkan keduanya. Jawaban panjangnya menjelaskan kapan harus memercayai yang mana.

Apa yang diukur masing-masing

WCAG 2 menghitung rasio antara relative luminance dua warna, pada skala 1:1 hingga 21:1. Ambangnya tetap: 4.5:1 untuk teks isi, 3:1 untuk teks besar dan komponen antarmuka, 7:1 untuk AAA.

APCA, singkatan dari Accessible Perceptual Contrast Algorithm, menghasilkan nilai kontras lightness bertanda, Lc, dari sekitar −108 hingga +106. Tandanya menunjukkan polaritas: positif berarti teks gelap di atas latar terang, negatif berarti teks terang di atas latar gelap. Yang terpenting, ambangnya tidak tetap. Ambang itu bergantung pada ukuran dan ketebalan font.

Perbedaan itulah inti seluruh persoalannya.

Di mana WCAG 2 gagal

WCAG 2 tidak bisa melihat tipografi. Caption 12px bergaris setipis rambut dan judul tebal 32px dengan dua warna yang sama mendapat skor yang identik. Siapa pun yang pernah merilis caption yang secara teknis lolos tetapi ternyata tidak terbaca sudah mengalami sendiri keterbatasan ini.

Yang benar-benar Anda tangkap adalah tinta di layar, dan glyph yang tipis menaruh jauh lebih sedikit tinta di sana dibandingkan glyph tebal dengan warna yang sama.

WCAG 2 tidak andal di dark mode. Rumus WCAG 2 menambahkan konstanta tetap 0.05 ke kedua nilai luminance, yang dimaksudkan untuk memodelkan pantulan cahaya layar (flare). Di ujung gelap rentang, konstanta itu mendominasi perhitungan, sehingga pasangan warna di dekat hitam bisa mencatat rasio yang lolos dengan nyaman padahal terbaca redup dan keruh.

Ini bukan keluhan pinggiran; ini salah satu masalah spesifik yang memang ingin diperbaiki APCA, dan makin penting setiap tahun seiring dark mode menjadi tampilan bawaan bagi sebagian besar pengguna.

Di mana APCA terasa tidak nyaman

Ketatnya APCA menghasilkan temuan yang mengejutkan banyak orang:

Teks 14px dengan ketebalan regular tidak bisa lolos pada kontras berapa pun. Tidak juga hitam di atas putih. Tidak satu kombinasi pun. Menurut APCA, teks dengan ukuran dan ketebalan itu membutuhkan minimal 16px, atau tebal (bold). WCAG 2 akan meloloskan caption 14px pada 4.5:1 tanpa komentar.

Teks 16px regular membutuhkan Lc 90, yang dalam praktiknya berarti teks hampir hitam di atas putih. Banyak teks isi yang terasa sangat nyaman dibaca ternyata tidak mencapai batas itu.

Apakah Anda menganggap ini cermat atau berlebihan bergantung pada pandangan awal Anda. Yang tidak diperdebatkan adalah APCA memodelkan persepsi yang mendasarinya secara lebih akurat daripada yang bisa dilakukan rasio dua luminance.

Soal status, dijawab dengan jujur

Banyak kebingungan di sini, jadi agar tepat:

APCA bukan standar. APCA sempat dimasukkan dalam working draft awal WCAG 3, lalu ditarik kembali ke status eksploratif pada Juli 2023. WCAG 3.0 diperkirakan tidak akan mencapai status Recommendation sebelum 2028 paling cepat, dan kemungkinan besar lebih lambat.

WCAG 2.1 dan 2.2 AA tetap menjadi acuan hukum yang berlaku. ADA di Amerika Serikat, European Accessibility Act, dan aturan serupa di tempat lain semuanya merujuk WCAG 2.x. Jika Anda diminta membuktikan kepatuhan, rasio itulah yang akan diminta.

Jadi siapa pun yang menyuruh Anda beralih ke APCA memberi saran yang bisa membuat Anda gagal audit. Dan siapa pun yang menyuruh Anda mengabaikan APCA sebenarnya menyuruh Anda mengabaikan model keterbacaan yang lebih baik.

Cara benar-benar memakai keduanya

Rilis dengan standar WCAG 2.2 AA. Ini tidak bisa ditawar jika kepatuhan penting bagi Anda. 4.5:1 untuk teks isi, 3:1 untuk teks besar dan komponen UI.

Periksa APCA untuk apa pun yang kecil, tipis, atau berada di latar gelap. Inilah tiga kasus di mana WCAG 2 paling tidak bisa dipercaya. Jika APCA tidak sepakat dengan hasil lolos WCAG, percayai APCA soal pengalaman membaca, meskipun yang Anda catat tetap angka WCAG.

Anggap hasil lolos WCAG yang tipis sebagai peringatan. Lolos dari 4.5:1 dengan selisih 0.02 tidak jauh berbeda dengan gagal dengan selisih 0.02. Jika angka APCA Anda juga pas-pasan, pasangan warna itu akan gagal begitu seseorang membuat teksnya sedikit lebih kecil.

Gunakan APCA untuk memperjuangkan perubahan tipografi, bukan hanya perubahan warna. Di sinilah APCA benar-benar berguna. Saat APCA menyatakan sebuah pasangan warna tidak bisa bekerja pada 14px regular, solusinya sering kali adalah mengubah hurufnya, bukan warnanya, dan APCA memberi Anda bukti untuk mendukung argumen itu.

Contoh ketidaksepakatan yang dihitung

Ambil contoh teks abu-abu sedang, #6b7280, di atas putih, pada 14px regular.

WCAG 2 memberi 4.83:1. Itu lolos untuk teks isi di level AA, dan sebagian besar tim akan merilisnya.

APCA memberi Lc 72 pada ukuran dan ketebalan di mana tidak ada kontras yang lolos sama sekali. Rekomendasinya bukan “gelapkan abu-abunya” melainkan “jadikan teksnya 16px, atau buat tebal.”

Keduanya benar dalam modelnya masing-masing. Salah satunya menggambarkan pengalaman membaca.

Aturan praktisnya

Catat rasio WCAG untuk kepatuhan. Rancang berdasarkan angka APCA untuk keterbacaan. Jika keduanya tidak sepakat, yang lebih ketatlah yang akan dialami pembaca Anda.

Contrast checker kami menampilkan keduanya berdampingan pada ukuran dan ketebalan yang benar-benar Anda pakai, dan menyatakan secara eksplisit kapan keduanya tidak sepakat beserta alasannya.