Berapa rasio kontras minimal yang dibutuhkan?

Untuk teks normal, rasio minimal adalah 4,5 agar lulus WCAG AA, dan 7 untuk AAA. Teks besar — mulai 18,66 piksel tebal atau 24 piksel normal — hanya membutuhkan 3 untuk AA dan 4,5 untuk AAA, sementara elemen antarmuka seperti garis tepi kolom isian membutuhkan 3.

Kenapa teks kuning di atas putih gagal padahal warnanya jelas berbeda?

Karena kontras diukur dari kecerahan, bukan dari perbedaan rona. Kuning dan putih sama-sama sangat terang, sehingga rasionya rendah meski keduanya jelas berbeda warna. Perbedaan rona tidak membantu pembaca yang kesulitan membedakan warna, dan itulah yang diukur pedoman ini.

Apakah kontras berlaku juga untuk logo dan gambar dekoratif?

Tidak, logo dan teks yang murni dekoratif dikecualikan dari ambang kontras WCAG. Pengecualian itu tidak berlaku untuk teks yang menyampaikan informasi, termasuk teks di dalam gambar spanduk yang memuat pesan penting.

Apakah lulus AA cukup, atau harus AAA?

AA adalah standar yang diharapkan untuk situs publik dan menjadi kewajiban hukum bagi sebagian lembaga di beberapa negara. AAA jarang diwajibkan menyeluruh, tetapi layak dikejar untuk teks isi yang panjang, karena di sanalah beban membaca paling besar.

Warna

Cek Kontras Warna

Pilih warna teks dan latar untuk melihat rasio kontrasnya beserta status kelulusan tiap tingkat WCAG.

Warna teks

Warna latar

—

Teks normal 16 piksel untuk contoh keterbacaan.

Teks besar 24 piksel

AA — teks normal ≥ 4.5 —

AA — teks besar ≥ 3 —

AAA — teks normal ≥ 7 —

AAA — teks besar ≥ 4.5 —

Elemen antarmuka ≥ 3 —

Apa ini

Cek kontras warna mengukur seberapa besar perbedaan kecerahan antara warna teks dan warna latarnya, lalu membandingkannya dengan ambang yang ditetapkan pedoman aksesibilitas WCAG. Hasilnya berupa rasio antara 1 dan 21, di mana 1 berarti dua warna identik dan 21 adalah hitam di atas putih. Ambang yang harus dilewati berbeda menurut ukuran teks: teks kecil membutuhkan kontras lebih tinggi daripada teks besar, karena bentuk hurufnya lebih tipis dan lebih sulit dibedakan dari latarnya.

Rumus

ratio = (L1 + 0.05) ÷ (L2 + 0.05)

L1 — luminansi relatif warna yang lebih terang; L2 — yang lebih gelap.
Luminansi = 0,2126·R + 0,7152·G + 0,0722·B, setelah tiap kanal dilinierkan.
Ambang: 4,5 untuk AA teks normal · 3 untuk AA teks besar · 7 untuk AAA.

Cara kerja

Rasio dihitung dari luminansi relatif, bukan dari selisih nilai heksadesimalnya. Setiap kanal warna dilinierkan lebih dulu, lalu diberi bobot sesuai kepekaan mata manusia — hijau paling berpengaruh, biru paling kecil. Itulah sebabnya teks kuning di atas putih gagal meski nilai heksadesimalnya terlihat berjauhan, sementara biru tua di atas abu-abu bisa lulus.

Teks dianggap besar mulai dari 18,66 piksel jika tebal, atau 24 piksel jika berat normal. Di bawah itu berlaku ambang teks normal, yaitu 4,5 untuk AA dan 7 untuk AAA. Elemen antarmuka seperti garis tepi kolom isian dan ikon punya ambangnya sendiri, yaitu 3, karena bentuknya lebih besar dan tidak perlu dibaca sebagai huruf.

Lulus AA sudah menjadi standar yang diharapkan untuk situs publik, dan di banyak yurisdiksi merupakan kewajiban hukum bagi lembaga tertentu. AAA jarang dituntut untuk seluruh halaman, tetapi layak dikejar untuk teks isi yang panjang, karena di situlah pembaca menghabiskan paling banyak waktu.

Cara pakai

Pilih dua warna Masukkan warna teks dan warna latar, lewat pemilih warna atau kode heksadesimal.
Baca rasio dan statusnya Tiap tingkat WCAG ditandai lulus atau gagal, terpisah untuk teks normal dan teks besar.
Perbaiki dengan penyesuaian otomatis Jika gagal, tombol penyesuaian akan menggelapkan atau mencerahkan warna teks sampai ambangnya terlewati.

Pertanyaan umum

Berapa rasio kontras minimal yang dibutuhkan?: Untuk teks normal, rasio minimal adalah 4,5 agar lulus WCAG AA, dan 7 untuk AAA. Teks besar — mulai 18,66 piksel tebal atau 24 piksel normal — hanya membutuhkan 3 untuk AA dan 4,5 untuk AAA, sementara elemen antarmuka seperti garis tepi kolom isian membutuhkan 3.
Kenapa teks kuning di atas putih gagal padahal warnanya jelas berbeda?: Karena kontras diukur dari kecerahan, bukan dari perbedaan rona. Kuning dan putih sama-sama sangat terang, sehingga rasionya rendah meski keduanya jelas berbeda warna. Perbedaan rona tidak membantu pembaca yang kesulitan membedakan warna, dan itulah yang diukur pedoman ini.
Apakah kontras berlaku juga untuk logo dan gambar dekoratif?: Tidak, logo dan teks yang murni dekoratif dikecualikan dari ambang kontras WCAG. Pengecualian itu tidak berlaku untuk teks yang menyampaikan informasi, termasuk teks di dalam gambar spanduk yang memuat pesan penting.
Apakah lulus AA cukup, atau harus AAA?: AA adalah standar yang diharapkan untuk situs publik dan menjadi kewajiban hukum bagi sebagian lembaga di beberapa negara. AAA jarang diwajibkan menyeluruh, tetapi layak dikejar untuk teks isi yang panjang, karena di sanalah beban membaca paling besar.

Catatan

Perhitungan mengikuti WCAG 2 dan berjalan sepenuhnya di browser-mu.