Cek kontras warna (WCAG 2.2)
Masukkan atau pilih warna teks dan warna latar belakang. Alat ini menghitung luminans relatif kedua warna dan rasio kontrasnya persis seperti definisi W3C, lalu menampilkan kriteria keberhasilan WCAG 2.2 mana yang terpenuhi. Jika kontras kurang, alat ini menyarankan warna teks terdekat yang lolos.
Cara menghitung
Cara menghitung rasio kontras
WCAG 2.2 mendefinisikan rasio kontras sebagai (L1 + 0,05) ÷ (L2 + 0,05), dengan L1 luminans relatif warna yang lebih terang dan L2 luminans warna yang lebih gelap. Hasilnya berkisar dari 1:1 (warna identik) sampai 21:1 (hitam di atas putih).
Cara cek kontras warna
- Masukkan atau pilih warna teks (latar depan).
- Masukkan atau pilih warna latar belakang.
- Baca rasio kontras dan kriteria WCAG yang terpenuhi (AA, AAA); gunakan warna saran bila perlu.
Contoh: hitam di atas putih mencapai 21:1. Abu-abu #767676 di atas putih mendapat 4,54:1 dan lolos AA untuk teks normal; biru #3B82F6 di atas putih hanya 3,68:1 dan hanya lolos AA untuk teks besar.
Alat ini menghitung luminans relatif persis seperti definisi W3C: setiap kanal sRGB dibagi 255 lalu dilinearkan – nilai hingga 0,04045 dibagi 12,92, nilai yang lebih besar menjadi ((nilai + 0,055) ÷ 1,055)2,4. Kemudian L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Contoh #777777 di atas putih: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Karena ketiga kanal sama, L = 0,1845. Putih memiliki L = 1. Kontras = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. Cukup untuk teks besar (3:1), tetapi sedikit di bawah batas untuk teks normal (4,5:1). Warna saran #767676 mencapai 4,54:1.
Persyaratan WCAG 2.2
| Kriteria keberhasilan | Level | Teks normal | Teks besar |
|---|---|---|---|
| 1.4.3 Kontras (Minimum) | AA | 4,5:1 | 3:1 |
| 1.4.6 Kontras (Ditingkatkan) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Kontras Non-teks (komponen UI, grafik) | AA | 3:1 | |
Menurut WCAG, teks besar berukuran minimal 18 poin, atau minimal 14 poin tebal – di browser kira-kira 24 px dan 18,67 px. Pengecualian antara lain logo, teks yang murni dekoratif dan kontrol yang tidak aktif.
Tanpa pembulatan
WCAG membandingkan nilai yang tepat: 4,499:1 tidak memenuhi 4,5:1. Karena itu alat ini menilai rasio yang belum dibulatkan dan menampilkan dua angka desimal; jika pembulatan akan tampak mencapai ambang batas, angkanya dipotong (4,49, bukan 4,50).
Warna transparan
Warna dengan nilai alfa (mis. rgba(0, 0, 0, 0.6) atau #00000099) ditumpuk seperti yang dilakukan browser: latar belakang transparan di atas putih, warna teks transparan di atas latar belakang. Jika halaman Anda berada di atas warna dasar lain, masukkan warna buram tersebut sebagai latar belakang.
Pertanyaan umum
Berapa rasio kontras minimal untuk aksesibilitas?
Minimal 4,5:1 untuk teks normal (WCAG level AA, SC 1.4.3) dan 3:1 untuk teks besar. Level AAA yang lebih ketat mensyaratkan 7:1 dan 4,5:1. Kontrol seperti garis tepi kolom input dan ikon membutuhkan 3:1 (SC 1.4.11).
Apa itu rasio kontras?
Angka yang menyatakan perbedaan kecerahan dua warna, dihitung dari luminans relatif: (yang lebih terang + 0,05) ÷ (yang lebih gelap + 0,05). Rentangnya 1:1 (tanpa perbedaan) hingga 21:1 (hitam dan putih); makin besar, makin mudah teks dibaca.
Abu-abu apa yang masih lolos AA di atas putih?
#767676 adalah abu-abu paling terang yang mencapai minimal 4,5:1 di atas putih (4,54:1). #777777 sedikit kurang dengan 4,48:1.
Bagaimana alat ini menemukan warna saran?
Rona dan saturasi warna teks Anda dipertahankan, hanya kecerahan HSL yang diubah sedikit demi sedikit, ke arah lebih terang maupun lebih gelap. Yang disarankan adalah perubahan terkecil yang warnanya setelah dibulatkan pasti mencapai target.
Berapa rasio kontras untuk teks besar?
Untuk teks besar – 18 pt, atau 14 pt tebal – WCAG AA mensyaratkan minimal 3:1 dan AAA 4,5:1. Teks normal membutuhkan 4,5:1 (AA) atau 7:1 (AAA).
Sumber dan dasar hukum
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
Diperbarui:
Alat terkait
- Generator palet warnaBuat kombinasi warna serasi dari satu warna dasar: komplementer, analog, triadik, persegi, split-komplementer atau monokrom – lengkap dengan HEX, RGB dan HSL.
- Konversi warna: HEX, RGB, HSL, HSV, CMYKKonversi kode warna: HEX ke RGB, RGB ke HEX, HSL, HSV, HWB, dan CMYK. Masukkan warna dalam format apa pun atau pilih dari color picker, lalu salin hasilnya.
- Ambil kode warna dari gambar (color picker)Ambil kode warna dari gambar: buka foto, klik satu titik, lalu salin nilai HEX, RGB atau HSL – plus warna utama gambar. Tanpa unggah, semuanya di browser.
- Kalender Cina – konversi tanggal Imlek dan shioKalender Cina online: ubah tanggal Masehi ke kalender Imlek dan sebaliknya, cari tahu shio dan elemen Anda, tahun Kongzili, serta tanggal Tahun Baru Imlek.
- Konversi Kalender Ibrani (Kalender Yahudi)Ubah tanggal Masehi ke kalender Ibrani (Yahudi) dan sebaliknya – dengan nama bulan, tahun kabisat (Adar I/II), dan tanggal Tahun Baru Yahudi Rosh Hashanah.
- Konversi kalender Persia (kalender Iran)Ubah tanggal Masehi ke kalender Persia (kalender Iran, Hijriah Syamsiah) dan sebaliknya – lengkap dengan nama bulan, tahun kabisat, dan tanggal Nowruz.