Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Kisi Kontras Warna

Pengembang

IKLAN · HAPUS?

MEMASUKKAN

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Kisi Kontras Warna

Masukkan warna merek atau sistem desain Anda dan hasilkan matriks kontras WCAG lengkap yang menunjukkan rasio kontras untuk setiap kemungkinan kombinasi latar depan/latar belakang. Segera lihat pasangan warna mana yang lulus persyaratan aksesibilitas AA, AAA, atau gagal — penting untuk membangun sistem desain dan panduan gaya yang dapat diakses.

Cara Penggunaan

Masukkan warna hex satu per baris (dengan label opsional seperti “Utama #3B82F6”), atau pilih palet bawaan. Klik Buat Kisi untuk membuat matriks kontras. Setiap sel menunjukkan rasio kontras dengan warna latar depan aktual pada latar belakang aktual, diberi kode warna berdasarkan tingkat kepatuhan WCAG.

Fitur

Matriks Kontras N×N – Setiap kombinasi latar depan/latar belakang diuji dan ditampilkan dalam kisi visual
Pengodean Warna WCAG – Hijau untuk AAA (≥7:1), kuning untuk AA (≥4,5:1), dan merah untuk gagal (<4,5:1)
Pratinjau Warna Langsung – Setiap sel dirender dengan teks latar depan aktual pada warna latar belakang aktual
Teks Besar AA – Juga menunjukkan kepatuhan Teks Besar AA (≥3:1) untuk ukuran cetak yang lebih besar
Statistik Ringkasan – Total pasangan yang diuji, lulus AAA, lulus AA, dan kegagalan dalam sekejap
Palet Bawaan – Palet warna Tailwind, Material Design, atau monokrom yang dapat dimuat cepat
Hingga 20 Warna – Mendukung palet dari 2 hingga 20 warna
Sampingan (Saja) – Semua perhitungan dilakukan di browser Anda

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa arti tingkat kontras WCAG?

WCAG (Web Content Accessibility Guidelines) mendefinisikan rasio kontras untuk keterbacaan teks. AAA (≥7:1) adalah standar tertinggi, memastikan teks dapat dibaca oleh pengguna dengan gangguan penglihatan sedang. AA (≥4,5:1) adalah standar minimum untuk teks berukuran normal. AA Besar (≥3:1) berlaku untuk teks berukuran 18pt atau lebih besar (atau 14pt tebal). Sebagian besar undang-undang dan standar aksesibilitas memerlukan setidaknya kepatuhan AA untuk konten web.
Mengapa saya memerlukan kisi kontras daripada memeriksa pasangan secara individual?

Kisi kontras menunjukkan setiap kombinasi warna yang mungkin dalam palet Anda sekaligus, mengungkapkan masalah yang akan Anda lewatkan dengan memeriksa pasangan satu per satu. Sistem desain sering kali memiliki 8-15 warna yang dapat digunakan dalam berbagai kombinasi latar depan/latar belakang. Kisi dengan 10 warna menguji 100 pasangan secara bersamaan, langsung menunjukkan kombinasi mana yang dapat diakses dan mana yang tidak. Ini penting untuk membuat dokumentasi aksesibilitas yang komprehensif untuk tim desain.
Bagaimana rasio kontras dihitung?

Rasio kontras WCAG menggunakan luminansi relatif, yang dihitung dari nilai sRGB yang dilinearisasi. Setiap saluran warna dikonversi dari sRGB yang dikodekan gamma ke cahaya linier menggunakan rumus: jika nilai sRGB 0,03928 atau kurang, bagi dengan 12,92; jika tidak, naikkan (nilai + 0,055) / 1,055 ke pangkat 2,4. Luminansi relatif kemudian adalah 0,2126×R + 0,7152×G + 0,0722×B. Rasio kontras adalah (luminansi lebih terang + 0,05) / (luminansi lebih gelap + 0,05), selalu menghasilkan nilai antara 1:1 dan 21:1.