Kontras dark mode: mengapa WCAG 2 menyesatkan Anda

Palet yang lolos semua pemeriksaan di atas putih tidak otomatis lolos saat Anda membaliknya. Lebih buruk lagi, alat standar sering kali mengatakan bahwa palet itu lolos.

Asal masalahnya

Rumus kontras WCAG 2 adalah:

(L1 + 0.05) / (L2 + 0.05)

di mana L1 dan L2 adalah luminans relatif warna yang lebih terang dan yang lebih gelap. 0.05 itu memodelkan flare layar dari cahaya sekitar, yaitu cahaya yang memantul dari layar dan tidak pernah benar-benar hilang, sehingga tidak ada apa pun di layar yang benar-benar berluminans nol.

Ini penyederhanaan yang masuk akal, dan di ujung terang rentangnya hampir tidak berpengaruh. Luminans 0.9 ditambah 0.05 adalah penyesuaian 5%.

Di ujung gelap, konstanta ini mendominasi sepenuhnya. Abu-abu yang sangat gelap mungkin memiliki luminans 0.008. Menambahkan 0.05 membuatnya menjadi 0.058: konstanta itu kini tujuh kali lebih besar daripada nilai yang sebenarnya diukur. Rumus itu berhenti menggambarkan warnanya dan mulai menggambarkan konstantanya.

Konsekuensi praktisnya: perbedaan luminans yang kecil di antara warna-warna gelap menggelembung menjadi rasio yang tampak besar. Dua abu-abu gelap yang benar-benar sulit dibedakan bisa lolos dengan nyaman.

Seperti apa dalam praktik

Kesalahan dark mode yang umum adalah mengambil warna brand yang berfungsi di atas putih lalu memakainya tanpa perubahan di latar gelap.

Ambil biru sedang seperti #2563eb. Di atas putih nilainya sekitar 5.17:1, lolos AA dengan jelas untuk teks isi. Letakkan di atas hitam pekat #0c0f15 dan WCAG 2 memberi sekitar 3.6:1. Di bawah AA untuk teks isi, jadi yang ini masih akan tertangkap.

Namun geser sedikit lebih terang dan Anda bisa mencapai 4.5:1 sementara teksnya tetap terbaca redup dan sedikit bergetar di atas latar gelap. Rasionya bilang lolos. Mata Anda bilang lain. Dan di latar gelap, hukuman perseptual karena berada di ambang batas jauh lebih berat daripada di atas putih.

Kami mengalami persis hal ini saat membangun situs kami sendiri. Warna tautan dark mode kami lolos WCAG AA dengan nyaman, dan ketika kami mengujinya dengan APCA hasilnya Lc 37 terhadap kebutuhan 75. Di tangkapan layar terlihat baik-baik saja, padahal benar-benar sulit dibaca.

APCA menangani polaritas dengan benar

APCA menghasilkan nilai bertanda. Positif berarti teks gelap di latar terang; negatif berarti teks terang di latar gelap. APCA memakai kurva yang berbeda untuk setiap arah, karena respons perseptual memang tidak simetris: teks terang di latar gelap tampak meluber ke luar dan terlihat lebih tebal, efek yang tidak terjadi sebaliknya.

Inilah sebabnya APCA menjadi angka yang lebih bisa dipercaya, khususnya di dark mode. APCA dirancang dengan memperhitungkan asimetri itu, sedangkan WCAG 2 memperlakukan kedua arah dengan aritmetika yang sama.

Apa yang perlu dilakukan

Beri setiap warna brand dua varian. Satu digelapkan untuk latar terang, satu dicerahkan untuk latar gelap. Hue sama, kroma sama, dua nilai kecerahan. Inilah perubahan struktural paling berguna, dan memang itulah yang dibutuhkan untuk merilis di kedua tema. Satu warna tidak bisa melayani keduanya.

Jangan pakai hitam murni sebagai latar gelap. #000000 memaksimalkan distorsi flare dan menimbulkan halasi yang tidak nyaman dengan teks terang. Warna di kisaran #0c0f15 sampai #16181d lebih nyaman dibaca dan memberi Anda ruang untuk membangun skala elevasi.

Jangan pakai teks putih murni juga. Putih dengan kecerahan penuh di atas warna hampir hitam terasa keras dan menimbulkan efek bloom yang terlihat pada ukuran kecil. Putih pucat yang sedikit hangat di kisaran #e8ecf2 lebih enak dibaca dan hasil pengukurannya nyaris tidak berbeda.

Kurangi saturasi saat warna makin terang. Warna yang sangat jenuh di latar gelap tampak bergetar. Menurunkan kroma seiring naiknya kecerahan menghasilkan tampilan yang lebih tenang dengan hasil pengukuran yang sama.

Periksa dark mode pada ukuran dan ketebalan yang sebenarnya. Selisih antara kedua model makin lebar saat teks makin kecil, jadi label dark mode 14px adalah kasus terburuk di kedua sumbu sekaligus.

Mendapatkan varian yang tepat

Pendekatan yang efisien adalah mengunci hue dan kroma lalu hanya menggeser kecerahan, karena kecerahanlah yang menentukan kontras dan hue-lah yang membawa brand Anda. Bekerjalah di OKLCH, tempat kecerahan seragam secara perseptual, sehingga langkah yang sama terlihat sama.

Hasilnya adalah pola dua token:

--brand: oklch(55% 0.16 255);
--brand-on-light: oklch(48% 0.16 255);
--brand-on-dark:  oklch(78% 0.12 255);

Perhatikan penurunan kroma pada varian gelap. Itulah poin desaturasi di atas, dalam bentuk nyata.

Pemeriksa kontras kami menampilkan WCAG 2 dan APCA bersamaan dan memberi tanda ketika keduanya tidak sepakat, yang di latar gelap cukup sering terjadi. Lintasan kecerahan menunjukkan bagian mana dari hue Anda yang lolos terhadap latar tertentu, jadi Anda bisa memilih kedua varian dari sumbu yang sama.