Palet warna dari gambar dan pemeriksa kontras

Fungsi alat ini

Tiga pekerjaan kecil soal warna di satu tempat. Warna dari gambar membaca gambar dan mengembalikan warna utamanya, masing-masing dengan persentase area yang ditempatinya, sehingga Anda dapat mengambil palet dari foto, logo, atau tangkapan layar. Pemeriksa kontras memberi tahu apakah teks satu warna terbaca di atas warna lain menurut pedoman aksesibilitas WCAG. Konverter mengubah warna antara HEX, RGB, dan HSL saat Anda mengetik. Gambar diproses di browser dan tidak pernah diunggah.

Warna dari gambar

1. Letakkan gambar di kotak, pilih gambar, atau tempel tangkapan layar.
2. Pilih jumlah warna, dari 5 sampai 8.
3. Klik sampel warna untuk menyalinnya. Gunakan "Salin sebagai" untuk memilih HEX, RGB, atau HSL lebih dulu, dan teks pada sampel menunjukkan persis yang akan disalin.

Alat ini mengecilkan gambar menjadi paling banyak 160 piksel pada sisi terpanjang, menghitung setiap piksel ke dalam kisi warna yang mirip, lalu berulang kali membelah dua kelompok dengan sebaran warna terlebar. Ini metode median cut. Setiap sampel adalah rata-rata persis dari piksel dalam kelompoknya, dan persentasenya adalah jumlah piksel kelompok itu. Piksel transparan diabaikan. Metode ini tidak mengandung unsur acak, sehingga gambar yang sama selalu menghasilkan palet yang sama. Ingat bahwa "utama" berdasarkan luas: logo kecil yang cerah di atas latar abu-abu besar akan menampilkan abu-abu lebih dulu.

Pemeriksa kontras

Kontras adalah rasio kecerahan dua warna, dari 1:1 (identik) sampai 21:1 (hitam di atas putih). WCAG 2 menetapkan minimum teks terbaca 4,5:1 untuk teks normal dan 3:1 untuk teks besar, yaitu 24 piksel, atau 18,66 piksel jika tebal, ke atas. Tingkat AAA yang lebih ketat meminta 7:1 dan 4,5:1. Tombol, ikon, dan tepi kolom formulir memerlukan 3:1 terhadap yang ada di sampingnya. Alat ini menampilkan setiap pemeriksaan sebagai lulus atau gagal, dengan pratinjau teks Anda di atas latar Anda.

Ketika teks normal gagal, alat menyarankan warna terdekat dengan rona dan saturasi sama yang lulus, dan tombol menerapkannya.

Contoh

Teks abu-abu #777777 di atas latar putih memiliki rasio kontras 4,48:1. Itu gagal AA untuk teks normal dengan selisih kecil, dan merupakan warna yang sangat umum di web. Gelapkan abu-abu menjadi #767676 dan rasionya menjadi 4,54:1, yang lulus. Kebanyakan orang tidak melihat bedanya, tetapi itulah yang menentukan apakah halaman lolos audit aksesibilitas.

Konverter

Ketik di kolom HEX, RGB, atau HSL, atau gunakan pemilih warna, dan dua kolom lain mengikuti. Alat ini menerima hex 3 atau 6 digit dengan atau tanpa tanda pagar, rgb(234, 88, 12) dengan koma atau spasi, dan hsl(21, 90%, 48%). HSL ditampilkan dalam bilangan bulat, seperti biasa ditulis CSS, jadi mengonversi dari HSL kembali ke HEX bisa berbeda satu langkah dari aslinya.

Kesalahan umum

• Menilai kontras dengan mata. Layar, pencahayaan, dan mata Anda berbeda-beda. Angka tidak.
• Hanya melihat baris teks besar. Isi tulisan adalah teks normal: lihat baris-baris pertama.
• Teks di atas foto. Pemeriksa membandingkan dua warna polos. Taruh teks di atas panel solid atau periksa bagian terburuk gambar.

Batas

Gambar hingga 40 MB dan sekitar 50 megapiksel. Warna dibaca seperti yang ditampilkan browser, dalam sRGB.