Aksesibilitas dan pemeriksaan kontras WCAG
Pratinjau mockup komponen interaktif secara langsung
Mesin simulasi buta warna
Penjelasan fitur
Verifikasi kontras WCAG
Menghitung rasio kontras secara langsung untuk kepatuhan aksesibilitas web.
Mockup UI interaktif
Pratinjau langsung pemetaan warna latar, kartu sekunder, dan tombol ajakan bertindak.
Simulator buta warna
Mensimulasikan profil penglihatan Protanopia, Deuteranopia, dan Tritanopia.
Matriks keseimbangan desain 60-30-10
Membagi warna ke dalam proporsi dominan, sekunder, dan aksen.
Ekstraktor palet gambar
Ekstrak palet warna solid langsung dari foto yang diunggah.
Ekspor token pengembang
Ekspor token untuk CSS, Tailwind JS, Figma JSON, Flutter Dart, dan SwiftUI.
Untuk apa alat ini dapat digunakan?
Pengembangan web front-end
Ekspor variabel CSS dan ekstensi Tailwind dengan kepatuhan aksesibilitas bawaan.
Pembuatan prototipe aplikasi seluler
Bangun sistem desain Flutter dan SwiftUI dengan keterbacaan tinggi.
Sistem identitas merek
Ekstrak swatch warna merek dari foto dan logo yang diunggah.
Audit aksesibilitas UI/UX
Verifikasi rasio kontras untuk desain antarmuka yang inklusif.
Informasi alat
| Jenis alat | Generator palet warna solid dan aksesibilitas |
|---|---|
| Standar aksesibilitas | Kepatuhan kontras WCAG 2.1 AA dan AAA |
| Simulasi | Protanopia, Deuteranopia, Tritanopia |
| Format ekspor | CSS, Tailwind JS, Figma JSON, Flutter, SwiftUI |
| Pemrosesan | Eksekusi 100% di sisi klien dalam browser |
Manfaat
- Tidak perlu mendaftar.
- Salin kode HEX secara instan dengan satu klik.
- Uji mockup komponen UI secara langsung.
- Pratinjau aksesibilitas bagi pengguna dengan buta warna.
Batasan
- Ekstraksi warna gambar menggunakan perkiraan pengambilan sampel piksel sRGB.
Privasi data di sisi klien
Semua perenderan gambar, perhitungan matriks warna, dan ekspor file berjalan sepenuhnya dalam sesi browser Anda.
Tanpa penyimpanan server
Gambar yang diunggah dan palet yang dibuat tidak pernah disimpan atau dikirim ke server eksternal.
Tips
- Pastikan warna tombol ajakan bertindak memiliki rasio kontras WCAG setidaknya 4,5:1 terhadap latar belakang.
Pertanyaan umum
Apa itu kepatuhan rasio kontras WCAG?
Rasio kontras WCAG mengukur keterbacaan teks terhadap latar belakangnya. Rasio minimum 4,5:1 diperlukan agar teks standar memenuhi tingkat AA.
Bagaimana cara kerja Simulator Buta Warna?
Simulator menerapkan transformasi warna matriks SVG untuk meniru kondisi penglihatan Protanopia, Deuteranopia, dan Tritanopia secara langsung.
Bisakah saya mengekstrak palet warna solid dari gambar?
Bisa. Klik tombol Ekstrak dari Foto untuk mengunggah gambar dan mendapatkan swatch warna solid yang dominan.
Apa aturan desain UI 60-30-10?
Ini aturan keseimbangan desain klasik: 60% warna latar dominan, 30% warna struktural sekunder, dan 10% warna aksen ajakan bertindak.
Apakah alat ini mengekspor token untuk Figma?
Ya. Anda dapat mengekspor token Figma JSON yang bisa langsung diimpor ke sistem desain.
Apakah kode Flutter Dart siap untuk produksi seluler?
Ya. Kode ini menghasilkan kelas AppColors yang rapi dengan konstanta Color statis.
Apa perbedaan shade dan harmoni triadik?
Shade mengubah tingkat kecerahan satu hue, sedangkan harmoni triadik memilih tiga warna yang berjarak merata pada roda warna HSL.
Apakah gambar yang diunggah disimpan di server?
Tidak. Pemrosesan gambar dilakukan sepenuhnya di memori lokal browser Anda.
Bisakah saya mengacak posisi palet yang dibuat?
Bisa. Klik tombol Acak untuk mengatur ulang penempatan warna pada komponen UI.
Apakah generator warna solid ini sepenuhnya gratis?
Ya. Semua ekspor token desain dan fitur aksesibilitas 100% gratis tanpa pendaftaran.