Berapa rasio kontras warna yang sebenarnya Anda butuhkan?

Ambang-ambangnya cukup sederhana untuk dihafal. Yang menyulitkan adalah mengetahui ambang mana yang berlaku untuk elemen tertentu, dan ada empat aturan yang banyak disalahpahami.

Angka-angkanya

Apa	AA	AAA
Teks isi	4.5:1	7:1
Teks besar	3:1	4.5:1
Komponen antarmuka dan grafik yang bermakna	3:1	tidak ada tingkat AAA
Kontrol nonaktif, elemen dekoratif, logo	dikecualikan	dikecualikan

AA adalah standar yang berlaku bagi hampir semua pihak. ADA, European Accessibility Act, dan aturan serupa merujuk WCAG 2.x di level AA. AAA umumnya diterapkan secara selektif, bukan di seluruh situs; para penyusun WCAG sendiri menyatakan bahwa AAA tidak bisa dicapai untuk semua konten.

Aturan 1: “besar” punya definisi yang tepat

Teks besar berarti 24px ke atas, atau 18.66px ke atas jika ketebalannya 700 atau lebih.

Angka-angka itu berasal dari konversi 18pt dan 14pt tebal pada acuan 96dpi. Ambang untuk teks tebal lebih rendah karena goresan yang lebih tebal menaruh lebih banyak tinta di layar pada ukuran yang sama.

Kesalahan yang umum adalah menganggap setiap judul otomatis memenuhi syarat. Subjudul 20px dengan ketebalan regular bukan teks besar. Subjudul itu membutuhkan 4.5:1, sama seperti teks isi.

Aturan 2: komponen antarmuka juga butuh kontras

Success Criterion 1.4.11, yang ditambahkan di WCAG 2.1, adalah kriteria yang paling sering terlewat sepenuhnya. Kriteria ini mensyaratkan 3:1 untuk informasi visual yang dibutuhkan agar sebuah komponen dan statusnya bisa dikenali.

Dalam praktiknya:

• Border kolom input, terhadap latar di sekitarnya
• Indikator fokus
• Batas toggle dan checkbox dalam kedua status
• Ikon yang membawa makna sendiri
• Bagian bermakna dari sebuah grafik: garis, batang, titik data

Kriteria ini tidak berlaku untuk grafik dekoratif, atau bagian komponen yang tidak diperlukan untuk memahaminya. Bayangan tipis di bawah kartu tidak masalah. Border kartu, jika border itu satu-satunya petunjuk letak kolom input, bermasalah.

Kriteria ini menjaring sangat banyak desain yang selebihnya sudah cermat. Border input abu-abu pucat #e5e7eb di atas putih hanya sekitar 1.3:1, pola yang umum dan jelas gagal.

Aturan 3: teks placeholder tidak dikecualikan

Kontrol nonaktif dikecualikan dari syarat kontras. Teks placeholder tidak, dan keduanya terus-menerus dicampuradukkan.

Teks placeholder adalah konten sungguhan yang ditampilkan kepada pengguna, jadi membutuhkan 4.5:1 seperti teks isi lainnya. Placeholder abu-abu pucat yang lazim dipakai masih jauh dari angka itu.

Perbaikan yang lebih baik biasanya bersifat struktural, bukan soal warna: jika placeholder menjalankan tugas label, seharusnya ia menjadi label. Placeholder menghilang begitu seseorang mulai mengetik, padahal justru saat itulah orang paling sering perlu diingatkan untuk apa kolom tersebut.

Aturan 4: teks di atas gambar butuh latar yang pasti

Jika teks berada di atas foto atau gradien, tidak ada satu warna latar pun yang bisa dijadikan acuan pengukuran, dan rasionya berubah seiring perubahan gambar.

Anda perlu membuat latar yang pasti: scrim solid, overlay gradien yang cukup pekat untuk menjamin kasus terburuk, atau wadah teks. Ukur terhadap titik paling terang di area di belakang teks, bukan rata-ratanya.

Alasan yang sama menjelaskan mengapa permukaan yang sangat tembus pandang dan blur sulit dibuat patuh: latarnya adalah apa pun yang kebetulan sedang di-scroll di bawahnya, jadi rasionya sama sekali bukan properti yang tetap.

Ambang bukanlah skor

Lolos dari 4.5:1 dengan selisih 0.01 tidak lebih baik secara berarti daripada gagal dengan selisih 0.01. Angka itu adalah batas bawah, bukan nilai rapor.

Jika sebuah pasangan warna nyaris lolos, anggap itu peringatan bahwa pasangan itu akan gagal begitu seseorang membuat teksnya sedikit lebih kecil, atau desainer menggeser abu-abunya satu tingkat lebih terang. Sisakan ruang aman pada apa pun yang Anda perkirakan akan dipakai ulang.

Yang tidak bisa diungkapkan rasio

Ada dua hal yang sepenuhnya berada di luar model ini.

Rasio tidak bisa melihat tipografi. Caption 12px bergaris setipis rambut dan judul tebal 32px dengan warna yang sama mendapat rasio yang sama, padahal hanya satu yang terbaca. APCA memodelkan hal ini; WCAG 2 tidak.

Rasio tidak bisa memberi tahu apakah dua warna latar depan bisa dibedakan satu sama lain. Itulah yang merusak grafik dan warna status bagi pengguna buta warna, dan tidak ada pemeriksaan kontras yang menangkapnya karena kedua warna itu tidak pernah dibandingkan.

Kedua celah ini nyata, dan keduanya layak diperiksa secara terpisah setelah rasionya beres.

Contrast checker kami menampilkan semua ambang sekaligus, AA dan AAA, teks isi dan teks besar, ditambah aturan komponen, jadi Anda bisa melihat apa yang lolos dan tidak lolos untuk sebuah pasangan warna tanpa berganti mode.