Panduan kontras warna WCAG
Pahami persyaratan kontras AA dan AAA, cara menguji komponen teks dan UI, serta cara memperbaiki pasangan yang gagal.
FAQ
- Berapa rasio yang saya perlukan untuk tombol?
- Komponen UI dan objek grafis umumnya membutuhkan setidaknya 3:1 dibandingkan warna yang berdekatan. Teks di dalam tombol masih memerlukan 4,5:1 (AA) atau 3:1 untuk teks besar.
Dasar-dasar kontras WCAG
WCAG 2.x mendefinisikan rasio kontras minimum antara teks dan warna latar belakang. Level AA adalah target umum hukum dan produk; AAA lebih ketat dan direkomendasikan untuk teks isi jika memungkinkan.
Kontras didasarkan pada pencahayaan relatif, bukan rona. Dua warna dapat terlihat berbeda tetapi kontrasnya gagal jika kecerahannya terlalu mirip.
Alur kerja pengujian
Pilih warna latar depan dan latar belakang dari sistem desain Anda. Jalankan melalui pemeriksa kontras. Perhatikan ambang batas teks normal vs besar.
Uji status hover, fokus, dan nonaktif — bukan hanya tombol dan tautan default.