Operasi

Penyemak Kontras Warna

Iklan

Preview

Normal Text (16px)

Large Text (24px)

Contrast Ratio

21.00:1

WCAG Compliance

Normal Text

AA Pass
AAA Pass

Large Text (18pt+ or 14pt+ bold)

AA Pass
AAA Pass

UI Components & Graphics

AA Pass

WCAG Standards

Normal Text

  • AA: 4.5:1 minimum
  • AAA: 7:1 minimum

Large Text

  • AA: 3:1 minimum
  • AAA: 4.5:1 minimum

UI Components

  • AA: 3:1 minimum

Common Combinations

Black on White
White on Blue
White on Dark Gray
Masukkan kombinasi warna anda di bawah untuk mengujinya dengan penyemak kontras warna kami dan lihat serta-merta sama ada ia memenuhi piawaian kebolehaksesan.

Cara Pemeriksa Kontras Warna Kami Berfungsi

Masukkan warna latar depan dan latar belakang anda menggunakan nilai heks RGB atau pilih terus dengan Pemilih Warna.

 

  • Laraskan Alpha untuk menukar betapa lutsinarnya warna latar depan.
  • Gunakan peluncur Kecerahan untuk menjadikan warna kelihatan lebih terang atau lebih gelap.

Alat kami kemudian mengira nisbah kontras dan menyemaknya mengikut garis panduan WCAG:

  • WCAG 2.0 Tahap AA
  • Sekurang-kurangnya 4.5:1 untuk teks kandungan biasa
  • Sekurang-kurangnya 3:1 untuk teks besar
  • WCAG 2.1 (UI & grafik)
  • Sekurang-kurangnya 3:1 untuk ikon, sempadan dan komponen antara muka lain
  • Tahap WCAG AAA
  • Sekurang-kurangnya 7:1 untuk teks biasa
  • Sekurang-kurangnya 4.5:1 untuk teks besar

Teks besar bermaksud sama ada:

  • 14 pt (kira-kira 18.66 px) dan tebal, atau
  • 18 pt (kira-kira px) atau lebih besar

Anda boleh menggunakan penitis mata dalam Pemilih Warna untuk mengambil warna yang tepat daripada apa sahaja pada skrin anda.

Untuk pautan yang bergantung pada warna sahaja untuk menonjol, gunakan pemeriksa kontras warna kami untuk memastikan pautan tersebut memenuhi piawaian kebolehaksesan dan kekal mudah dibaca untuk semua orang.