Pemeriksa Kontras — Kontras Warna WCAG
Periksa rasio kontras antara warna teks dan latar sesuai WCAG AA/AAA dan lihat hasilnya seketika.
Muharjo seorang xenofobia universal yang giat dan zuhud.
Muharjo seorang xenofobia universal yang giat dan zuhud.
Dihitung di perangkat
Aman untuk merek yang belum diluncurkan
Tanpa akun
Koneksi aman
Cara kerjanya
- 1
Tetapkan warna teks
Tempel kode HEX warna depannya, atau pilih dari kotak warna.
- 2
Tetapkan warna latar
Lakukan hal sama untuk apa pun yang ada di belakang teks — latar yang sebenarnya, bukan putih secara bawaan.
- 3
Baca hasilnya
Rasio dan status lulus tiap tingkat WCAG muncul bersamaan, lengkap dengan contoh teks langsung.
Mengapa memakai alat ini
Angka, bukan pendapat
Kontras adalah rasio terukur antara 1:1 dan 21:1. Alat ini menghitungnya, sehingga “bagi saya sudah oke” berhenti menjadi argumen penentu.
Semua ambang sekaligus
AA dan AAA, untuk teks normal dan besar, dinilai bersamaan — Anda langsung tahu pasangan itu aman dipakai di mana.
Pratinjau langsung
Teks sungguhan dirender dengan pasangan yang Anda uji, jadi angka dan tampilannya diperiksa berdampingan.
Perbaiki di dalam alatnya
Setel salah satu warnanya dan rasionya ikut berubah, jadi Anda menemukan nada lulus terdekat alih-alih menebak.
Tidak ada yang diunggah
Perhitungannya aritmetika di browser Anda — tidak ada nilai warna yang dikirim ke mana pun.
Gratis tanpa akun
Tanpa pendaftaran, tanpa batas, dan tanpa watermark pada apa pun.
Apa yang sebenarnya diukur rasio kontras
Rasio ini membandingkan luminansi relatif dua warna — seberapa banyak cahaya yang dipantulkan atau dipancarkan masing-masing, dibobot menurut kepekaan penglihatan manusia terhadap merah, hijau, dan biru. Rentangnya dari 1:1, ketika kedua warnanya identik dan teksnya tak terlihat, sampai 21:1, yaitu hitam pekat di atas putih murni. Yang menentukan: ia mengukur selisih kecerahan, bukan selisih rona. Merah jenuh dan hijau jenuh dengan kecerahan serupa duduk di dekat 1:1 dan hampir tak terbaca bila disandingkan, padahal keduanya tampak sangat berbeda bagi orang dengan penglihatan warna biasa. Karena itulah kalimat “dua warna ini kontrasnya kuat” adalah penilaian yang tidak bisa diandalkan, dan karena itulah rumusnya ada.
Ambangnya, dan mana yang berlaku untuk Anda
WCAG menetapkan dua tingkat kesesuaian. Tingkat AA, yang dibidik sebagian besar organisasi dan sebagian besar ketentuan hukum, meminta 4,5:1 untuk teks tubuh normal dan 3:1 untuk teks besar — besar berarti 18pt, atau 14pt bila tebal. Tingkat AAA menaikkannya menjadi 7:1 dan 4,5:1; realistis untuk teks tubuh situs dokumentasi, tetapi biasanya tidak untuk halaman pemasaran yang dipimpin merek. Dua hal kerap menjebak. Pertama, kelonggaran teks besar begitu murah hati sehingga sebuah judul bisa lulus sementara paragraf di bawahnya, dengan warna sama, gagal. Kedua, komponen antarmuka dan grafik yang membawa makna — garis tepi kolom isian, ikon yang menyampaikan informasi — punya syarat 3:1 sendiri, dan pemeriksaan yang hanya melihat teks akan melewatkannya sama sekali.
Kenapa warna merek begitu sering gagal di uji ini
Palet merek dipilih demi karakternya pada bidang besar, bukan demi keterbacaan pada ukuran 16 piksel. Warna nada menengah biasanya jadi korban: oranye, tosca, atau hijau limau merek yang terlihat mantap sebagai isian tombol kerap mendarat antara 2:1 dan 3:1 di atas putih, dan itu tidak lulus apa pun. Naluri kita adalah berdebat dengan angkanya, dan angkanya tidak bergeser. Tanggapan yang produktif adalah membiarkan warna merek di tempat ia bekerja — isian, garis tepi, tipografi tampilan besar — lalu menurunkan varian yang lebih gelap untuk teks tubuh dengan menurunkan kecerahan di HSL sampai rasionya lolos, dan konverter warna membuatnya jadi pekerjaan dua langkah. Identitas ronanya tetap utuh, teksnya jadi terbaca.
Teks abu-abu adalah kegagalan paling umum di web
Teks tubuh abu-abu muda di atas putih menjadi konvensi desain karena tampak tenang dan mahal di monitor bagus dalam ruangan terang. Setelah diukur, `#999999` di atas putih sekitar 2,8:1 dan gagal AA secara terang-terangan; `#767676` kira-kira 4,5:1 dan itulah abu-abu paling muda yang lulus untuk teks normal. Selisih antara kedua kode hex itu tidak terlihat dalam sesi tinjau desain, dan menentukan bagi pembaca yang menatap ponsel di bawah cahaya siang atau yang penglihatannya sedikit menurun. Kalau sebuah mockup memakai teks abu-abu untuk membangun hierarki, solusinya biasanya ada pada ukuran dan ketebalan, bukan kecerahan — abu-abu gelap yang lebih kecil dan lebih tipis tetap terbaca sebagai sekunder tanpa jatuh di bawah ambang.
Apa yang tidak diberitahukan rasio itu
Lolos 4,5:1 adalah lantai, bukan jaminan tipografi yang baik. Rumusnya mengabaikan ukuran huruf di luar batas teks besar, mengabaikan ketebalan goresan — huruf setipis rambut pada 4,6:1 lebih sulit dibaca daripada ketebalan sedang pada rasio yang sama — dan mengabaikan pasangan warnanya sendiri. Teks merah di atas hijau lolos dengan nyaman bila kecerahannya cukup berbeda, dan tetap pilihan buruk bagi kira-kira satu dari dua belas laki-laki dengan buta warna merah-hijau, karena mereka kehilangan pembeda rona yang justru diandalkan sisa desainnya. Kontras itu perlu tapi tidak cukup: lolos dulu, baru nilai tipografinya.
Memeriksa teks di atas gambar dan gradasi
Rumusnya menerima dua warna solid, sedangkan teks yang ditaruh di atas foto atau gradasi tidak punya satu latar — ia punya latar berbeda di belakang tiap hurufnya. Pendekatan praktisnya adalah menguji terhadap titik paling terang dan paling gelap yang benar-benar dilalui teksnya; kalau salah satunya gagal, yang butuh pertolongan adalah tata letaknya, bukan warna teksnya. Penyelesaian yang lazim adalah lapisan setengah transparan antara gambar dan teks, panel solid di belakang blok teks, atau bayangan teks — semuanya secara efektif menciptakan latar yang bisa dikendalikan lalu diukur. Menguji hanya terhadap kecerahan rata-rata gambar itulah yang menghasilkan judul yang lenyap di atas potongan langit yang terang.
Kesalahan umum yang sebaiknya dihindari
- Menilai kontras dengan mata di monitor bagus dalam ruangan terang. Itu kondisi paling pemaaf yang akan dihadapi desain Anda; ambangnya ada demi pembaca yang menatap ponsel di bawah matahari atau yang penglihatannya menurun.
- Memeriksa judulnya lalu menganggap teks tubuhnya aman. Teks besar lolos di 3:1 sedangkan teks normal butuh 4,5:1 — warna yang sama bisa lulus untuk satu dan gagal untuk yang lain di halaman yang sama.
- Hanya memeriksa warna teks. Garis tepi kolom isian, cincin fokus, dan ikon yang membawa makna punya syarat 3:1 sendiri, dan audit yang hanya melihat teks melewatkan semuanya.
- Mengukur teks di atas foto terhadap kecerahan rata-rata gambar. Ujilah terhadap titik paling terang dan paling gelap yang dilalui teksnya, atau tambahkan lapisan supaya ada satu latar yang bisa diukur.
- Menganggap kelulusan sebagai akhir persoalan. 4,5:1 itu lantai — huruf setipis rambut, jarak baris yang sempit, atau pasangan merah-hijau tetap bisa sulit dibaca pada rasio yang secara teknis sudah sesuai.
Perbandingan
| KeroTools | Developer tools browser | Plugin desain | |
|---|---|---|---|
| AA dan AAA bersamaan | Ya | Umumnya AA saja | Bervariasi |
| Teks normal dan besar | Keduanya ditampilkan | Kadang | Umumnya |
| Bisa dipakai sebelum dibangun | Ya | Tidak — butuh halaman yang sudah dirender | Ya |
| Nilai dikirim ke server | Tidak pernah | Tidak | Tergantung plugin |
| Akun atau lisensi | Tidak keduanya | Tidak keduanya | Sering diperlukan |
| Biaya | Gratis | Gratis | Gratis / berbayar |
Fitur
Perhitungan rasio WCAG
Rumus luminansi relatif yang resmi, bukan perkiraan dengan mata.
Tingkat AA dan AAA
Kedua tingkat kesesuaian dinilai, jadi Anda tahu berapa banyak ruang lebih yang dimiliki pasangan itu.
Teks normal dan besar
Teks besar punya ambang lebih rendah; keduanya ditampilkan alih-alih menyerahkan pada ingatan Anda.
Contoh teks langsung
Karakter sungguhan dalam pasangan yang diuji, yang menangkap masalah yang tak terlihat dari angka semata.
Setel dan periksa ulang seketika
Geser salah satu warna dan lihat rasionya bergerak, untuk menemukan perubahan terkecil yang lulus.
Masukan HEX
Tempel kodenya langsung dari dokumen merek atau stylesheet.
Tanpa instalasi
Tidak ada yang perlu diunduh atau dipasang — jalan langsung di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan berkas dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Pengembang front-end
Menutup perdebatan warna dengan rasio terukur alih-alih diskusi panjang saat tinjau desain.
Desainer
Menemukan nada lulus terdekat dari sebuah warna merek sebelum warnanya masuk ke pustaka komponen.
Tim aksesibilitas dan kepatuhan
Mendokumentasikan pasangan mana yang memenuhi AA dan mana yang perlu diperbaiki, lengkap dengan rasionya.
Sektor publik dan pendidikan
Memenuhi syarat aksesibilitas yang merupakan kewajiban hukum, bukan sekadar preferensi.
Pertanyaan yang Sering Diajukan
WCAG AA memerlukan minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar; AAA memerlukan 7:1 dan 4.5:1.
Tidak. Semuanya berjalan lokal di browser Anda — tidak ada yang diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.