Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Pencari Pasangan Warna yang Dapat Diakses

PengembangMatematika

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Penemu Pasangan Warna yang Dapat Diakses

Pencari Pasangan Warna yang Dapat Diakses

Temukan warna latar depan yang memenuhi standar aksesibilitas WCAG untuk warna latar belakang apa pun. Masukkan warna latar belakang dan alat ini akan mencari ruang warna HSL untuk menghasilkan palet warna teks yang mencapai kepatuhan kontras AA atau AAA. Pratinjau setiap pasangan dengan teks contoh, periksa kombinasi warna tertentu, dan ekspor pasangan yang dapat diakses sebagai properti khusus CSS.

Cara Penggunaan

Pilih atau masukkan warna latar belakang menggunakan pemilih warna atau input hex. Alat ini segera memindai ruang warna dan menampilkan kisi warna latar depan yang disarankan yang lolos tingkat WCAG yang Anda pilih. Klik segi mana pun untuk mempratinjau sebagai teks pada latar belakang Anda. Untuk memeriksa pasangan tertentu, masukkan warna latar belakang dan latar depan lalu lihat lencana lulus/gagal instan untuk tingkat AA Normal, AA Besar, dan AAA. Ekspor pasangan pilihan Anda sebagai properti khusus CSS untuk digunakan langsung di lembar gaya Anda.

Fitur

Perhitungan Kontras WCAG – Perhitungan rasio kontras dan luminans relatif yang akurat sesuai spesifikasi WCAG 2.1
Pencarian Kisi HSL – Secara sistematis mencari hue, saturasi, dan lightness untuk menemukan semua warna latar depan yang lolos
Pratinjau Teks Langsung – Lihat teks normal dan besar contoh yang dirender pada latar belakang pilihan Anda dengan setiap warna yang disarankan
Kepatuhan AA & AAA – Beralih antara ambang kontras AA Normal (4,5:1), AA Besar (3:1), dan AAA (7:1)
Pemeriksa Pasangan Tertentu – Masukkan dua warna apa pun untuk mendapatkan hasil lulus/gagal instan untuk semua tingkat WCAG
Cakupan Warna berdasarkan Hue – Saran yang diatur berdasarkan keluarga hue untuk penjelajahan yang mudah
Tampilan Rumus Luminans – Menampilkan perhitungan luminans relatif WCAG dan nilai untuk transparansi
Ekspor CSS – Salin pasangan yang dapat diakses sebagai properti khusus CSS siap untuk lembar gaya Anda

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu rasio kontras WCAG dan mengapa itu penting?

WCAG (Web Content Accessibility Guidelines) mendefinisikan rasio kontras minimum antara teks dan warna latar belakang untuk memastikan keterbacaan bagi orang dengan gangguan penglihatan. Rasio kontras berkisar dari 1:1 (tanpa kontras) hingga 21:1 (maksimum, hitam di atas putih). Tingkat AA membutuhkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Tingkat AAA membutuhkan 7:1 untuk teks normal. Memenuhi standar ini memastikan situs web Anda dapat diakses oleh sekitar 1 dari 12 pria dan 1 dari 200 wanita yang memiliki kekurangan penglihatan warna, ditambah orang dengan penglihatan rendah.
Apa perbedaan antara kepatuhan AA dan AAA?

AA adalah tingkat aksesibilitas minimum yang direkomendasikan dan membutuhkan rasio kontras 4,5:1 untuk teks berukuran normal dan 3:1 untuk teks besar (18pt atau 14pt tebal ke atas). AAA adalah tingkat tertinggi, membutuhkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Sebagian besar organisasi menargetkan kepatuhan AA karena memberikan aksesibilitas yang baik sambil memungkinkan fleksibilitas desain yang wajar. AAA ideal untuk konten penting seperti teks isi pada situs pemerintah atau kesehatan. Teks besar memiliki persyaratan yang lebih rendah karena karakter yang lebih besar secara inheren lebih mudah dibaca.
Bagaimana cara menghitung luminans relatif?

Luminans relatif mengukur kecerahan yang dirasakan dari suatu warna pada skala dari 0 (hitam) hingga 1 (putih). Rumus WCAG pertama-tama mengonversi nilai sRGB (0-255) ke RGB linier dengan membagi dengan 255 dan menerapkan koreksi gamma. Untuk nilai 0,04045 atau kurang, bagi dengan 12,92. Untuk nilai yang lebih tinggi, tambahkan 0,055, bagi dengan 1,055, dan pangkatkan 2,4. Luminans akhir adalah 0,2126 dikalikan merah ditambah 0,7152 dikalikan hijau ditambah 0,0722 dikalikan biru. Bobot ini mencerminkan bagaimana mata manusia mempersepsikan kecerahan, dengan hijau berkontribusi paling banyak.
Bisakah saya menggunakan alat ini untuk pemilihan warna merek?

Ya. Masukkan warna latar belakang merek Anda dan alat ini menampilkan setiap warna teks yang memenuhi standar aksesibilitas. Ini sangat berguna selama pengembangan merek atau desain ulang ketika Anda perlu memastikan palet warna Anda berfungsi untuk desain web yang dapat diakses. Anda juga dapat memeriksa pasangan warna merek yang ada untuk memverifikasi bahwa mereka lulus persyaratan WCAG. Fitur ekspor CSS memungkinkan Anda menyalin pasangan yang dapat diakses langsung ke lembar gaya Anda, menghemat waktu pengembangan dan memastikan kepatuhan sejak awal.