🛠️ Alat Pelayar

Pemeriksa Kontras Warna

Semak nisbah kontras warna untuk pematuhan kebolehcapaian web. Uji kombinasi warna teks dan latar belakang mengikut garis panduan WCAG dengan pratonton masa nyata, penarafan kebolehcapaian, dan cadangan penambahbaikan.

Pemeriksa Kontras Warna

Cipta kombinasi warna boleh akses dengan yakin

Warna Teks

#000000

Warna Latar Belakang

#f0f4f8

Pratonton

Teks Biasa

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."

Nisbah Kontras

19.00:1

SKOR

Teks Biasa

AAA

Teks Besar

AAA

Garis Panduan WCAG 2.1: AA memerlukan 4.5:1 untuk teks biasa, 3:1 untuk teks besar. AAA memerlukan 7:1 untuk teks biasa, 4.5:1 untuk teks besar.

Petua & Cadangan

✦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.

Alatan Berkaitan

WARNA Tools

View All →

Pemapar & Penjana Palet Warna

Cipta, lihat dan urus palet warna dengan ciri-ciri lanjutan. Jana palet menggunakan teori warna, import daripada pelbagai format, semak kontras kebolehcapaian, dan eksport ke format CSS, SCSS, Tailwind, JSON, atau PNG.

Pembuat Kolaj Palet Warna

Cipta kolaj visual yang menakjubkan dengan menggabungkan imej anda dengan palet warna yang diekstrak. Muat naik mana-mana imej untuk mengekstrak warnanya yang dominan secara automatik dan cipta komposisi yang indah dengan susun atur, gaya, dan nisbah aspek yang boleh disesuaikan.

Pemilih Warna Imej Dalam Talian

Ekstrak warna dari mana-mana imej dalam talian secara percuma. Muat naik imej, klik untuk memilih warna, dan dapatkan nilai HEX, RGB, HSL, dan CMYK. Buat dan eksport palet warna.

Penjana Gradien CSS Dalam Talian Percuma

Cipta gradien linear dan radial CSS yang menakjubkan dengan penjana gradien kami yang mudah digunakan. Pilih warna, arahkan, dan salin kod CSS serta-merta untuk projek web anda.

Penjana Palet Warna Dalam Talian Percuma

Jana palet warna menakjubkan secara dalam talian dengan penjana palet warna percuma kami. Cipta skema warna yang harmoni menggunakan prinsip teori warna atau ekstrak warna daripada imej. Eksport ke format CSS, SCSS, Tailwind, JSON, PDF, dan PNG.

Penjana Palet Warna Gradien Percuma

Cipta gradien warna yang menakjubkan dan jana palet warna tersuai secara dalam talian secara percuma. Pilih warna mula dan akhir, laraskan saiz palet, dan salin kod CSS atau warna heks individu. Sesuai untuk reka bentuk web, reka bentuk grafik, dan projek kreatif.

View 5 more tools

Cara Menyemak Kontras Warna

Pilih Warna Teks

Klik pemilih warna pertama untuk memilih warna teks anda, atau masukkan kod heksadesimal secara langsung.

Pilih Warna Latar Belakang

Gunakan pemilih warna kedua untuk memilih warna latar belakang anda untuk ujian kontras.

Semak Hasil Kontras

Semak nisbah kontras yang dikira dan lihat penarafan AA/AAA untuk teks biasa dan besar.

Pratonton Reka Bentuk Anda

Lihat pratonton langsung untuk melihat bagaimana kombinasi warna anda kelihatan dengan kandungan teks sebenar.

Ciri-ciri Utama

Pengujian Kontras Masa Nyata

Kira nisbah kontras serta-merta apabila anda memilih kombinasi warna teks dan latar belakang yang berbeza.

Penarafan Pematuhan WCAG

Dapatkan penarafan AA dan AAA untuk teks biasa dan besar mengikut Garis Panduan Kebolehcapaian Kandungan Web.

Panel Pratonton Langsung

Lihat dengan tepat bagaimana kombinasi warna anda akan kelihatan dengan contoh teks dalam saiz biasa dan besar.

Petunjuk Skor Visual

Lihat prestasi kontras anda dengan carta bulat intuitif yang menunjukkan skor dari 0-100.

Pemilih Warna Interaktif

Pilih warna dengan mudah menggunakan alat pemilih warna terbina dalam untuk kedua-dua warna teks dan latar belakang.

Petua Kebolehcapaian

Dapatkan cadangan praktikal untuk meningkatkan kontras dan memenuhi piawaian kebolehcapaian.

Apakah itu Pemeriksa Kontras Warna?

Pemeriksa kontras warna adalah alat yang mengukur perbezaan luminans antara warna teks dan latar belakang. Ia mengira nisbah kontras mengikut piawaian WCAG (Garis Panduan Kebolehcapaian Kandungan Web) untuk memastikan kandungan mudah dibaca oleh pengguna dengan masalah penglihatan, termasuk buta warna dan penglihatan rendah.

Mengapa Menggunakan Pemeriksa Kontras Warna Kami?

Pematuhan WCAG

Pastikan reka bentuk anda memenuhi piawaian kebolehcapaian antarabangsa dengan penarafan AA dan AAA yang tepat.

Maklum Balas Masa Nyata

Lihat hasil serta-merta apabila anda melaraskan warna, menjadikannya mudah untuk mencari kombinasi yang patuh.

Sistem Skor Visual

Fahami prestasi kontras sepintas lalu dengan sistem skor 0-100 intuitif kami.

Tiada Pemasangan Diperlukan

Uji kombinasi warna serta-merta dalam pelayar anda tanpa memuat turun sebarang perisian.

Soalan Lazim

Apakah nisbah kontras yang baik?

Untuk teks biasa, sasarkan sekurang-kurangnya 4.5:1 untuk pematuhan AA atau 7:1 untuk AAA. Teks besar (18pt atau 14pt tebal) memerlukan 3:1 untuk AA atau 4.5:1 untuk pematuhan AAA.

Apakah maksud penarafan AA dan AAA?

AA adalah tahap standard pematuhan kebolehcapaian yang diperlukan oleh kebanyakan peraturan. AAA adalah tahap tertinggi, menyediakan kebolehcapaian yang dipertingkatkan untuk pengguna dengan masalah penglihatan yang lebih teruk.

Bagaimana nisbah kontras dikira?

Nisbah kontras dikira menggunakan luminans relatif warna seperti yang ditakrifkan oleh garis panduan WCAG. Ia berkisar dari 1:1 (tiada kontras) hingga 21:1 (kontras maksimum).

Apakah yang dikira sebagai teks besar?

Teks besar ditakrifkan sebagai 18 mata (24px) atau lebih besar, atau 14 mata (18.66px) atau lebih besar jika tebal. Teks besar mempunyai keperluan kontras yang lebih longgar.

Mengapa kontras warna penting?

Kontras warna yang baik memastikan kandungan mudah dibaca oleh semua orang, termasuk pengguna dengan masalah penglihatan, buta warna, atau mereka yang melihat kandungan dalam cahaya matahari terang atau pada paparan yang kurang baik.

Bolehkah saya menggunakan ini untuk sebarang format warna?

Alat ini menerima kod warna heksadesimal. Anda boleh menukar dari format lain (RGB, HSL, dll.) kepada heksadesimal menggunakan penukar dalam talian atau alat reka bentuk.