Grid Kontras

Masukkan seluruh palet Anda ke dalam tabel audit N×N — rasio WCAG dan APCA Lc untuk setiap pasangan latar depan × latar belakang, dilihat sekilas.

Setiap sel menampilkan rasio WCAG dan APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Lulus WCAG AA body AA teks besar saja Gagal

Baris = warna teks (foreground), kolom = latar belakang. Setiap sel menampilkan pasangan foreground-on-background yang nyata dengan dua metrik aksesibilitas: rasio WCAG (AA body ≥ 4,5, AA large ≥ 3,0) dan APCA Lc (75+ untuk teks body, 60+ untuk teks besar).

Cara mengaudit seluruh palet - tambah, baca, putuskan.

Semua warna kandidat dalam satu matriks N×N - aksesibilitas untuk setiap pasangan latar depan × latar belakang sekaligus.

01
Tambah warna
Masukkan warna merek, warna semantik, dan warna netral (maksimal 10). Baris adalah latar depan, kolom adalah latar belakang.
02
Baca tabel
Setiap sel menampilkan rasio WCAG dan Lc APCA. Titik menyala: teks badan membutuhkan Lc 75+, teks besar 60+.
03
Tentukan
Catat pasangan tombol dan pasangan badan ke dalam spesifikasi desain Anda; hilangkan kombinasi yang gagal sebelum mereka dirilis.

FAQ grid kontras

Tiga pertanyaan umum dalam audit matriks penuh.

Mengapa tidak memeriksa pasangan satu per satu di alat kontras?: 5 warna menghasilkan 30 pasangan terarah - pemeriksaan satu per satu memungkinkan terlewat. Grid menampilkan semuanya sekaligus dan mengungkap hubungan cermin.
WCAG atau APCA - mana yang dihitung?: WCAG 2.1 adalah yang dirujuk peraturan saat ini; APCA adalah kandidat WCAG 3 dan membaca teks mode gelap dan kontras rendah lebih akurat. Patuhi WCAG, nilai dengan APCA.
Mengapa kolom hitam dan putih selalu ada?: Teks hitam atau putih adalah fallback universal - bagaimana kinerja warna terhadap keduanya adalah dasar untuk mendefinisikan warna semantik.

Setelah audit

Masukkan pasangan yang lulus ke palet dan spesifikasi semantik Anda.

Pemeriksa Kontras

Validasi kontras WCAG 2.1 antara warna latar depan dan latar belakang apa pun.

Simulator Buta Warna

Simulasikan 8 jenis defisiensi penglihatan warna untuk mengaudit aksesibilitas.

Palet Ilmiah Aman Buta Warna

Standar de-facto penerbitan akademik — Okabe-Ito (direkomendasikan oleh Nature Methods), seri Paul Tol, palet jurnal Nature NPG, dan Viridis yang seragam secara persepsi. Setiap sampel warna dilengkapi dengan nilai kontras APCA, dan simulator penglihatan warna 8 jenis di bawahnya memverifikasi setiap palet secara langsung.

Palet UI Semantik

Masukkan satu warna merek, dapatkan primer / sekunder / sukses / peringatan / bahaya — diekspor sebagai konfigurasi Tailwind dan variabel CSS.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Cara mengaudit seluruh palet - tambah, baca, putuskan.

Semua warna kandidat dalam satu matriks N×N - aksesibilitas untuk setiap pasangan latar depan × latar belakang sekaligus.

Tambah warna

Masukkan warna merek, warna semantik, dan warna netral (maksimal 10). Baris adalah latar depan, kolom adalah latar belakang.

Baca tabel

Setiap sel menampilkan rasio WCAG dan Lc APCA. Titik menyala: teks badan membutuhkan Lc 75+, teks besar 60+.

Tentukan

Catat pasangan tombol dan pasangan badan ke dalam spesifikasi desain Anda; hilangkan kombinasi yang gagal sebelum mereka dirilis.

FAQ grid kontras

Tiga pertanyaan umum dalam audit matriks penuh.

Mengapa tidak memeriksa pasangan satu per satu di alat kontras?

5 warna menghasilkan 30 pasangan terarah - pemeriksaan satu per satu memungkinkan terlewat. Grid menampilkan semuanya sekaligus dan mengungkap hubungan cermin.

WCAG atau APCA - mana yang dihitung?

WCAG 2.1 adalah yang dirujuk peraturan saat ini; APCA adalah kandidat WCAG 3 dan membaca teks mode gelap dan kontras rendah lebih akurat. Patuhi WCAG, nilai dengan APCA.

Mengapa kolom hitam dan putih selalu ada?

Teks hitam atau putih adalah fallback universal - bagaimana kinerja warna terhadap keduanya adalah dasar untuk mendefinisikan warna semantik.