Pemeriksa Kontras Warna - Cek Rasio WCAG AA dan AAA

Pemeriksa Kontras Warna untuk Aksesibilitas WCAG

Pemeriksa Kontras Warna mengukur rasio kontras antara warna teks dan latarnya, lalu langsung memberi tahu Anda apakah pasangan tersebut lolos WCAG AA dan AAA. Alat ini dibuat untuk desainer dan pengembang yang ingin antarmuka mudah dibaca dan aksesibel tanpa harus menebak-nebak.

Masukkan warna latar depan (teks) dan warna latar belakang lewat pemilih warna atau kode HEX, dan rasionya akan diperbarui secara langsung beserta badge lolos/gagal untuk teks normal, teks besar, dan komponen UI. Ketika sebuah pasangan kurang memadai, pemeriksa ini menawarkan alternatif yang aksesibel dan mensimulasikan tampilan warna bagi orang dengan gangguan penglihatan warna.

Privasi terjaga: setiap perhitungan berjalan di peramban Anda. Warna Anda tidak pernah diunggah, dilacak, atau disimpan di server.

Cara Memeriksa Kontras Warna

Masukkan warna Anda

Atur warna Latar Depan (teks) dan Latar Belakang. Klik kotak warna untuk membuka pemilih bawaan, atau ketik kode HEX langsung seperti #1F2937 atau 1F2937.

Baca hasilnya

Lihat rasio kontras (dari 1:1 hingga 21:1) diperbarui seketika, beserta badge lolos/gagal untuk Teks Normal, Teks Besar, dan Komponen UI pada AA dan AAA, plus pratinjau langsung teks nyata di atas latar Anda.

Perbaiki kontras rendah

Jika sebuah pasangan gagal AA teks normal, buka Alternatif yang Disarankan dan klik salah satu swatch untuk menerapkan warna aksesibel. Gunakan Tukar Warna untuk membalik latar depan dan latar belakang serta menguji kebalikannya.

Uji untuk buta warna

Buka Alat Lainnya untuk mensimulasikan Protanopia, Deuteranopia, dan Tritanopia, atau terapkan Preset Cepat untuk membandingkan pasangan umum dalam satu klik.

Fitur

Hitung Kontras Real-Time

Rasio kontras dihitung ulang saat Anda mengubah warna, jadi Anda langsung mendapat umpan balik lolos atau gagal sambil mendesain.

Pemeriksaan Lengkap Kepatuhan WCAG

Uji Teks Normal (AA 4.5:1, AAA 7:1), Teks Besar (AA 3:1, AAA 4.5:1), dan Komponen UI (AA 3:1) sekaligus.

Saran Warna Cerdas

Saat pasangan gagal AA, dapatkan hingga empat alternatif aksesibel yang menampilkan warna yang disesuaikan, rasionya, dan apakah teks atau latar yang berubah. Klik salah satu untuk menerapkannya.

Pratinjau Langsung

Lihat warna Anda pada judul contoh nyata, teks isi, teks keterangan kecil, dan tombol bergaris tepi sebelum Anda memutuskannya.

Simulasi Buta Warna

Pratinjau kombinasi Anda sebagaimana terlihat dengan Protanopia, Deuteranopia, atau Tritanopia agar bekerja baik untuk semua orang.

Preset Cepat

Muat pasangan umum seperti hitam di putih atau putih di hitam dengan satu klik untuk memulai dari titik awal yang jelas.

Tukar Warna

Tukar latar depan dan latar belakang seketika untuk menguji skenario kontras kebalikannya.

Salin ke Clipboard

Salin nilai warna apa pun dengan satu klik untuk langsung ditempel ke alat desain atau kode Anda.

Pertanyaan yang Sering Diajukan

Berapa rasio kontras warna yang baik?

Untuk teks normal, targetkan minimal 4.5:1 (WCAG AA) atau 7:1 (AAA) untuk aksesibilitas yang lebih kuat. Teks besar — 18px ke atas, atau 14px tebal — hanya membutuhkan 3:1 untuk lolos AA.

Rasio kontras berapa yang lolos WCAG AA?

WCAG AA membutuhkan 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Minimum 3:1 yang sama berlaku untuk komponen UI seperti ikon, garis tepi, dan elemen interaktif.

Bagaimana rasio kontras dihitung?

Pemeriksa ini menggunakan rumus resmi WCAG. Ia menghitung luminansi relatif tiap warna, lalu membagi nilai yang lebih terang ditambah 0.05 dengan nilai yang lebih gelap ditambah 0.05, menghasilkan rasio antara 1:1 dan 21:1. Hasilnya sesuai dengan alat aksesibilitas lain dan dev tools peramban.

Apa beda AA dan AAA?

AA adalah standar minimum yang menjadi target sebagian besar situs web dan sering dirujuk untuk kepatuhan bergaya ADA. AAA adalah tingkat yang lebih ketat yang meningkatkan keterbacaan lebih jauh, tetapi bisa sulit dicapai dengan beberapa palet. Sebagian besar tim menargetkan AA dan berusaha mencapai AAA pada teks isi bila memungkinkan.

Mengapa desain saya gagal meski teks gelap di atas putih?

Teks abu-abu terang (sekitar #999999 atau lebih terang) di atas putih sering berada di bawah 4.5:1. Sebuah warna bisa tampak "cukup gelap" bagi Anda tetapi tetap meleset dari rasio, dan itulah persisnya mengapa pemeriksaan numerik penting.

Bagaimana cara memperbaiki kontras rendah?

Gelapkan teks atau terangkan latar hingga rasionya melewati ambang batas. Panel Alternatif yang Disarankan melakukan ini untuk Anda, menghitung warna aksesibel yang mencapai AA dan memungkinkan Anda menerapkannya dengan satu klik.

Format warna apa yang diterima pemeriksa ini?

Masukkan warna sebagai kode HEX (dengan atau tanpa tanda # di depan), atau gunakan pemilih warna bawaan. Untuk menguji nilai RGB atau HSL, konversikan dulu ke HEX dengan konverter warna mana pun.

Untuk apa simulasi buta warna?

Sekitar 8% pria dan 0.5% wanita memiliki gangguan penglihatan warna tertentu. Simulasi ini menampilkan warna Anda sebagaimana terlihat dengan Protanopia, Deuteranopia, atau Tritanopia, membantu Anda memastikan desain tetap terbaca jelas bagi pengguna tersebut.