Mengapa teks isi 14px tidak akan pernah lolos APCA

Pertama kali alat kontras menyatakan bahwa teks hitam di atas latar putih gagal, Anda pasti mengira alatnya rusak. Biasanya tidak. Jika teksnya 14px dengan ketebalan regular, APCA menganggapnya tidak layak pakai, apa pun warna yang Anda pilih.

Hal ini cukup mengejutkan sehingga layak dijelaskan dengan benar.

Kontras bukan hanya soal warna

WCAG 2 memperlakukan kontras sebagai properti dua warna. Berikan warna latar depan dan latar belakang, lalu WCAG 2 mengembalikan sebuah rasio, tanpa tahu bagaimana teks akan ditata.

APCA memperlakukan kontras sebagai properti dua warna dan bentuk glyph yang dirender dengan warna-warna itu. Ini lebih mendekati cara kerja penglihatan. Yang sampai ke mata Anda bukan pasangan warna abstrak, melainkan sejumlah tinta yang tersusun dalam goresan. Goresan tipis pada ukuran kecil hanya menyampaikan sedikit tinta, dan antialiasing membuat tepinya lebih terang lagi.

Jadi ambang APCA bergeser mengikuti tipografi. Tabel acuannya mencantumkan, untuk setiap tingkat kontras, ukuran font minimum yang layak pakai pada setiap ketebalan:

Lc	Ketebalan 300	Ketebalan 400	Ketebalan 500	Ketebalan 700
90	21px	16px	15.5px	14px
75	24px	18px	16px	14px
60	42px	24px	21px	16px
45	72px	42px	32px	24px

Baca sepanjang kolom ketebalan 400. Pada Lc 90, yang sudah mendekati batas maksimum karena hitam murni di atas putih murni adalah Lc 106, ukuran terkecil yang layak pakai adalah 16px.

Tidak ada baris tempat 14px pada ketebalan 400 muncul. Menaikkan kontras tidak akan membantu, karena 16px sudah menjadi batas bawah pada kontras tertinggi yang bisa dihasilkan layar.

Yang bisa Anda lakukan sebagai gantinya

Pakai 16px. Solusi paling sederhana, dan memang seharusnya dipakai sebagian besar teks isi. 16px sudah menjadi ukuran default yang wajar untuk teks isi selama satu dekade.

Pertahankan 14px dan tambah ketebalannya. Lihat kolom ketebalan 700: 14px layak pakai pada Lc 90 dan Lc 75. Label tebal 14px dengan kontras kuat tidak masalah menurut APCA. Ini sering menjadi jawaban yang tepat untuk label UI ketika ruang vertikal memang terbatas.

Pertimbangkan ulang apakah elemen itu perlu berupa teks. Timestamp abu-abu muda 14px yang tidak bisa dibaca siapa pun tidak menyampaikan informasi. Jika memang penting, buat agar terbaca; jika tidak, hapus saja.

Konsekuensi yang tidak nyaman

Begitu Anda menerima tabel itu, banyak konvensi antarmuka yang umum tidak lagi bisa dibela.

Label huruf kapital 11px atau 12px dengan abu-abu redup ada di mana-mana dalam design system modern. Menurut APCA, 12px pada ketebalan 400 tidak punya kontras yang lolos sama sekali, dan bahkan pada ketebalan 700 masih membutuhkan Lc yang sangat tinggi. Kami menjalankan pemeriksaan ini pada antarmuka kami sendiri saat membangun situs ini dan harus mengubah label dari 11px ke 13px serta menambah ketebalannya. Alat ini menemukan masalah di antarmukanya sendiri.

Teks placeholder adalah pelanggar umum lainnya: kecil, terang, dan sering kali menjadi satu-satunya label yang dimiliki sebuah kolom.

WCAG 2 tidak salah, hanya belum lengkap

Artinya WCAG 2 belum lengkap pada sumbu yang satu ini, dan para penyusunnya tahu itu. Memodelkan ukuran dan ketebalan pada 2008 akan membutuhkan data dan komputasi yang belum praktis saat itu. Rasio dua luminance adalah pendekatan yang wajar, dan sudah membawa manfaat yang sangat besar.

Namun Anda perlu tahu apa yang tidak bisa dilihatnya. Caption 12px dan headline 32px dengan warna yang sama mendapat skor WCAG yang sama, padahal hanya satu yang terbaca.

Yang perlu dilakukan dalam praktik

Tetap catat rasio WCAG, karena itulah acuan pengukuran kepatuhan. Gunakan APCA untuk memeriksa apakah teks itu benar-benar bisa dibaca pada ukuran yang Anda rilis.

Dan saat APCA menggagalkan sebuah pasangan warna pada ukuran kecil, tahan dorongan untuk menggelapkan warnanya. Periksa tabelnya terlebih dulu. Sering kali jawabannya bukan warna yang berbeda, melainkan tambahan 2px, atau satu tingkat ketebalan lebih berat.

Contrast checker kami melaporkan kedua angka pada ukuran dan ketebalan yang Anda pilih, dan jika sebuah ukuran tidak layak pakai pada kontras berapa pun, alat ini menyatakannya langsung, alih-alih melaporkan kegagalan yang tidak bisa Anda perbaiki dengan warna.