Lainnya
Pemeriksa Kontras
Pemeriksa Kontras adalah alat untuk menentukan warna latar depan (warna teks) dan warna latar belakang, lalu menghitung rasio kontras keduanya secara real-time dan menilai apakah skema warna tersebut memenuhi kriteria aksesibilitas WCAG (Web Content Accessibility Guidelines) 2.1 / 2.2. Hasil pemeriksaan rasio kontras ditampilkan dalam ukuran besar seperti 4.5:1, sehingga sebagai pemeriksa skema warna Anda dapat memastikan aksesibilitas pewarnaan dalam sekejap.
Pratinjau
Anda dapat memeriksa tampilan teks berukuran normal.
Tampilan teks besar
Contoh komponen UIPenilaian WCAG 2.1 / 2.2
| Kategori | AA? | AAA? |
|---|---|---|
| Teks normal | Lulus4.5:1 | Lulus7:1 |
| Teks besar (18pt / 14pt tebal ke atas) | Lulus3:1 | Lulus4.5:1 |
| Komponen UI & grafik | Lulus3:1 | Tidak diatur |
Simulasi buta warna?
Tampilan merupakan perkiraan berdasarkan metode Brettel 1997 dan tidak menjamin tampilan nyata pada tiap individu.
Seluruh perhitungan dilakukan di dalam browser yang Anda gunakan, dan warna yang Anda masukkan tidak dikirim ke server eksternal.
Alat Terkait
Pembuat Kode QR
Buat kode QR untuk URL, Wi-Fi, email, SMS, telepon, kontak, dan acara. Atur ukuran, warna, logo; QR tanpa kedaluwarsa. Berjalan sepenuhnya di browser Anda.
Undian
Pilih 1–N secara acak dari daftar nama atau rentang angka, dengan mode tanpa pengulangan, animasi gulungan, dan riwayat. Berjalan sepenuhnya di browser Anda.
Timer Pomodoro
Timer Pomodoro online gratis: siklus fokus 25/5 menit, progres melingkar, alarm, layar penuh, dan jendela pop-out. Berjalan sepenuhnya di browser Anda.
Color Picker
Ambil warna dari gambar dan dapatkan kode HEX, RGB, atau HSL. Perbesar dengan loupe untuk akurasi per piksel dan ekspor palet. Gratis, tanpa daftar.
Konverter Kode Warna
Konversi kode warna antara HEX, RGB, HSL, HSV, OKLCH, beserta alpha dan referensi CMYK. Salin format apa pun sekali klik. Berjalan sepenuhnya di browser Anda.
Konverter Satuan
Konversi satuan panjang, berat, suhu, luas, volume, dan kecepatan — cm ke inci, °C ke °F, kg ke pound, dan lainnya. Berjalan sepenuhnya di browser Anda.
Apa itu alat Pemeriksa Kontras?
Pemeriksa Kontras adalah alat untuk menentukan warna latar depan (warna teks) dan warna latar belakang, lalu menghitung rasio kontras keduanya secara real-time dan menilai apakah skema warna tersebut memenuhi kriteria aksesibilitas WCAG (Web Content Accessibility Guidelines) 2.1 / 2.2. Hasil pemeriksaan rasio kontras ditampilkan dalam ukuran besar seperti 4.5:1, sehingga sebagai pemeriksa skema warna Anda dapat memastikan aksesibilitas pewarnaan dalam sekejap.
Selain memasukkan warna melalui input teks kode HEX, Anda dapat menentukan warna dengan color picker, atau pada browser yang mendukung, mengambil warna langsung dari layar dengan pipet (EyeDropper API). Penilaian ditampilkan untuk lulus atau tidaknya kriteria AA dan AAA pada tiga kategori: "teks normal", "teks besar (18pt / 14pt tebal ke atas)", dan "komponen UI & grafik". Ambang batasnya adalah AA 4.5 dan AAA 7 untuk teks normal, AA 3 untuk teks besar, serta 3 untuk komponen UI (rasio kontras aa / rasio kontras wcag).
Lebih jauh, apabila kriteria belum terpenuhi, alat ini menyarankan secara otomatis warna terdekat yang memenuhi kriteria dengan menyesuaikan luminans, dan dapat diterapkan hanya dengan satu klik. Pada simulasi buta warna, Anda dapat membandingkan tampilan pada tipe P, tipe D, dan tipe T secara berdampingan, sementara nilai Lc dari APCA (indikator berbasis persepsi yang diperkirakan akan diadopsi dalam WCAG 3.0) turut dicantumkan sebagai referensi. Tersedia pula pratinjau tampilan nyata pada skema warna yang Anda tentukan.
Seluruh perhitungan dilakukan di dalam browser yang Anda gunakan, dan warna yang Anda masukkan tidak dikirim ke server eksternal. Dapat langsung dipakai tanpa pendaftaran akun.
Cara penggunaan
- Tentukan warna latar depan (warna teks) dan warna latar belakang melalui salah satu dari input HEX, color picker, atau pipet.
- Rasio kontras dihitung secara otomatis dan ditampilkan dalam ukuran besar.
- Periksa kelulusan kriteria AA dan AAA pada tiga kategori WCAG (teks normal, teks besar, komponen UI).
- Jika kriteria belum terpenuhi, klik warna lulus yang disarankan untuk diterapkan pada warna latar depan atau latar belakang.
- Periksa tampilan nyata melalui pratinjau, dan bandingkan pula tampilan pada tipe P, tipe D, dan tipe T melalui simulasi buta warna.
- Bila perlu, balik warna latar depan dan latar belakang dengan tombol tukar.
Skenario penggunaan
- Pembuat web atau aplikasi yang ingin memastikan warna teks dan warna latar belakang memenuhi kriteria aksesibilitas WCAG.
- Desainer yang ingin memeriksa apakah skema warna pada mockup desain memiliki rasio kontras 4.5 ke atas sebelum dipublikasikan.
- Front-end engineer yang ingin memastikan komponen UI seperti tombol dan ikon memenuhi 3:1.
- Pengguna yang ingin memastikan melalui simulasi apakah skema warna mudah dibedakan juga bagi pengguna dengan buta warna.
- Pengguna yang ingin menyesuaikan skema warna yang tidak lulus menjadi warna yang memenuhi kriteria dengan cepat tanpa banyak mengubah nuansa warnanya.
- Pengguna yang ingin mempertimbangkan aksesibilitas skema warna sembari merujuk pula pada indikator baru seperti APCA.
Hal yang perlu diperhatikan
- Rasio kontras mengacu pada definisi WCAG 2.x (dihitung dengan (L1+0.05)/(L2+0.05) dari luminans relatif). Ambang batas penilaian adalah teks normal AA 4.5 / AAA 7, teks besar AA 3 / AAA 4.5, dan komponen UI & grafik 3.
- "Teks besar" merujuk pada ukuran 18pt (sekitar 24px) ke atas, atau teks tebal 14pt (sekitar 18.66px) ke atas.
- Komponen UI & grafik hanya diatur dengan 3:1 pada WCAG 1.4.11 dan tidak memiliki kriteria AAA (ditampilkan sebagai "tidak diatur" pada tabel).
- APCA (Advanced Perceptual Contrast Algorithm) adalah indikator yang dirujuk dalam draf WCAG 3.0, dan pada alat ini dicantumkan sebagai nilai referensi (Lc). Untuk penilaian kelulusan resmi, gunakan rasio WCAG 2.x.
- Simulasi buta warna merupakan perkiraan berdasarkan metode Brettel 1997, dengan tingkat keparahan dihitung pada maksimum (dikromasi). Tampilan nyata berbeda-beda pada tiap individu dan hal ini tidak menjamin tampilan yang sebenarnya.
- Seluruh perhitungan dilakukan sepenuhnya di dalam browser, dan warna yang Anda masukkan tidak dikirim ke luar.