Rasio kontras
- AA teks normal 4.5:1
- AA teks besar 3:1
- AAA teks normal 7:1
- AAA teks besar 4.5:1
- Komponen UI dan grafik 3:1
Terbaca oleh semua
Subjudul besar
Teks isi paling terdampak kontras rendah, karena dibaca lebih lama dalam ukuran kecil. Tautan teks
Warna lolos terdekat
Warna tersimpan
Pemeriksa kontras warna
Periksa apakah teks terbaca di atas latarnya sebelum Anda merilis desain. Pilih atau ketik warna teks dan warna latar, lalu pemeriksa menampilkan rasio kontras WCAG 2.x beserta hasil lolos atau gagal untuk AA dan AAA, untuk teks normal, teks besar, dan komponen UI. Pratinjau langsung, simulasi buta warna, dan saran perbaikan membantu Anda menemukan pasangan yang berhasil. Pilih warna teks dan latar sebagai HEX, RGB, atau HSL. Rasio kontras WCAG, hasil AA dan AAA, serta pratinjau diperbarui saat Anda mengetik, dan warna lolos terdekat disarankan. Semuanya disimpan di browser ini.
cara itu works
- Pilih warna teks dan warna latar, atau ketik sebagai HEX, RGB, atau HSL. Atur opasitas teks jika teksnya semi transparan.
- Baca rasio kontras serta lencana AA dan AAA untuk teks normal, teks besar, dan komponen UI, lalu periksa pratinjau langsung.
- Terapkan warna saran jika pasangan gagal, simpan pasangan yang baik ke palet, dan salin CSS ke proyek Anda.
Perbaikan, bukan hanya nilai
Saat pasangan gagal, pemeriksa mencari warna teks dan warna latar terdekat dengan rona dan saturasi yang sama yang mencapai AA dan AAA, dan satu klik menerapkannya. Teks semi transparan dicampur dulu dengan latar, persis seperti browser menggambarnya.
Privat dan mudah dipindah
Warna dan palet Anda hanya disimpan di browser ini. Simpan semuanya sebagai JSON untuk cadangan atau pindah ke perangkat lain, atau simpan hasilnya sebagai PDF atau gambar. Urungkan dan ulangi berlaku untuk setiap perubahan.
Pertanyaan yang sering diajukan
Apakah pemeriksa kontras warna ini gratis?
Ya. Gratis, tanpa akun, dan berfungsi di browser modern mana pun.
Rasio berapa yang saya perlukan?
Tingkat AA WCAG meminta minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar serta komponen UI seperti bingkai kolom input dan ikon. Tingkat AAA meminta 7:1 untuk teks normal dan 4,5:1 untuk teks besar.
Mengapa 4,48 gagal padahal dibulatkan menjadi 4,5?
Ambang WCAG bersifat pasti. Rasio 4,48:1 berada di bawah 4,5:1, sehingga gagal AA untuk teks normal. Pemeriksa membandingkan nilai yang tidak dibulatkan, jadi lencananya selalu ketat.
Related alat
Kisah di balik pemeriksa kontras warna
Asal nilai kontras WCAG: 4,5:1 dan 7:1, luminans relatif dari sRGB, aturan 3:1 untuk komponen UI dari WCAG 2.1, buta warna, dan APCA untuk WCAG 3.
Generator palet warna
Build, lock, dan shuffle warna palettes di browser Anda. Salin HEX, CSS variables, atau JSON, ekspor PNG atau SVG, dan extract warna dari foto.
Roda warna
pilih warna pada interactive wheel, generate complementary, analogous, triadic, dan lain palettes, dan salin HEX, RGB, HSL, HSV, atau CMYK.
Editor gradien
Build linear dan radial CSS gradients di browser Anda. seret warna stops, atur sudut, dan salin CSS, HEX, RGB, HSL, HSV, atau CMYK.
Lainnya information tentang warna
cara warna works pada screens dan di cetak: RGB, CMYK, HSL, HEX, warna wheel, gradients, contrast, dan PictorX alat.
Siap ke coba itu?
Buka PictorX di browser Anda — tidak instalasi, tidak credit kartu diperlukan ke mulai.
Ke Editor