Cara memperbaiki kontras warna tanpa mengubah warna brand Anda

Setiap audit aksesibilitas menghasilkan momen canggung yang sama. Biru brand gagal di atas putih, alat pemeriksa menunjukkan 3.02:1, dan saran yang ditawarkan hanyalah “pilih warna yang aksesibel.” Siapa pun yang pernah duduk dalam rapat semacam itu tahu saran ini tidak membantu. Warna itu ada di logo. Ada di slide presentasi. Sudah disetujui oleh seseorang yang tidak hadir di ruangan.

Kabar baiknya, saran itu keliru, atau setidaknya sangat tidak lengkap. Dalam kebanyakan kasus, Anda bisa mempertahankan warnanya.

Kontras nyaris tidak peduli pada hue

Rasio kontras membandingkan luminans relatif, kira-kira seberapa banyak cahaya yang dipancarkan sebuah warna. Luminans sebagian besar ditentukan oleh kecerahan. Hue sedikit berpengaruh, karena mata lebih peka terhadap hijau daripada biru, sedangkan saturasi hampir tidak berpengaruh sama sekali.

Konsekuensi praktisnya layak dinyatakan dengan gamblang: Anda bisa mengubah seberapa terang sebuah warna tanpa mengubah warna itu sendiri. Biru yang lebih gelap tetap dikenali sebagai biru Anda. Ia membawa asosiasi brand yang sama, berada dalam keluarga yang sama, dan berpasangan dengan warna sekunder yang sama. Bedanya, ia tidak menggagalkan audit Anda.

Karena itulah saran “pilih warna lain” begitu buruk. Saran itu memperlakukan warna sebagai satu kesatuan yang tak terbagi, padahal sebuah warna memiliki satu properti yang menentukan kontras dan dua properti yang menentukan identitas.

Bekerja di OKLCH, bukan hex

Jika Anda menggeser nilai hex secara manual, Anda akan mengubah hue dan saturasi tanpa sengaja. Hex adalah format penyimpanan; ia bukan ruang yang berguna untuk menalar warna.

OKLCH memisahkan ketiga properti itu dengan rapi:

• L: kecerahan (lightness), 0 hingga 100%. Inilah yang menggeser kontras.
• C: kroma (chroma), kurang lebih saturasi.
• H: hue, 0 hingga 360°. Inilah yang membawa identitas brand Anda.

Pertahankan H, pertahankan C sebisa mungkin, dan geser L. Karena kecerahan OKLCH seragam secara persepsi, berbeda dengan HSL yang kecerahan 50% pada kuning berarti hal yang berbeda dibanding pada biru, langkah yang sama besar pada L juga terlihat sama besar di mata. Itu membuat penyesuaiannya bisa diprediksi.

CSS menerima OKLCH secara langsung, jadi Anda bisa merilis hasilnya tanpa mengonversinya kembali:

--brand: oklch(68% 0.14 240);      /* fails on white */
--brand-text: oklch(52% 0.14 240); /* same hue, passes AA */

Dua custom property, satu hue. Warna brand tetap menjadi warna brand, dan kini punya varian yang aman untuk teks.

Seberapa jauh Anda harus menggeser

Lebih sedikit dari yang dikira orang. Naik dari 3:1 ke 4.5:1 terhadap putih biasanya berarti perubahan kecerahan sekitar 8–15%, tergantung hue-nya. Perubahan itu terlihat jika kedua warna diletakkan berdampingan, dan nyaris tak terlihat jika tidak.

Ada batas yang nyata, dan ada baiknya Anda tahu letaknya. Warna hangat yang sangat jenuh, seperti kuning, oranye, dan hijau muda, memiliki batas atas yang rendah terhadap putih, karena warna-warna itu pada dasarnya terang. Kuning jenuh tidak bisa mencapai 4.5:1 terhadap putih pada kecerahan berapa pun selama ia tetap kuning jenuh. Saat Anda menabrak batas itu, pilihan yang jujur adalah menurunkan kroma, atau mengubah latar belakangnya.

Mengubah latar belakang biasanya kompromi yang lebih kecil

Pilihan ini jarang dimanfaatkan. Ketika warna brand dipakai sebagai teks, batasannya adalah warna brand itu. Ketika warna brand dipakai sebagai latar belakang, ada dua hal yang bisa Anda geser, dan biasanya teksnya yang kurang berharga di antara keduanya.

Tombol berlatar warna brand dengan teks putih yang gagal sering kali lebih baik diperbaiki dengan sedikit menggelapkan latar belakangnya daripada meninggalkan teks putih. Kebanyakan alat tidak pernah menyarankan hal ini, karena alat-alat itu dibuat untuk menilai sepasang warna, bukan untuk mencari solusinya.

Periksa hasilnya pada ukuran yang benar-benar Anda rilis

WCAG 2 membandingkan dua warna dan mengabaikan segala hal lain. Artinya, keterangan 12px dengan bobot Light dan judul 32px dengan bobot Bold mendapat skor yang sama, dan siapa pun yang pernah merilis keterangan yang secara teknis lolos tahu bahwa membaca tidak bekerja seperti itu.

APCA, algoritma kandidat untuk WCAG 3, menilai ukuran dan bobot huruf selain warna. Hasilnya kadang benar-benar tidak nyaman. Teks 14px dengan bobot regular tidak bisa lolos pada kontras berapa pun, bahkan hitam murni di atas putih murni sekalipun. Ia butuh 16px, atau butuh bold. WCAG 2 akan meloloskan keterangan itu begitu saja.

Tidak satu pun dari kedua angka itu cukup jika berdiri sendiri. WCAG 2 adalah acuan pengukuran kesesuaian saat ini. APCA adalah prediktor yang lebih baik untuk menilai apakah seseorang bisa membacanya. Jika keduanya tidak sepakat, rilis sesuai yang lebih ketat.

Mode gelap perlu pemeriksaan tersendiri

Jangan berasumsi palet yang lolos di atas putih juga akan lolos saat dibalik. Rumus WCAG 2 menambahkan konstanta flare tetap yang mendominasi di ujung gelap, sehingga pasangan warna yang mendekati hitam bisa menunjukkan rasio yang lolos dengan nyaman tetapi tetap terlihat redup dan keruh. Inilah salah satu kegagalan spesifik yang dirancang untuk diperbaiki oleh APCA.

Dalam praktiknya, warna brand biasanya membutuhkan dua varian: satu digelapkan untuk latar terang, satu dicerahkan untuk latar gelap. Hue sama, kroma sama, dua nilai kecerahan. Itu sudah merupakan sistem warna, bukan sekadar satu warna, dan itulah yang sebenarnya diperlukan untuk merilis di kedua tema.

Versi singkatnya

1. Pertahankan hue. Geser kecerahannya.
2. Bekerjalah di OKLCH agar Anda hanya mengubah hal yang memang ingin diubah.
3. Jika warna itu dipakai sebagai latar belakang, pertimbangkan untuk menggeser latar belakangnya, bukan teks di atasnya.
4. Periksa pada ukuran dan bobot huruf yang sebenarnya, bukan hanya sebagai dua kotak warna.
5. Buat varian kedua untuk mode gelap, alih-alih berasumsi varian pertama bisa dibalik begitu saja.

Contrast checker melakukan kelima hal itu. Alat ini menggambar sumbu kecerahan dari hue Anda sendiri, menunjukkan bagian mana yang lolos, dan memberi nilai lolos terdekat yang diurutkan berdasarkan seberapa sedikit warnanya bergeser.