Kategori
🛠️ Alat Browser

Pemeriksa Kontras Warna

Periksa rasio kontras warna untuk kepatuhan aksesibilitas web. Uji kombinasi warna teks dan latar belakang berdasarkan pedoman WCAG dengan pratinjau real-time, peringkat aksesibilitas, dan saran perbaikan.

Pemeriksa Kontras Warna

Buat kombinasi warna yang mudah diakses dengan percaya diri

#000000
#f0f4f8

Pratinjau

Teks Normal

This is an example of normal body text that would appear on your website or application.

Teks Besar

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

Rasio Kontras

19.00:1

0

SKOR

Teks Normal

AAA

Teks Besar

AAA

Pedoman WCAG 2.1: AA memerlukan 4,5:1 untuk teks normal, 3:1 untuk teks besar. AAA memerlukan 7:1 untuk teks normal, 4,5:1 untuk teks besar.

Tips & Saran

  • Maintain a contrast ratio of at least 4.5:1 for normal text.
  • Use 3:1 or higher for large text (18pt or 14pt bold).
  • Consider using darker text on lighter backgrounds or vice versa.
  • For full WCAG AAA compliance, aim for a ratio of 7:1.
  • Adjust brightness or saturation slightly to improve contrast.

Alat Terkait

WARNA Tools

View All →

Generator Gradien CSS Online Gratis

Buat gradien linear dan radial CSS yang menakjubkan dengan pembuat gradien kami yang mudah digunakan. Pilih warna, tentukan arah, dan salin kode CSS secara instan untuk proyek web Anda.

Generator Palet Warna Online Gratis

Hasilkan palet warna menakjubkan secara online dengan generator palet warna gratis kami. Buat skema warna yang harmonis menggunakan prinsip teori warna atau ekstrak warna dari gambar. Ekspor ke format CSS, SCSS, Tailwind, JSON, PDF, dan PNG.

Konverter CMYK ke Pantone Online Gratis

Konversikan warna CMYK ke padanan Pantone terdekat menggunakan ilmu warna canggih. Jelajahi koleksi warna Pantone populer yang dikurasi dengan perbandingan warna waktu nyata dan fungsi salin.

Konverter Warna Hex ke Pantone Gratis

Konversikan warna hex ke padanan Pantone terdekat dengan alat online gratis kami. Menampilkan pencocokan warna Delta E yang akurat, jelajahi lebih dari 40 warna Pantone populer, dan dapatkan perbandingan warna instan. Sempurna untuk desainer, percetakan, dan profesional warna.

Konverter Warna HSV ke Pantone Gratis

Konversi warna HSV (Hue, Saturation, Value) ke padanan warna Pantone terdekat secara instan. Temukan warna Pantone yang sempurna dengan alat pencocokan warna komprehensif kami yang dilengkapi perbandingan visual dan ilmu warna yang akurat.

Konverter Warna RGB ke Pantone Gratis

Konversi warna RGB ke padanan warna Pantone terdekat dengan algoritma pencocokan warna canggih kami. Jelajahi warna Pantone pilihan, bandingkan perbedaan warna, dan dapatkan kode warna yang akurat untuk proyek desain.

Cara Memeriksa Kontras Warna

1

Pilih Warna Teks

Klik pemilih warna pertama untuk memilih warna teks Anda, atau masukkan kode hex secara langsung.

2

Pilih Warna Latar Belakang

Gunakan pemilih warna kedua untuk memilih warna latar belakang Anda untuk uji kontras.

3

Tinjau Hasil Kontras

Periksa rasio kontras yang dihitung dan lihat peringkat AA/AAA untuk teks normal dan besar.

4

Pratinjau Desain Anda

Lihat pratinjau langsung untuk melihat bagaimana kombinasi warna Anda terlihat dengan konten teks yang sebenarnya.

Fitur Utama

Pengujian Kontras Real-Time

Segera hitung rasio kontras saat Anda memilih kombinasi warna teks dan latar belakang yang berbeda.

Peringkat Kepatuhan WCAG

Dapatkan peringkat AA dan AAA untuk teks normal dan besar sesuai dengan Pedoman Aksesibilitas Konten Web.

Panel Pratinjau Langsung

Lihat dengan tepat bagaimana kombinasi warna Anda akan terlihat dengan contoh teks dalam ukuran normal dan besar.

Indikator Skor Visual

Lihat kinerja kontras Anda dengan bagan lingkaran intuitif yang menunjukkan skor dari 0-100.

Pemilih Warna Interaktif

Pilih warna dengan mudah menggunakan alat pemilih warna bawaan untuk warna teks dan latar belakang.

Tips Aksesibilitas

Dapatkan saran praktis untuk meningkatkan kontras dan memenuhi standar aksesibilitas.

Apa Itu Pemeriksa Kontras Warna?

Pemeriksa kontras warna adalah alat yang mengukur perbedaan luminansi antara warna teks dan latar belakang. Alat ini menghitung rasio kontras sesuai dengan standar WCAG (Web Content Accessibility Guidelines) untuk memastikan konten mudah dibaca oleh pengguna dengan gangguan penglihatan, termasuk buta warna dan penglihatan rendah.

Mengapa Menggunakan Pemeriksa Kontras Warna Kami?

1

Kepatuhan WCAG

Pastikan desain Anda memenuhi standar aksesibilitas internasional dengan peringkat AA dan AAA yang akurat.

2

Umpan Balik Real-Time

Lihat hasil instan saat Anda menyesuaikan warna, sehingga mudah menemukan kombinasi yang sesuai.

3

Sistem Penilaian Visual

Pahami kinerja kontras secara sekilas dengan sistem penilaian 0-100 kami yang intuitif.

4

Tidak Perlu Instalasi

Uji kombinasi warna secara instan di browser Anda tanpa mengunduh perangkat lunak apa pun.

Pertanyaan yang Sering Diajukan

Berapa rasio kontras yang baik?

Untuk teks normal, targetkan setidaknya 4.5:1 untuk kepatuhan AA atau 7:1 untuk AAA. Teks besar (18pt atau 14pt tebal) membutuhkan 3:1 untuk AA atau 4.5:1 untuk kepatuhan AAA.

Apa arti peringkat AA dan AAA?

AA adalah tingkat standar kepatuhan aksesibilitas yang diwajibkan oleh sebagian besar peraturan. AAA adalah tingkat tertinggi, memberikan aksesibilitas yang ditingkatkan bagi pengguna dengan gangguan penglihatan yang lebih parah.

Bagaimana rasio kontras dihitung?

Rasio kontras dihitung menggunakan luminansi relatif warna sebagaimana didefinisikan oleh pedoman WCAG. Ini berkisar dari 1:1 (tanpa kontras) hingga 21:1 (kontras maksimum).

Apa yang termasuk teks besar?

Teks besar didefinisikan sebagai 18 poin (24px) atau lebih besar, atau 14 poin (18.66px) atau lebih besar jika tebal. Teks besar memiliki persyaratan kontras yang lebih longgar.

Mengapa kontras warna penting?

Kontras warna yang baik memastikan konten mudah dibaca oleh semua orang, termasuk pengguna dengan gangguan penglihatan, buta warna, atau mereka yang melihat konten di bawah sinar matahari terang atau pada layar yang buruk.

Bisakah saya menggunakan ini untuk format warna apa pun?

Alat ini menerima kode warna hex. Anda dapat mengonversi dari format lain (RGB, HSL, dll.) ke hex menggunakan konverter online atau alat desain.