Simulator Buta Warna
Unggah gambar dan pratinjau tampilannya dengan protanopia, deuteranopia, tritanopia, atau buta warna total, lalu unduh hasil simulasinya.
Simulator Buta Warna — Seret sebuah gambar dan langsung lihat bagaimana tampilannya bagi seseorang dengan penglihatan buta merah (protanopia), buta hijau (deuteranopia), buta biru (tritanopia), atau buta warna total (akromatopsia). Simulasi berjalan sepenuhnya di browser kamu pada sebuah kanvas, piksel demi piksel — gambarmu tidak pernah diunggah ke server mana pun, sehingga bahkan mockup dan tangkapan layar pribadi tetap berada di perangkatmu. Pilih satu tipe, bandingkan yang asli berdampingan dengan hasilnya, lalu unduh PNG hasil simulasi.
Apa itu Simulator Buta Warna?
Simulator Buta Warna adalah alat gratis di dalam browser yang merender ulang sebuah gambar persis seperti yang akan dilihat oleh orang dengan defisiensi penglihatan warna tertentu. Alat ini mendukung tiga dikromasi umum — protanopia (kelemahan merah), deuteranopia (kelemahan hijau), dan tritanopia (kelemahan biru) — ditambah akromatopsia, tampilan sepenuhnya monokrom (skala abu-abu). Desainer, pengembang, dan peninjau aksesibilitas menggunakannya untuk memeriksa apakah bagan, status UI, warna status, dan infografik tetap masuk akal ketika hanya warna yang membawa makna. Karena kira-kira satu dari dua belas pria memiliki suatu bentuk defisiensi penglihatan warna, mensimulasikan tampilan ini sebelum rilis membantu menangkap desain yang terlalu mengandalkan kontras warna yang hilang bagi sebagian audiensmu.
Cara menggunakan Simulator Buta Warna
- Seret sebuah gambar ke area unggah, atau klik untuk memilih berkas PNG, JPG, atau WebP dari perangkatmu.
- Buka dropdown Tipe penglihatan warna dan pilih Protanopia, Deuteranopia, Tritanopia, atau Akromatopsia (pilih Tidak ada untuk melihat aslinya tanpa perubahan).
- Pratinjau simulasi diperbarui otomatis di samping aslinya sehingga kamu bisa membandingkan keduanya berdampingan.
- Klik pratinjau mana pun untuk membukanya di lightbox yang dapat diperbesar dan memeriksa detailnya dari dekat.
- Tekan Unduh untuk menyimpan gambar simulasi sebagai PNG, atau Atur ulang untuk menghapusnya dan mencoba gambar lain.
Contoh
Memeriksa lencana status merah/hijau
Unggah tangkapan layar UI yang memakai merah untuk 'error' dan hijau untuk 'success', pilih Deuteranopia, lalu perhatikan kedua warna menyatu menuju nada keruh yang serupa — pertanda kamu sebaiknya menambahkan ikon atau label alih-alih hanya mengandalkan warna.
Meninjau bagan data
Muat bagan garis multi-seri atau diagram lingkaran, berganti antara Protanopia dan Tritanopia, dan pastikan setiap seri tetap dapat dibedakan; jika garis-garisnya bercampur, sesuaikan palet atau tambahkan pola.
Uji keterbacaan skala abu-abu penuh
Pilih Akromatopsia untuk meratakan gambar hanya menjadi luminans; jika teks atau elemen kunci menghilang, desainmu bergantung pada corak alih-alih kontras kecerahan.
Pertanyaan yang sering diajukan
- Jenis buta warna apa saja yang bisa disimulasikan?
- Alat ini mensimulasikan protanopia (buta merah), deuteranopia (buta hijau), dan tritanopia (buta biru) menggunakan matriks transformasi RGB standar, ditambah akromatopsia, yang mengubah gambar menjadi skala abu-abu berbasis luminans. Memilih Tidak ada membuat gambar asli tetap tidak berubah.
- Apakah gambar saya diunggah ke server?
- Tidak. Seluruh simulasi terjadi secara lokal di browser kamu menggunakan kanvas HTML — berkas tidak pernah meninggalkan perangkatmu dan tidak ada yang dikirim ke server mana pun, jadi alat ini bekerja offline dan menjaga gambar pribadi tetap pribadi.
- Format gambar dan keluaran apa yang bisa saya gunakan?
- Kamu bisa memuat gambar raster umum seperti PNG, JPG, dan WebP. Hasil simulasi selalu diekspor sebagai PNG agar transparansi tetap terjaga jika ada.
- Seberapa akurat simulasinya?
- Alat ini memakai aproksimasi matriks warna linear yang sudah dikenal luas, sangat cocok untuk menemukan masalah ketergantungan pada warna di UI dan grafik. Ini adalah bantuan desain yang praktis, bukan alat diagnosis klinis atau medis, jadi perlakukan hasilnya sebagai panduan dan bukan reproduksi persis dari penglihatan seseorang.
- Mengapa warna hasil simulasi tampak teredam atau bergeser?
- Setiap defisiensi menghapus atau melemahkan satu respons kerucut, sehingga warna yang bergantung pada kanal tersebut bergerak menuju warna yang tersisa. Penggabungan corak-corak berbeda menjadi nada serupa itulah efek yang ingin kamu deteksi sebelum rilis.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi kartu PNG yang rapi dengan penyorotan sintaksis di browser Anda, dengan tema, latar gradien atau transparan, dan padding — tanpa unggah.
Pemeriksa Kontras Warna
Periksa rasio kontras WCAG antara warna HEX latar depan dan latar belakang serta lihat apakah lolos AA dan AAA untuk teks normal maupun besar.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala gradasi 50-950 bergaya Tailwind, dicampur ke arah putih dan hitam, setiap langkah dengan sampel dan HEX yang bisa disalin.