Kontras Warna WCAG untuk Desainer
Aturan 4,5:1, matematika rasio kontras, dan alat gratis untuk memeriksa pasangan warna apa pun.
Jika teks Anda gagal dalam kontras WCAG AA, diperkirakan 285 juta orang dengan gangguan penglihatan tidak dapat membacanya. Plus Anda berada di posisi hukum yang semakin goyah di UE dan AS. Kabar baiknya: aturannya sederhana.
Aturan 4,5:1
Teks tubuh harus memiliki rasio kontras setidaknya 4,5:1 terhadap latar belakangnya untuk lolos WCAG AA. Teks besar (24px+ regular atau 18px+ bold) memiliki batas lebih rendah yaitu 3:1.
Untuk kesesuaian AAA: 7:1 untuk tubuh, 4,5:1 untuk teks besar.
Bagaimana rasio kontras dihitung
WCAG menggunakan luminansi relatif — konversi setiap warna ke nilai luminansi (0 = hitam, 1 = putih) menggunakan rumus tertentu, lalu hitung (L1 + 0,05) / (L2 + 0,05), dengan L1 adalah warna yang lebih terang.
Anda tidak perlu melakukan perhitungan — gunakan pemeriksa kontras gratis kami untuk memasukkan dua warna dan melihat rasionya.
Kasus kegagalan umum
- Abu-abu terang di atas putih — #999 di #fff = 2,85 (gagal). #767676 di #fff = 4,54 (lolos).
- Putih di atas kuning — hampir selalu gagal. Gunakan teks gelap di atas kuning.
- Tautan berwarna dalam teks tubuh — sebagian besar tautan biru lolos di atas putih tetapi gagal di atas abu-abu terang. Uji latar belakang sekitarnya yang sebenarnya.
- Warna merek yang terlihat bagus — seringkali gagal. Tambahkan latar belakang putih pudar atau gelapkan teks.
Memilih pasangan warna yang dapat diakses
Tiga pola yang andal:
- Gelap di atas terang — #1f2937 di #fff = 14:1 (sempurna).
- Putih di atas gelap — #fff di #1f2937 = 14:1 (sempurna).
- Gelap di atas aksen — #1f2937 di #fbbf24 = 9:1 (sempurna untuk tombol).
Di luar teks
WCAG 2.1 juga mensyaratkan 3:1 untuk elemen non-teks (tombol, cincin fokus, batas formulir). Pemeriksa menangani keduanya.
Wallpaper yang tidak akan melawan widget Anda
Jika Anda seorang desainer yang mengatur wallpaper di belakang widget jam dan notifikasi, pilih wallpaper dengan kontras di bawah 5:1 di zona widget. Alat Gaussian blur kami dapat melembutkan area ramai dari wallpaper mana pun untuk keterbacaan widget yang lebih baik.
Coba alat gratis kami
Sebagian besar panduan ini dipasangkan dengan alat langsung yang dapat Anda gunakan sekarang — tidak perlu mendaftar untuk percobaan pertama:
- Image resizer — perkecil dan perbesar sempurna piksel.
- Convert to WebP — file 30-50% lebih kecil dari JPG.
- Background remover — potong satu klik, PNG transparan.
- Favicon generator — setiap ukuran browser dari satu sumber.
- Social-media resizer — dimensi tepat setiap platform.
- Bulk processing — terapkan alat apa pun hingga 200 gambar sekaligus.
Jelajahi katalog alat lengkap.
