Color Tools

Alat Banding Warna dan Pemeriksa Kontras WCAG

Alat perbandingan warna lengkap untuk desainer dan developer. Evaluasi kontras teks dan latar, periksa kepatuhan WCAG 2.1, simulasikan defisiensi penglihatan warna, dan buat penyesuaian warna yang lebih aksesibel.

Background A / Text B

Sample Heading

The quick brown fox jumps over the lazy dog.

Background B / Text A

Sample Heading

The quick brown fox jumps over the lazy dog.

Rasio Kontras

6.83 : 1

✓ Legible for text

Teks Normal (AA/AAA):AA Pass
Teks Besar (AA/AAA):AA Pass
Perbedaan Visual (Delta E)241.46

Pratinjau Mockup UI Interaktif

App Navigation Header

This live preview renders how body copy, border lines, and interactive button components look when pairing Color A as background and Color B as foreground element.

Ekspor Kode Developer
:root {
  --color-a: #1E293B;
  --color-b: #38BDF8;
  --contrast-ratio: 6.83;
}

Mengapa menggunakan alat ini?

Mengapa menggunakan alat ini?

Memilih kombinasi warna yang aksesibel penting untuk memenuhi standar web modern. Alat ini membantu Anda mengambil keputusan dengan rasio kontras yang dihitung secara akurat, pengukuran jarak visual, dan pratinjau UI langsung.

Cara menggunakannya

Cara menggunakannya

  1. Langkah 1

    Masukkan kode warna

    Pilih atau tempel kode Hex/RGB ke kolom masukan Warna A dan Warna B.
  2. Langkah 2

    Analisis kontras dan WCAG

    Periksa Rasio Kontras yang dihitung dan indikator kepatuhan WCAG AA/AAA.
  3. Langkah 3

    Uji simulasi dan ekspor

    Periksa tab pratinjau buta warna dan salin variabel CSS yang dihasilkan untuk proyek Anda.

Perbandingan Visual dan Teknis Berdampingan

Masukkan dua nilai warna dalam format Hex, RGB, atau HSL untuk menganalisis hubungan teknisnya. Alat ini menghitung metrik kontras berdasarkan panduan WCAG serta jarak perseptual menggunakan ilmu warna matematis.

Simulasi Defisiensi Penglihatan Warna dan Pratinjau UI

Lihat tampilan pasangan warna pilihan Anda bagi pengguna dengan protanopia, deuteranopia, atau tritanopia. Pratinjau komponen langsung menunjukkan tampilan pasangan teks dan latar pada tombol, kartu peringatan, dan tipografi.

Penjelasan fitur

Matriks Kontras WCAG 2.1

Menghitung rasio kontras secara tepat dari 1:1 hingga 21:1 serta menampilkan status lulus atau gagal tingkat AA dan AAA untuk keterbacaan teks.

Perbedaan Perseptual Delta E

Mengukur jarak warna secara matematis untuk mengetahui apakah mata manusia melihat dua nuansa sebagai warna yang berbeda.

Simulator Penglihatan Warna

Mensimulasikan persepsi warna protanopia, deuteranopia, dan tritanopia secara langsung.

Perbaikan Aksesibilitas Otomatis

Menyesuaikan tingkat kecerahan dengan sekali klik untuk mencapai kepatuhan WCAG AA.

Untuk apa alat ini dapat digunakan?

Audit Aksesibilitas Web

Pastikan teks tombol dan warna latar memenuhi panduan WCAG sebelum situs diluncurkan.

Evaluasi Palet Merek

Bandingkan warna utama merek dengan pilihan warna aksen sekunder untuk menilai keterbacaan dan keseimbangan visual.

Informasi alat

Format yang didukungHex, RGB, HSL
Standar kepatuhanWCAG 2.1 (AA dan AAA)
Mesin jarak warnaCIE76 / Delta E perseptual
Pemrosesan100% di browser

Manfaat

  • Dapatkan hasil pemeriksaan kepatuhan WCAG secara instan.
  • Gunakan mode pratinjau defisiensi penglihatan warna untuk desain UX yang aksesibel.
  • Buat variabel CSS dan Tailwind dengan sekali klik.

Batasan

  • Perhitungan didasarkan pada rendering ruang warna sRGB standar.

Pemrosesan Lokal dan Privat

Semua perhitungan kontras dan transformasi ruang warna berlangsung secara lokal di browser tanpa mengunggah data.

Kebijakan Privasi

Nilai warna yang dibandingkan dan konfigurasi pratinjau Anda tidak dicatat, dilacak, atau disimpan.

Tips

  • Usahakan rasio kontras minimal 4,5:1 untuk teks isi normal agar memenuhi standar WCAG AA.
  • Gunakan tombol Tukar untuk membalik pasangan warna latar depan dan latar belakang dengan cepat.

Pertanyaan umum

Berapa rasio kontras WCAG yang baik untuk teks isi?

Teks normal memerlukan rasio minimal 4,5:1 agar memenuhi standar WCAG AA. Untuk kepatuhan AAA, rasio yang diperlukan adalah 7:1.

Apa arti nilai Delta E?

Delta E mengukur perbedaan warna yang dapat dipersepsikan. Nilai di bawah 1,0 tidak terlihat oleh mata manusia, sedangkan nilai di atas 5,0 menunjukkan warna yang jelas berbeda.

Apakah alat perbandingan ini gratis digunakan?

Ya. Alat ini sepenuhnya gratis, tanpa batas penggunaan, dan tidak memerlukan pendaftaran.

Alat terkait

Alat terkait

Roda Warna

Klik bagian mana pun pada roda untuk memilih warna, tentukan hubungan warna lainnya, lalu buat palet yang dapat disalin sebagai kode HEX atau variabel CSS. Semua pemrosesan berlangsung di browser—tidak ada data yang diunggah.

Generator Palet Warna Solid

Buat palet warna solid dengan harmoni matematis, periksa rasio kontras WCAG secara langsung, simulasikan buta warna, dan ekspor token pengembang untuk CSS, Tailwind, Flutter, serta Figma.

Generator Warna Acak dengan Roda Warna

Tekan tombol atau spasi untuk mendapatkan warna acak baru. Kunci warna yang disukai dan acak ulang sisanya. Setiap warna menampilkan nilai HEX, RGB, dan HSL; seluruh palet dapat disalin sebagai kode atau disimpan sebagai file SVG. Palet dibuat di browser.

Generator Pencampur Warna

Buat nuansa warna khusus dengan mudah menggunakan alat pencampur warna online ini. Padukan dua atau lebih kode warna HEX atau RGB, sesuaikan persentase campuran, dan lihat hasil warna secara langsung.

Generator palet dari gambar

Unggah foto untuk menemukan warna dominan, warna aksen, dan nuansa lembut. Salin kode untuk berbagai bahasa atau unduh gambar dan file palet.

Piksel Warna Imej Dalam Talian

Muat naik foto anda untuk menggunakan alat piksel warna imej dalam talian kami. Halakan dan klik di mana-mana sahaja pada kanvas imej untuk memilih nilai piksel yang tepat menggunakan penetes mata interaktif. Dapatkan kod warna Hex, RGB, HSL dan CSS segera terus di dalam pelayar anda.