Langkau ke kandungan
ToolMug

Gunakan ↑ ↓ untuk bergerak, Enter untuk membuka, Esc untuk menutup.

Penyemak Kontras Warna

Masukkan warna teks dan latar untuk mendapatkan nisbah kontras WCAG serta melihat sama ada teks biasa dan besar memenuhi AA dan AAA. Jika gagal, alat mengekalkan rona, mengubah kecerahan sahaja dan mencadangkan warna terdekat yang lulus.

Berjalan dalam pelayar anda — apa yang anda masukkan tidak dimuat naik

Nisbah kontras

4.54:1

  • Teks biasa AA ≥ 4.5:1Lulus
  • Teks besar AA ≥ 3:1Lulus
  • Teks biasa AAA ≥ 7:1Gagal
  • Teks besar AAA ≥ 4.5:1Lulus

Teks tajuk besar

Teks isi biasa pada 16 px sepatutnya mudah dibaca.

Cetakan kecil, kapsyen dan nota kaki.

Butang

Warna teks terdekat yang lulus AAA: #595959 (7.00:1)

Cara menggunakan

  1. Pilih warna atau taipkannya — hex, rgb(), hsl(), oklch() atau nama warna.
  2. Baca nisbah dan empat keputusan WCAG, kemudian semak pratonton langsung di bawah.
  3. Jika gagal, klik Gunakan warna ini di sebelah cadangan untuk menggunakannya.

Penerangan pilihan

AA
Sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (18 pt / 24 px atau 14 pt / kira-kira 18.7 px tebal). Kebanyakan peraturan dan sistem reka bentuk memerlukan AA.
AAA
Sekurang-kurangnya 7:1 untuk teks biasa dan 4.5:1 untuk teks besar, bagi kandungan yang paling memerlukan kebolehbacaan.
Warna cadangan
Mengekalkan rona dan kroma dalam ruang warna OKLCH dan mengubah kecerahan sahaja untuk mencari warna terdekat yang baru melepasi syarat.
Warna telus
Warna teks dengan ketelusan diukur seperti yang kelihatan di atas latar.

Cara nisbah dikira

Setiap warna ditukar daripada sRGB kepada cahaya linear, kemudian kepada luminans relatif:

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Hijau paling berpengaruh kerana mata paling peka kepadanya. Beberapa keputusan di atas latar belakang putih:

Warna teks Nisbah Keputusan
#000000 21 : 1 AAA
#0066cc 5.57 : 1 Teks biasa AA, bukan teks biasa AAA
#767676 4.54 : 1 Teks biasa AA
#777777 4.48 : 1 Gagal AA untuk teks biasa, lulus untuk teks besar

Takrifan WCAG terdapat dalam Understanding Success Criterion 1.4.3.

Soalan lazim

Bagaimanakah kontras dikira?

Dengan formula WCAG 2.x (luminans relatif lebih cerah + 0.05) ÷ (luminans relatif lebih gelap + 0.05), menghasilkan 1:1 hingga 21:1. Hitam atas putih ialah 21:1.

Mengapa #767676 sering disebut?

Ia ialah kelabu paling cerah yang mencapai 4.5:1 (kira-kira 4.54:1) atas putih, jadi ia menjadi had biasa untuk teks sekunder.

Adakah ikon dan sempadan juga perlu disemak?

Ya. Sejak WCAG 2.1, komponen antara muka dan grafik — sempadan butang, input dan ikon — memerlukan sekurang-kurangnya 3:1 terhadap warna bersebelahan.

Privasi

Alat ini berjalan sepenuhnya dalam pelayar anda. Fail dan teks anda diproses pada peranti anda dan tidak pernah dimuat naik ke pelayan kami.

Alat berkaitan