Kalkulator Keterbacaan Visual WCAG dan APCA

Periksa kontras nyata desain Anda dengan APCA (WCAG 3.0). Analisis bagaimana ketebalan dan ukuran font memengaruhi keterbacaan sesungguhnya. Dari rasio sederhana hingga keterbacaan perseptual.

Warna Dasar
#1E293B
#FFFFFF
Tipografi
16px
400
Perbandingan Kontras
Rasio WCAG 2.1 21.00 Lulus AAA
APCA Lc (WCAG 3) 100 Sangat Baik
Pratinjau Perseptual

Keterbacaan visual bukan sekadar matematika. Ini adalah cara cahaya dan bayangan berinteraksi dengan mata Anda.

Rekomendasi APCA
Teks Bacaan (Body)
Teks Kecil / Keterangan
UI / Tombol
Studio Utilitas

Ingin utilitas ini di situs Anda?

Sesuaikan warna dan mode gelap untuk WordPress, Notion, atau situs Anda sendiri.

Mulai Sekarang

Pertanyaan yang Sering Diajukan

Apa itu APCA dan mengapa berbeda dari WCAG 2.1?

APCA adalah Advanced Perceptual Contrast Algorithm yang dikembangkan untuk WCAG 3.0. Berbeda dengan rasio sederhana lama, APCA menggunakan model matematis yang meniru cara otak manusia mempersepsikan kontras, dengan mempertimbangkan polaritas (latar terang vs. gelap) serta ukuran dan ketebalan font.

Apa arti nilai Lc?

Lc (Lightness Contrast) adalah nilai kontras yang dihasilkan oleh APCA. Nilai 100 mewakili kontras maksimum ideal, sementara nilai di bawah 60 mulai kritis untuk teks bacaan panjang. Ini adalah skala magnitudo persepsi absolut.

Bagaimana ketebalan font memengaruhi keterbacaan?

Font tipis (Thin/Light) membutuhkan kontras yang jauh lebih tinggi agar dapat dibaca. APCA memberikan penalti pada font berbobot rendah, menunjukkan bahwa desain yang lolos WCAG dengan font bobot 100 bisa saja tidak terbaca dalam praktiknya.

Apakah kalkulator ini menjaga privasi?

Ya, semua perhitungan dilakukan secara lokal di browser Anda. Warna dan pengaturan yang Anda analisis tidak pernah dikirim ke server mana pun, sehingga privasi proyek desain Anda sepenuhnya terjaga.

# Kalkulator Keterbacaan Visual (WCAG vs APCA)

Pahami bagaimana warna dan tipografi Anda memengaruhi keterbacaan nyata dengan standar aksesibilitas perseptual terbaru. WCAG 2.1 menggunakan rumus matematis sederhana dari tahun 2008. APCA adalah model baru yang diusulkan untuk WCAG 3.0 yang meniru persepsi manusia.

# Poin Utama APCA

  • Polaritas: Memahami bahwa Dark Mode dipersepsikan berbeda dari Light Mode.
  • Ketebalan Font: Menetapkan tingkat kontras (Lc) spesifik berdasarkan bobot tipografi.
  • Linearitas: Memperbaiki ketidakakuratan matematis dalam model luminansi relatif tahun 2008.

# Level APCA yang Direkomendasikan

  • Lc 90+: Ideal untuk teks sangat kecil atau berbobot rendah.
  • Lc 75: Standar untuk teks bacaan utama (body).
  • Lc 60: Minimum untuk konten berukuran sedang yang terbaca.
  • Lc 45: Minimum untuk elemen besar atau dekoratif.

Referencias Bibliográficas

Alat lainnya dari Pengembangan Web

Format dan Validasi JSON Online Gratis

Alat online gratis untuk memformat, memvalidasi, dan memperbaiki kode JSON. Mempercantik dan memformat JSON. Mendeteksi kesalahan sintaksis dan meningkatkan keterbacaan kode.

Gunakan Alat

Konverter SVG ke CSS dan Data URI Online Gratis

Ubah ikon dan vektor SVG Anda menjadi kode CSS (Background atau Mask) atau Data URI terkompresi. Optimalkan performa situs web Anda dengan menghilangkan permintaan HTTP eksternal.

Gunakan Alat

Kalkulator Rasio Aspek dalam Piksel. Proporsi Online

Hitung resolusi gambar, video, dan desain web baru sambil tetap mempertahankan proporsi yang tepat untuk menghindari distorsi grafis. Mendukung format 16:9, 4:3, 21:9, dan khusus.

Gunakan Alat

Generator Gambar Placeholder. Buat Mockup Web dengan Cepat

Buat gambar placeholder kustom untuk desain web Anda. Atur resolusi, warna latar, teks, lalu ekspor dalam format PNG, WebP, atau JPEG secara instan.

Gunakan Alat

Pengode dan Pendekode URL Online

Konversikan karakter khusus dari tautan apa pun ke dalam format aman (Percent-Encoding) atau kembalikan ke keadaan aslinya yang dapat dibaca secara instan dan lokal.

Gunakan Alat

Hapus CSS Duplikat Online. Satukan dan Bersihkan Stylesheet Anda

Alat gratis untuk membersihkan dan membuang kode CSS duplikat. Menyatukan selektor yang redundan, menghormati aturan cascade, dan langsung memperkecil ukuran file di browser.

Gunakan Alat

Konverter CSS ke Inline HTML untuk Email

Ubah stylesheet dan kelas CSS Anda menjadi style inline yang langsung tertanam dalam HTML. Cocok untuk newsletter, email transaksional, dan tata letak web yang kompatibel lintas platform.

Gunakan Alat

Kalkulator Spesifisitas CSS Online. Visualisator Bobot Selektor

Hitung spesifisitas dan bobot tepat dari selektor CSS apa pun. Alat visual untuk memahami aturan CSS mana yang menang dalam kaskade dan menghindari penggunaan !important.

Gunakan Alat

Generator Ekspresi Cron Online. Penerjemah dan Visualisator

Alat visual gratis untuk menghasilkan ekspresi Linux Cron. Menerjemahkan * * * * * ke dalam bahasa manusia dan menampilkan 5 eksekusi berikutnya secara real time.

Gunakan Alat

Visualizer Kode Tombol Keyboard Online. KeyCode Inspector

Alat online gratis untuk melihat event.key, event.code, event.which, dan lokasi setiap tombol keyboard secara real time. Menghasilkan cuplikan kode JavaScript siap pakai.

Gunakan Alat

Kalkulator Biaya LLM. Estimator Harga Model AI

Alat online gratis untuk memperkirakan biaya pemanggilan API model bahasa besar. Bandingkan GPT-4o, Claude, Gemini, Llama, dan lainnya dengan harga token nyata per satu juta token.

Gunakan Alat

Skala Tipografi Musikal. Kalkulator Skala Modular

Alat online gratis untuk menciptakan hierarki visual yang harmonis menggunakan skala modular berbasis proporsi musikal. Menghasilkan variabel CSS siap pakai untuk desain web Anda.

Gunakan Alat

Generator Mockup Mobile untuk App Store. iPhone dan Google Pixel

Buat presentasi profesional untuk App Store dan Google Play. Mockup iPhone dan Pixel dengan latar belakang khusus, tata letak panoramik, dan ekspor massal resolusi tinggi.

Gunakan Alat

Generator Hash Keamanan Online

Hitung hash MD5, SHA-1, SHA-256, dan SHA-512 secara instan. Alat keamanan gratis, pribadi, dan sangat cepat untuk pengembang. 100% Sisi Klien.

Gunakan Alat

Perpustakaan Prompt AI Pribadi

Atur, beri label, dan simpan prompt ChatGPT, Midjourney, dan Claude secara pribadi. Bank prompt milikmu sendiri di localStorage.

Gunakan Alat

Konverter Warna Online RGB HEX dan HSL

Konversikan warna antara RGB, HEX, dan HSL secara instan. Hasilkan harmoni warna komplementer dan analisis kontras WCAG. 100% sisi klien dan pribadi.

Gunakan Alat

Pembersih SVG Online

Optimalkan dan bersihkan SVG yang diekspor dari Figma, Adobe Illustrator, atau Inkscape. Hapus metadata, atribut yang tidak perlu, dan grup kosong untuk menghasilkan SVG siap produksi.

Gunakan Alat

Generator Parameter UTM untuk Google Analytics

Buat tautan pelacakan yang presisi untuk kampanye pemasaran digital Anda. Dioptimalkan untuk Google Analytics dan alat analisis lainnya.

Gunakan Alat

Pembersih Tracking URL: Hapus UTM, FBCLID dan GCLID

Hapus otomatis parameter pelacakan dan iklan dari URL Anda. Bagikan tautan yang bersih dan lindungi privasi digital Anda seketika.

Gunakan Alat

Inspektur Sertifikat SSL/TLS Online Lihat File PEM dan CRT

Analisis file sertifikat SSL (.pem, .crt, .der) secara lokal. Periksa tanggal kedaluwarsa, penerbit, subjek, dan sidik jari SHA-256 tanpa data Anda meninggalkan browser.

Gunakan Alat

Generator Security.txt RFC 9116

Buat file security.txt profesional Anda untuk memudahkan pelaporan kerentanan dan memenuhi standar keamanan web internasional.

Gunakan Alat

Kalkulator Waktu Data: Dampak Kecepatan Web

Temukan berapa banyak waktu hidup yang hilang dari pengguna Anda saat menunggu situs web Anda dimuat pada koneksi 3G, 4G, dan 5G. Hitung dampak nyata dari berat situs Anda.

Gunakan Alat

Pembuat Kode Konverter Tabel Excel dan CSV ke HTML

Konversikan data Excel atau CSV Anda ke tabel HTML semantik yang bersih secara instan. Alat gratis untuk pengembang dan pembuat konten.

Gunakan Alat