Materi
Langkah menghitung luminans relatif sebuah warna dibahas lengkap di kelas Desain Visual Dasar. Ringkasnya, luminans relatif bernilai 0 untuk hitam dan 1 untuk putih, dan WCAG 2.2 mendefinisikan rasio kontras sebagai (L1 + 0,05) / (L2 + 0,05), dengan L1 luminans warna yang lebih terang. Contoh: abu-abu #767676 berluminans 0,1812, jadi di atas putih rasionya (1 + 0,05) / (0,1812 + 0,05) = 4,54:1.
Kriteria 1.4.3 Contrast (Minimum), tingkat AA, meminta teks dan gambar teks berkontras minimal 4,5:1, kecuali teks besar yang cukup 3:1. Teks besar berarti minimal 18 point atau 14 point tebal, yang menurut dokumen Understanding kira-kira setara 24px dan 18,5px. Teks pada komponen yang nonaktif, dekorasi murni, dan logo tidak punya syarat kontras. Nilai rasio tidak boleh dibulatkan: 4,499:1 tidak memenuhi 4,5:1.
Kriteria 1.4.11 Non-text Contrast, juga tingkat AA, meminta rasio minimal 3:1 terhadap warna di sebelahnya untuk informasi visual yang dibutuhkan untuk mengenali komponen antarmuka dan keadaannya, misalnya garis tepi kolom isian, indikator fokus, dan ikon, serta bagian grafik yang dibutuhkan untuk memahami isi. Teks di dalam tombol tetap diukur dengan 1.4.3.
Kriteria 1.4.1 Use of Color, tingkat A, melarang warna menjadi satu-satunya sarana visual untuk menyampaikan informasi, menandai tindakan, meminta tanggapan, atau membedakan elemen. Dua kasus yang sering muncul di halaman web: tautan di dalam paragraf yang hanya dibedakan warnanya dari teks biasa, dan kolom wajib yang hanya ditandai label merah. Penanda keduanya bisa berupa garis bawah tautan dan kata "wajib" di label.
a { color: #1a5fb4; } /* garis bawah bawaan tetap tampil */
.label-wajib::after { content: " (wajib)"; }
input { border: 1px solid #767676; } /* 4,54:1 terhadap putih, di atas 3:1 */
