Kisi Kontras Warna

Sebagian besar pemeriksa kontras membandingkan satu warna latar depan dan satu warna latar belakang sekaligus. Sistem desain jarang berhenti pada satu pasangan — palet mungkin memiliki lima warna merek, tiga netral dan dua warna aksen, dan salah satu dari mereka bisa berakhir sebagai teks pada yang lain. Kisi Kontras Warna memeriksa seluruh palet sekaligus: tempel daftar warna heksadesimal dan dapatkan matriks pairwise lengkap, dengan rasio kontras WCAG 2.x eksak dan tanda lulus/gagal AA untuk setiap kombinasi.

Apa itu kontras warna WCAG?

WCAG 2.x mendefinisikan relative luminance — betapa cerah warna muncul, ditimbang oleh bagaimana mata manusia melihat merah, hijau dan biru (L = 0.2126×R + 0.7152×G + 0.0722×B, menggunakan saluran sRGB yang dilinearisasi) — dan contrast ratio antara dua warna, (L1 + 0.05) / (L2 + 0.05) (lebih terang di atas lebih gelap), yang berkisar dari 1:1 (warna identik) hingga 21:1 (hitam murni di atas putih murni). Ambang WCAG AA untuk teks normal adalah 4.5:1 — standar yang paling audit aksesibilitas, Lighthouse dan standar hukum (ADA, EN 301 549, Section 508) perlukan. Alat ini menandai setiap sel yang melewati 4.5:1 dengan ✓ dan setiap sel yang tidak dengan ✗.

Cara menggunakannya

1. Tempel palet Anda ke dalam bidang Warna — satu warna heksadesimal per baris, atau dipisahkan dengan koma (misalnya #000000, #FFFFFF, #FF0000). Heksadesimal 3-digit (#fff) juga berfungsi.
2. Kisi diperbarui secara instan: baris pertama dan kolom pertama mencantumkan warna Anda, dan setiap sel lainnya menunjukkan rasio kontras warna baris itu yang digunakan sebagai teks pada warna kolom sebagai latar belakang, misalnya 4.53:1 ✓.
3. Pindai kisi untuk sel ✗ — ini adalah pasangan yang akan gagal WCAG AA untuk teks normal jika digunakan bersama-sama, dan layak untuk dihindari atau disesuaikan.
4. Gunakan Copy atau Download untuk mengekspor kisi sebagai CSV untuk audit sistem desain atau komentar pull-request.

Hingga 12 warna didukung per kisi (144 sel) — cukup untuk sebagian besar palet merek dan UI-netral sekaligus. Setiap entri yang bukan warna heksadesimal 3 atau 6-digit yang valid akan dilewati daripada merusak kisi, dan warna duplikat diruntuhkan menjadi satu.

FAQ

Mengapa diagonal selalu 1.00:1 dan ditandai ✗? Warna dibandingkan dengan dirinya sendiri memiliki luminance identik, jadi rasionya selalu persis 1:1 — yang terkecil sekalipun, dan jauh di bawah batang AA 4.5:1. Itu diharapkan; diagonal bukan pasangan bermakna (tidak ada yang menetapkan teks dan latar belakang ke warna yang sama), itu hanya produk sampingan dari kisi yang menjadi N×N.

Apakah kisi simetris? Ya — rasio kontras simetris menurut definisi (hanya tergantung pada luminance mana yang lebih terang dan mana yang lebih gelap, bukan warna mana yang merupakan "latar depan"), jadi warna A pada warna B selalu sama dengan warna B pada warna A.

Apa arti tanda lulus ✓/✗ — itu AA atau AAA? Tanda lulus menggunakan WCAG AA untuk teks normal (≥4.5:1), ambang yang paling audit dan standar hukum periksa. Pasangan yang ditandai ✗ mungkin masih lulus ambang Teks Besar AA yang lebih ringan (3:1); untuk rincian pasangan tunggal di semua empat ambang WCAG (AA/AAA × normal/besar), termasuk warna aksesibel yang disarankan, gunakan Accessible Color Pair Finder.

Bisakah saya menempel warna dengan nama atau teks tambahan setelahnya? Alat ini mencari warna heksadesimal yang valid di awal setiap baris atau entri yang dipisahkan dengan koma — teks yang diformat sebagai #RRGGBB atau #RGB. Apa pun yang bukan warna heksadesimal yang dapat dikenali akan dilewati, jadi pertahankan setiap entri hanya pada warna itu sendiri.

Mengapa menghapus daftar pada 12 warna? Di luar 12 warna kisi tumbuh menjadi 144+ sel dan menjadi sulit untuk dipindai secara visual — jika Anda perlu memeriksa palet yang lebih besar, bagilah menjadi kelompok yang lebih kecil terkait (misalnya netral, kemudian warna merek).

Apakah data warna saya dikirim ke mana pun? Tidak — setiap perhitungan berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah atau disimpan.