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
Mengubah URL / kontak / Wi-Fi / email / acara / koordinat geografis / SMS / telepon / teks menjadi gambar kode QR. Ukuran, format, warna, dan logo dapat dipilih. Berjalan sepenuhnya di browser Anda.
Undian
Mengundi secara acak 1–N item dari daftar teks atau rentang angka. Mendukung tanpa pengulangan, animasi gulungan, dan penyimpanan riwayat undian. Berjalan sepenuhnya di browser Anda.
Color Picker
Mengambil warna dari gambar untuk memperoleh kode warna. Anda dapat mengambil warna per piksel sambil memperbesar dengan loupe, dengan dukungan peralihan HEX / RGB / HSL dan ekspor palet. Berjalan sepenuhnya di browser Anda.
Konverter Kode Warna
Alat gratis untuk mengonversi kode warna HEX, RGB, HSL, HSV, dan OKLCH secara timbal balik. Mendukung RGBA, HEX 8 digit, dan HSLA dengan transparansi, mengonversi warna yang Anda masukkan ke semua format sekaligus dan menyalinnya hanya dengan satu klik. Nilai referensi CMYK juga ditampilkan. Berjalan sepenuhnya di browser Anda.
Timer Pomodoro
Timer Pomodoro online gratis yang mengulang 25 menit fokus dan 5 menit istirahat. Sebagai timer fokus untuk belajar dan bekerja, mendukung progres melingkar, suara alarm, layar penuh, dan tampilan pop-out yang selalu di depan. Berjalan sepenuhnya di browser Anda.
Konverter Satuan
Alat konversi satuan gratis untuk mengonversi berbagai satuan seperti panjang, berat, suhu, luas, volume, dan kecepatan. Konversi cm ke inci, suhu Celsius ke Fahrenheit, tsubo ke meter persegi, dan lainnya secara real-time. 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.