Panduan
Cara menyelesaikan pekerjaannya, dan apa yang kami ukur saat membangun alat yang melakukannya.
Warna
Cara konversi HEX ke RGB, HSL, dan OKLCH, serta mana yang ditempel di mana
Notasi warna untuk tiap tujuan: HEX untuk CSS, HEX tanpa pagar untuk Figma, RGB untuk transparansi, OKLCH untuk token, dan mengapa CMYK hanya titik awal.
Cara membuat palet warna yang benar-benar bisa dipakai untuk teks
Kontras warna terhadap putih dikali kontras terhadap hitam selalu 21, jadi setiap warna lolos di salah satunya. Cara membuat palet yang saling cocok.
Cara membuat skala warna Tailwind kustom yang lolos uji kontras
Buat skala sebelas langkah Tailwind, ekspor ke @theme v4 atau config v3, dan lihat langkah yang lolos kontras di putih, hitam, dan komponen.
Cara mengambil palet warna dari foto, dan memastikan warnanya bisa dipakai untuk teks
Ambil palet dari foto tanpa diunggah: cara kerja Dominant, Distinct, dan Accessible, dan mengapa warna foto sering gagal jadi teks di atas putih.
Cara mengubah satu warna brand menjadi design token, 50 sampai 950
Satu hex brand jadi ramp sebelas tingkat dan role token: tingkat untuk teks, border, surface, kenapa hex Anda tak ada di sana, dan apa yang diekspor.
Warna komplementer, triadik, dan analog: cara membuat setiap harmoni tetap terbaca
Komplementer 180°, triadik 120°, analog ±30°. Semua relasi hue, jadi tak satu pun menjamin kontras. Cara membuat tiap harmoni dan menjaga teks terbaca.
Berapa rasio kontras warna yang sebenarnya Anda butuhkan?
Panduan praktis 4.5:1, 3:1, dan 7:1: mana yang berlaku di mana, apa yang termasuk teks besar, dan aturan yang paling sering disalahpahami.
Cara membuat palet warna aksesibel dari satu warna brand
Ubah satu kode hex brand menjadi sistem lengkap: ramp kecerahan, token semantik, serta varian terang dan gelap yang semuanya lolos uji kontras.
Cara membuat palet warna yang aman untuk buta warna
Pasangan warna mana yang bertahan pada buta warna, mana yang menyatu, dan cara membuat palet kategori yang bisa dibedakan semua orang.
Cara memperbaiki kontras warna tanpa mengubah warna brand Anda
Kontras ditentukan oleh kecerahan, bukan hue. Geser warna brand Anda di sumbu kecerahannya sendiri: tetap terasa seperti brand Anda dan lolos WCAG.
Pasang pengecekan kontras warna di CI agar build gagal
Review kontras manual tidak bisa diskalakan dan sering dilewati saat dikejar tenggat. Begini cara menguji design token Anda lewat test suite.
Kontras dark mode: mengapa WCAG 2 menyesatkan Anda
Rumus WCAG 2 menambahkan konstanta flare tetap yang mendominasi di ujung gelap, sehingga pasangan dark mode bisa mencatat rasio lolos namun tetap redup.
Mengapa 83.9% situs web gagal dalam kontras warna
Survei tahunan WebAIM: kegagalan kontras di 83.9% dari sejuta beranda teratas, naik dari 79.1%. Semua desainer punya checker. Kenapa justru makin buruk?
Mengapa teks isi 14px tidak akan pernah lolos APCA
Menurut APCA, teks 14px regular tak layak pakai pada kontras berapa pun, termasuk hitam pekat di atas putih. Ini alasannya dan solusinya.
OKLCH untuk desainer: mengapa OKLCH menggantikan HSL
Kecerahan HSL menipu. OKLCH seragam secara persepsi, jadi langkah yang sama terlihat sama: ruang yang tepat untuk ramp warna dan memperbaiki kontras.
Warna status Bootstrap dan Tailwind gagal bagi pengguna buta warna
Kami mengukur warna status merah dan hijau bawaan Bootstrap dan Tailwind dengan simulasi buta warna. Keduanya menyatu hingga nyaris identik.
WCAG 2 vs APCA: standar kontras mana yang sebaiknya Anda pakai di 2026?
WCAG 2 adalah acuan hukum. APCA lebih baik memprediksi keterbacaan. Inilah bedanya, di mana keduanya tidak sepakat, dan mana yang harus Anda ikuti.
Tipografi
Cara membuat skala tipografi fluid dengan CSS clamp()
Hitungan clamp() untuk skala tipografi fluid, lengkap dari 16px ke 19px, plus cek cap-height dan panjang baris yang tidak bisa dilakukan clamp().
Mengapa 16px tidak selalu 16px: x-height di 872 keluarga font
x-height 872 keluarga font: 0.351 hingga 0.84 em, median 0.500, 19% lebih dari 10% di bawah acuan APCA. Setara Helvetica 16px: 14.6 hingga 20.3 px.
Merek
Cara membuat brand guidelines satu halaman, lengkap dengan pasangan warna yang lolos
Isi brand sheet satu halaman, dan cara membuat matriks kombinasinya: empat warna menghasilkan 12 pasangan, masing-masing AA, teks besar saja, atau gagal.
Ukuran favicon: file yang benar-benar Anda butuhkan dan cara membuatnya
File favicon yang Anda butuhkan: satu ICO, enam PNG dari 16 hingga 512 piksel, manifest, dan empat tag head, plus cek apakah logo Anda terbaca di 16px.
Seberapa besar logo boleh menutupi kode QR? Kami mengukurnya
Semua generator bilang 30%. Sekitar 5 000 percobaan decode menunjukkan batas sebenarnya 4% di level L dan 19% di level H, bukan 30%. Ini datanya.
Penulisan
Cara ekstrak teks dari PDF, dan mengapa sebagian PDF tidak menghasilkan apa-apa
Ambil teks dari PDF di browser Anda. PDF hasil scan kosong: tidak punya lapisan teks, dan alat ini tidak melakukan OCR. Kolom bisa tercampur.
Cara melihat dan menghapus nama penulis serta metadata lain di PDF
Lihat dan hapus judul, penulis, dan subjek PDF tanpa mengunggahnya, serta apa yang tetap tersisa: kata kunci, creator, tanggal, dan paket XMP.
Cara memberi password pada PDF tanpa mengunggahnya
Enkripsi PDF dengan AES-256 di browser Anda sehingga kata sandi tidak pernah sampai ke server. User dan owner password, RC4, serta cara qpdf dan Preview.
Cara memberi watermark pada PDF, dan apa yang bisa dan tidak bisa dicegahnya
Cap DRAFT atau nama di setiap halaman PDF langsung di browser, dengan opacity dan sudut yang pas, dan mengapa watermark tidak bisa mengunci file.
Cara memisahkan PDF menjadi beberapa file atau mengambil rentang halaman tertentu
Ambil halaman 3 sampai 7 ke satu file, potong dokumen jadi bagian sama besar, atau simpan tiap halaman terpisah, semuanya di browser, dengan batasannya.
Cara memotong margin PDF, dan mengapa crop menyembunyikan, bukan menghapus
Pangkas margin PDF dalam satuan poin, langsung di browser. Crop memindahkan CropBox dan membiarkan MediaBox serta isinya, jadi crop bukan redaksi.
Cara memutar PDF dan menyimpannya dengan posisi yang benar
Putar halaman PDF yang miring dan simpan rotasinya ke file, bukan hanya di tampilan. Cara rotasi disimpan, penyebab kesalahannya, serta Preview dan qpdf.
Cara menambahkan nomor halaman di PDF, mulai dari halaman mana pun
Beri nomor halaman PDF di browser, sampul tetap bersih, mulai dari angka berapa pun; halaman awal dan angka pertama diatur terpisah.
Cara menggabungkan foto atau hasil scan menjadi satu PDF
Gabungkan foto JPEG atau PNG jadi satu PDF tanpa unggah: atur urutan, pilih A4 atau sesuai gambar, dan hindari halaman menyamping atau kebesaran.
Cara menghilangkan password PDF yang sudah bisa Anda buka
Hapus password PDF yang bisa Anda buka, di browser. Alasan alat ini butuh kata sandinya, isi salinannya, serta cara Preview dan qpdf.
Cara mengubah halaman PDF ke JPG dengan resolusi yang tepat
PDF ke JPG di 72, 150, atau 300 dpi: ukuran piksel tiap pilihan untuk halaman A4 (2480 × 3508 di 300) dan mengapa 300 punya piksel empat kali lipat 150.
Cara mengubah PDF ke Markdown untuk catatan atau chat AI
Ubah PDF ke Markdown dengan heading per halaman untuk catatan atau chat AI, dan apa yang hilang: tabel, daftar, serta heading di dalam halaman.
Cara mengubah urutan dan menghapus halaman PDF
Ubah urutan halaman PDF dengan menyeret, hapus dengan sekali klik, dari thumbnail di browser Anda, lalu cek nomor barunya sebelum menyimpan.
Seberapa besar penghematan kompresi PDF lossless, diukur pada sebelas file
Kompresi PDF lossless pada sebelas file: teks menyusut 0.8% hingga 6.5%, gambar di bawah 0.05%, dan halaman terhapus tetap ada sampai kami memperbaikinya.
Mengapa menggabungkan PDF terenkripsi bisa menghasilkan halaman kosong, hasil pengukuran
PDF AES-256 digabungkan lewat pdf-lib upstream dan lewat @cantoo/pdf-lib: satu menghasilkan tiga halaman kosong dan 49 karakter, yang lain: dokumen utuh.
Video & audio
Cara mengambil audio dari video menjadi MP3, tanpa mengunggahnya
Ambil suara dari MP4, MOV, WebM, atau MKV sebagai MP3 di browser apa pun. Mengapa file di atas 13 menit ditolak, bitrate mana yang dipilih, dan ffmpeg.
Memotong video tanpa encode ulang: di titik mana potongan benar-benar dimulai
Enam file diukur: potongan copy-only mulai rata-rata 4.06 s lebih awal di default x264, 0.46 s di interval 1 s; edit list menyembunyikan frame ekstra.
Video ke GIF: byte per piksel per frame, hasil pengukuran
50 frame pada 480 × 270: foto bergerak butuh 0.644 byte per piksel per frame sebagai GIF, 53 kali H.264; rekaman layar 0.111, 5.4 kali.
Konverter
Cara crop, putar, dan ubah ukuran gambar sekaligus tanpa kehilangan ketajaman
Crop, putar, ubah ukuran, lalu encode sekali. Mengapa alat terpisah menambah encode, pengecilan besar jadi buram, dan apa yang dilakukan Lanczos3.
Cara kompres PNG tanpa mengurangi kualitas sedikit pun
oxipng menjaga setiap piksel identik, namun memangkas grafis datar dari 21 493 ke 3 350 byte dan foto 14%. Inilah yang bisa dijanjikan lossless.
Cara membuat GIF animasi dari gambar, dan menjaga ukuran filenya tetap kecil
GIF menyimpan setiap frame secara utuh, jadi ukurannya = piksel × frame × biaya yang ditentukan gambar. Buat GIF dan lihat bobotnya sebelum ekspor.
Cara memperbesar gambar tanpa pecah dan buram, serta batas kemampuan upscaling
Perbesar dengan Lanczos3, bandingkan dengan scaler browser di gambar Anda, dan berhenti di 4×: pada 2×, tiga dari empat piksel hasil interpolasi.
Cara memperkecil ukuran file SVG tanpa merusaknya
Kecilkan SVG dengan SVGO tanpa merusaknya: kurangi presisi koordinat, pertahankan viewBox dan title, periksa id, dan nilai dari ukuran gzip.
Cara mengubah gambar menjadi data URI base64, dan kapan sebaiknya tidak
Base64 menambah sepertiga ukuran file, dan salinan inline tak pernah di-cache sendiri. Cara membuat data URI, dan batas 4 KB tempat ia tak lagi untung.
Mengapa konverter piksel ke inci memberi hasil berbeda, dan jawaban mana yang Anda butuhkan
1920 piksel yang sama adalah 20 inci di CSS, 26.67 di 72 ppi, dan 6.4 di 300 ppi. Mengapa konverter berbeda, dan cara memilih arti yang Anda butuhkan.
PNG ke WebP: seberapa besar penghematannya, diukur pada sebelas gambar
PNG ke WebP pada kualitas 0.82 di Chromium: foto menyusut 92% hingga 97%, logo datar 69%, dan ikon di bawah 128 px membesar, hingga 116% di 16 px.