Pemeriksa Kontras Warna

Semua alat

Semak nisbah kontras WCAG antara warna teks dan latar belakang — lihat gred lulus/gagal AA/AAA untuk teks biasa, teks besar dan komponen UI, dengan pratonton langsung dan cadangan warna aksesibel.

Warna teks
Tint
Warna latar belakang
Tint
Nisbah kontras
--:1
Teks biasa
Teks badan di bawah 18px (atau di bawah 14px tebal)
AA AAA
Teks besar
18px+ biasa, atau 14px+ tebal
AA AAA
Komponen UI
Ikon, sempadan, kawalan borang & grafik
AA AAA
Pratonton langsung

The quick brown fox

Teks besar dibaca dengan selesa apabila kontras mencukupi.

Ini adalah perenggan contoh teks badan biasa. Kontras warna yang baik memastikan kandungan anda boleh dibaca oleh semua orang, termasuk mereka yang mempunyai penglihatan lemah atau buta warna. pautan contoh.

Cetakan kecil dan kapsyen adalah yang paling sukar dibaca — ia memerlukan kontras paling tinggi.
Butang contoh Butang contoh
Cadangan

Semuanya dikira langsung dalam pelayar anda menggunakan formula luminans relatif WCAG 2.x — tiada muat naik, tiada pendaftaran, sepenuhnya percuma.

Mengenai Pemeriksa Kontras Warna

Color Contrast Checker mengukur nisbah kontras WCAG antara warna teks dan warna latar belakang, kemudian menilai pasangan tersebut berbanding tahap kebolehcapaian AA dan AAA untuk teks biasa, teks besar dan komponen UI. Nisbah dan setiap keputusan lulus/gagal dikemas kini secara langsung apabila anda melaraskan mana-mana warna.

Panel pratonton yang realistik memaparkan tajuk, teks isi, cetakan kecil, butang dan pautan dalam gabungan pilihan anda, supaya anda boleh menilai kebolehbacaan dengan kandungan sebenar dan bukannya swatch abstrak. Apabila pasangan gagal, alat ini mencadangkan warna teks paling hampir yang boleh dicapai yang mencapai ambang AA sebanyak 4.5:1, sedia digunakan dengan satu klik.

Matematiknya mengikuti formula luminans relatif WCAG 2.x dan berjalan sepenuhnya dalam pelayar anda — tiada apa dimuat naik dan pemeriksaan adalah percuma. Anda juga boleh menyalin laporan teks ringkas nisbah dan gred untuk ditampal ke dalam semakan kebolehcapaian atau permintaan tarik.

Cara menggunakan Pemeriksa Kontras Warna

  1. Tetapkan warna teks dan warna latar belakang anda dengan pemilih warna atau dengan menaip nilai.
  2. Baca nisbah kontras dan keputusan AA/AAA untuk teks biasa, teks besar dan komponen UI.
  3. Periksa pratonton langsung untuk melihat tajuk, perenggan, butang dan pautan sebenar dalam warna anda.
  4. Jika pasangan gagal, gunakan warna teks yang boleh dicapai yang dicadangkan atau tukar dua warna tersebut.
  5. Klik "Copy report" untuk berkongsi nisbah dan keputusan pematuhan.

Soalan lazim

WCAG AA memerlukan 4.5:1 untuk teks biasa dan 3:1 untuk teks besar dan komponen UI seperti ikon dan sempadan borang. Tahap AAA yang lebih ketat memerlukan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar.

Teks bersaiz 18px atau lebih besar pada berat biasa, atau 14px dan lebih besar apabila tebal. Kerana glif besar lebih mudah dibezakan, WCAG membenarkan nisbah kontras yang lebih rendah iaitu 3:1 pada tahap AA.

Ya. Setiap pemeriksaan dikira serta-merta dalam pelayar anda menggunakan formula luminans relatif WCAG, tanpa pendaftaran, tanpa had penggunaan dan tanpa kos.

Guna cadangan terbina dalam: alat ini mencari varian paling hampir warna teks anda yang lulus AA berbanding latar belakang semasa dan membolehkan anda menggunakannya terus. Jika tiada varian warna teks yang boleh lulus, laraskan latar belakang sebaliknya.

Ia meliputi kriteria kontras warna, yang antara kegagalan kebolehcapaian yang paling biasa, tetapi bukan segalanya. Anda masih perlu memeriksa keadaan fokus, ketidakbergantungan warna maklumat, saiz fon dan bagaimana palet bertahan di bawah simulasi buta warna.

Tidak. Kedua-dua warna, nisbah dan cadangan semuanya dikira secara tempatan dalam pelayar anda — halaman ini tidak membuat sebarang permintaan pelayan semasa anda bekerja.
Kongsi ini
Alat Berkaitan
Simulator Buta Warna Lihat imej atau palet anda seperti yang dilihat oleh orang dengan protanopia, deuteranopia, tritanopia atau akromatopsia — berjalan sepenuhnya dalam pelayar anda, tiada apa yang dimuat naik. Percuma
Pengeksport Palet Tampal atau import set warna dan eksportnya dengan segera ke pemboleh ubah CSS, SCSS, konfigurasi Tailwind, JSON atau swatch SVG — langkah terakhir untuk sebarang palet. Percuma
Pencari Warna Bernama Cari warna CSS bernama yang paling hampir dan warna Tailwind yang paling dekat untuk sebarang warna — dipadankan secara perseptual, dengan nilai sedia salin. Percuma
Skrin Hitam Penuh Penuhi seluruh skrin anda dengan hitam tulen — sesuai untuk mengesan piksel tersangkut yang terang, memeriksa kebocoran lampu latar atau sebagai latar gelap tanpa gangguan. Percuma. Percuma
Pemilih Warna Skrin Sampel sebarang piksel pada skrin anda dengan penitis mata, atau pilih warna dari imej yang dilepaskan, dan kumpulkan ke dalam palet sedia salin. Percuma
Penjana Palet Warna Bina palet warna yang harmoni daripada roda warna interaktif — gunakan peraturan harmoni seperti analogus, komplementari atau triad, kemudian salin sebarang nilai dengan segera. Percuma
Carian popular
penyemak kontras warna nisbah kontras wcag penyemak kontras kebolehcapaian penyemak kontras teks ujian kontras aa aaa semak kontras warna dalam talian
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.