Lima pilihan 'Checker Kontras' yang mudah digunakan untuk petugas

2024/07/29

Pemeriksa kontrasadalah untuk menghitung rasio kontras warna latar depan (teks dan elemen grafis) dan warna latar belakang di situs web atau gambar, yaitu perbedaan terang dan gelap,Apakah rasio tersebut sesuai dengan pedoman aksesibilitas web seperti WCAG atau JIS.alat untuk menilaiIni adalah. Ini juga dikenal sebagai pemeriksa rasio kontras atau pemeriksa kontras warna.

Dalam artikel ini, kami akan memperkenalkan lima alat pemeriksa kontras yang representatif.

Kami akan menjelaskan lebih rinci tentang pengenalan alat-alat ini serta poin-poin dalam memeriksa rasio kontras.Untuk para petugas yang bertanggung jawab atas aksesibilitas web, mohon referensikan artikel ini.

Lima Pilihan Pengecek Kontras yang Mudah Digunakan untuk Petugas Aksesibilitas

Ada berbagai jenis pemeriksa kontras yang menjadi wajib bagi desainer dan petugas aksesibilitas untuk memverifikasi kontras situs web dan konten mereka.

Oleh karena itu, di sini kita akan membahasPemeriksa kontras yang representatif dan mudah digunakanKami akan memperkenalkan lima dari mereka. Ada alat yang dapat digunakan di situs web (browser) dan ada juga alat yang dapat diinstal.Semua adalah alat yang dapat digunakan secara gratis.Kami akan memperkenalkan ini, jadi silakan coba pengalaman penggunaan terlebih dahulu.

Nama alat	Ciri-ciri	Lingkungan penggunaan
① WebAIM	Alat yang dapat digunakan segera setelah mengakses situs. Ini adalah situs berbahasa Inggris, tetapi antarmukanya sederhana dan mudah dipahami, membuatnya nyaman digunakan.	Peramban
② ColorTester	Anda dapat memeriksa kontras dengan menyeret dan melepas gambar. Karena merupakan instalasi, penggunaan di tempat kerja mungkin dibatasi.	Instalasi (Windows / Mac)
③ AdobeColor	Selain fitur pemeriksaan kontras, dilengkapi dengan berbagai fungsi terkait warna. Kemampuan integrasi dengan produk Adobe seperti Photoshop, Illustrator, dan inDesign juga tersedia.	Peramban
④ Pemeriksa kontras warna WCAG	Diinstal di Google Chrome dan digunakan sebagai ekstensi. Ini adalah alat yang sangat berguna untuk memverifikasi kontras situs web.	Peramban (Fungsi ekstensi Chrome)
⑤ ContrastGrid	Ini adalah alat yang memungkinkan Anda untuk melihat daftar kontras warna yang ditetapkan. Anda dapat mengatur beberapa kode warna, sehingga memudahkan bagi orang yang tidak mahir dalam pemilihan warna dan membantu dalam menentukan warna yang digunakan.	Peramban

 

① WebAIM

Tentukan warna depan (Foreground) dan warna latar belakang (Background) untuk menghitung rasio kontras,Periksa apakah Anda memenuhi standar WCAG.Anda dapat melakukannya. Warna dapat ditentukan dengan kode warna atau pemilih warna, dan juga memungkinkan penyesuaian kecerahan. Setelah mengatur warna, rasio kontras dihitung secara real-time, dan pratinjau dapat dilihat dalam teks biasa, teks tebal, serta objek grafis seperti tanda centang.

Setiap hasil dapat dengan mudah dilihat apakah memenuhi tingkat kepatuhan dengan label "Pass" atau "Fail".Navigasi dalam bahasa Inggris, tetapi sederhana dan mudah dipahami.Oleh karena itu, Anda tidak akan bingung dengan penggunaan umum.

Halaman resmi:WebAIM

② ColorTester

Menghitung rasio kontras antara dua warna dan mengevaluasinya sesuai dengan standar JIS X 8341-3:2010 (WCAG 2.0).Dengan menyeret dan menjatuhkan file gambar ke jendela, Anda bisa secara otomatis memperkirakan dan mengevaluasi warna depan dan latar belakang gambar.itu.

Ini adalah alat buatan Jepang yang mendukung kedua OS Windows dan Mac, tetapi,Instalasi alat diperlukan.အရေးကြီးပါကအော်ပရေတာ စနစ်၏အသုံးပြုနိုင်မည့် ဗားရှင်းမှာ Windows 8.1 နှင့်အထက် နှင့် Mac OS X 10.10 နှင့်အထက်ဖြစ်သည်။ အင်္ဂလိပ်ဗားရှင်းလည်း ရနိုင်ပါသည်။

Halaman resmi:ColorTester

③ Adobe Color

Ini adalah alat yang disediakan oleh Adobe, yang mengembangkan dan menjual alat untuk pencipta. Alat itu sendiri dilengkapi dengan berbagai fungsi yang berguna untuk kegiatan kreatif sebagai alat pemilihan warna, tetapi termasuk pemeriksa kontras untuk pemeriksaan aksesibilitas sebagai salah satu fungsinya.

Rasanya mirip dengan pemeriksa kontras lainnya, tetapi,Ini juga merekomendasikan warna kontras terbaik untuk warna yang ditetapkan.Meskipun merupakan alat buatan Adobe, Anda dapat menggunakannya tanpa instalasi atau login, tetapi jika Anda login,Karena dapat terhubung dengan produk Adobe lainnya, alat ini sangat berguna bagi desainer yang biasa menggunakan aplikasi Adobe.seharusnya.

Halaman resmi:Adobe Color

④ Pemeriksa kontras warna WCAG

Ekstensi (add-on) Google ChromeIni adalah alat yang dapat digunakan. Ini secara instan mengekstrak warna yang digunakan di halaman situs web dan menilai kontras setiap warna. Anda dapat memeriksa per halaman, sehingga alat ini mudah digunakan untuk memeriksa situs web dalam tahap pengujian dan pemeliharaan pada situs web yang sudah aktif.

Dengan mengklik warna mana pun yang ditampilkan di panel kontrol samping, akan memperbesar bagian yang digunakan di dalam halaman.Pemeriksaan situs dengan informasi yang banyak seperti portal juga dapat dilakukan dengan mudah.。

Halaman resmi:Pemeriksa kontras warna WCAG

⑤ Contrast Grid

Pemeriksa kontras sering kali merupakan alat yang memungkinkan Anda menentukan warna dan memeriksa kontras setiap kali, tetapi alat ini adalahPalet warna (daftar) ditampilkan dan Anda dapat memilih kombinasi kontras yang ingin digunakan.Oleh karena itu, metode ini direkomendasikan untuk pemula dalam desain atau bagi mereka yang kesulitan dalam memilih warna.

Ketika Anda mengunjungi situs resmi, kombinasi warna default sudah ditampilkan seperti pada gambar di atas. Dengan menambahkan kode warna di kotak kiri, Anda dapat melihat kombinasi dengan warna lain di palet.Level kepatuhan seperti "AA" dan "AAA" ditampilkan sebagai label, dan dapat dilihat apakah kepatuhan dapat dipastikan dari perbedaan warna label.Oleh karena itu, kombinasi yang dapat digunakan sangat jelas.

Halaman resmi:Contrast Grid

Saya telah memperkenalkan lima pemeriksa kontras yang berguna, tetapi mengapa verifikasi kontras itu perlu? Saya akan menjelaskan selanjutnya.

Mengapa pemeriksaan kontras itu perlu?

Menjelang pemberlakuan Undang-Undang Revisian tentang Penghapusan Diskriminasi Penyandang Disabilitas yang mulai berlaku pada April 2024 ,Kepatuhan terhadap aksesibilitas web juga merupakan langkah wajib.Ini menjadi perlu. Dalam merespons ini, pertama-tama perlu untuk memeriksa tingkat pencapaian aksesibilitas situs web perusahaan Anda dengan memeriksa situs web dari berbagai sudut.

Terutama, karena situs web mengandung banyak informasi yang diberikan secara visual, tidak hanya untuk orang yang tidak memiliki gangguan penglihatan (sebagai referensi: orang yang tidak memiliki gangguan penglihatan).apakah situs kami memungkinkan pengguna dengan penglihatan rendah, orang tua, atau mereka dengan karakteristik penglihatan untuk mengenali teks dan gambarharus dengan cermat memverifikasi apakah aksesibilitas web dapat dipastikan dan melakukan perbaikan yang diperlukan.

Dan salah satu indikator yang diperlukan untuk verifikasi tersebut adalah"Rasio Kontras Warna"ini adalah. Rasio kontras adalah indikator yang menunjukkan perbedaan kecerahan antara dua warna di layar (biasanya warna depan dan latar belakang). Rasio ini mengekspresikan kecerahan relatif dari dua warna dalam angka; semakin tinggi rasio kontras, semakin mudah membedakan warna. Secara umum,Rasio kontras dinyatakan dalam rentang dari 1:1 hingga 21:1, di mana semakin tinggi nilainya, semakin kuat kontrasnya = semakin mudah dikenali.。

Nah, kami akan melihat seberapa besar perbedaan tampilan yang disebabkan oleh perbedaan rasio kontras, silakan lihat di bawah ini.

◆Perbezaan cara lihat berdasarkan nisbah kontras

Lebih jauh, sebagai gambaran ketika huruf terlihat kabur seperti pada orang dengan penglihatan rendah, gambar di atas telah diterapkan blur.

◆Perbedaan cara pandang saat terlihat kabur

Dengan cara ini,Ketika rasio kontras tinggi, perbedaan antara warna latar belakang dan semua warna sangat mencolok sehingga batas warna lebih mudah dikenali, yang berarti keterbacaan lebih tinggi.Misalnya, jika warna teks dan warna latar belakang adalah 1:1, kedua warna tersebut tidak dapat dikenali karena sama, sedangkan pada rasio 21:1, dapat ditampilkan sebagai putih dan hitam dan dikenali dengan jelas.Di situs web di mana berbagai elemen seperti teks dan gambar bercampur, kita harus merancang dengan memperhatikan rasio kontras dengan cermat agar aksesibilitas web terjamin.。

Oleh karena itu, kontras desain situs perusahaan Anda"Apakah memenuhi persyaratan untuk memastikan aksesibilitas web?"Untuk menilai AAA, pemeriksaan kontras adalah tugas yang penting, tetapi ituUntuk penilaian kuantitatif, 'pemeriksa kontras' adalah alat yang penting.Dengan demikian, kami akan menjelaskan persyaratan aksesibilitas web pada bagian berikutnya.

Tiga poin untuk memeriksa kontras

Saat menggunakan pemeriksa kontras untuk memverifikasi rasio kontras situs web atau konten, Anda tidak boleh menentukan ya atau tidak berdasarkan perasaan Anda sendiri.Harus dilakukan verifikasi sesuai dengan standar aksesibilitas web yang ditentukan.Di sini, akan dijelaskan tiga poin penting yang perlu diperhatikan saat memeriksa kontras.

Poin ① Memahami rasio kontras yang memenuhi standar JIS.

Seperti yang disebutkan sebelumnya, dengan undang-undang anti-diskriminasi penyandang disabilitas yang direvisi yang mewajibkan penyediaan akomodasi yang wajar, memastikan aksesibilitas web menjadi suatu keharusan bagi semua bisnis.

Ada berbagai elemen yang membentuk situs web, dan masing-masing memiliki standar aksesibilitas yang ditetapkan, dan semua kriteria pencapaian ditetapkan oleh standar internasional yang disebut WCAG 2.0 (Pedoman Aksesibilitas Konten Web 2.0). Di Jepang,Standar JIS (JIS X 8341-3:2016)yang termasuk di dalamnya.

Selain itu, tingkat kepatuhan dalam standar ini ditentukan oleh tingkat A hingga AAA, dan menurut Kementerian Dalam Negeri, Untuk memastikan aksesibilitas web, perlu mematuhi standar AA atau AAA (disarankan).dikenal.

Referensi:Tanggung jawab aksesibilitas untuk halaman web yang diminta oleh lembaga publik (Kementerian Dalam Negeri).

Dan, ada juga standar yang ditetapkan untuk rasio kontras.

◆ nisbah kontras untuk mematuhi tingkat kepatuhan AA dan AAA

Tingkat kepatuhan	Rasio kontras yang diperlukan
AA	Lebih dari 4.5:1
AAA	lebih dari 7:1

Dengan kata lain, untuk website yang sesuai dengan aksesibilitas web,Rasio kontras minimal 4,5:1 diperlukan.Banyak pemeriksa kontras secara otomatis menghitung rasio kontras, jadi mari kita periksa dengan memperhatikan rasio ini.

Perlu dicatat bahwa rasio kontras AAA 7:1 ditetapkan berdasarkan pengguna dengan penglihatan yang menurun hingga sekitar 20/80, dan W3C mengasumsikan bahwa pengguna yang memiliki penglihatan yang turun di atas 20/80 biasanya menggunakan teknologi bantuan untuk mengakses konten.

AAA tidak diwajibkan untuk dicapai, hanya disarankan, tetapi,Jika Anda merancang dengan mengingat pengguna dengan penglihatan rendah atau karakteristik persepsi warna yang tidak memiliki teknologi bantuan, Anda seharusnya merancang dengan rasio kontras 7:1.seharusnya.

Referensi:Memahami Kriteria Pencapaian 1.4.6 | Panduan WCAG 2.0 (W3C)

Poin② Perhatikan juga ukuran font

Pada poin ① disebutkan bahwa "rasio kontras harus setidaknya 4.5:1", tetapi sebenarnya ada pengecualian terhadap ini.Dalam kasus-kasus berikut, tidak selalu perlu memenuhi 4.5:1.

◆Pengecualian dari kepatuhan terhadap standar rasio kontras

・Pengecualian ① Teks besar dan teks tebal
Untuk teks besar atau tebal (teks normal di atas 18 poin atau teks tebal di atas 14 poin),Rasio kontras adalah 3:1.Jika demikian, itu memenuhi kriteria. Hal ini karena huruf besar memiliki visibilitas yang lebih tinggi, sehingga dianggap tidak masalah jika kontrasnya sedikit lebih rendah.

・Pengecualian② Teks dan logo yang bersifat dekoratif
Teks tambahan yang bersifat dekoratif dan logo perusahaan dikecualikan dari kualitas rasio kontras ini. Ini digunakan untuk desain dan pengenalan merek dan tidak dianggap sebagai sarana untuk menyampaikan informasi.

・Pengecualian③ Teks dalam gambar
Teks dalam foto atau gambar juga termasuk dalam pengecualian. Namun,terutama untuk teks yang penting dalam penyampaian informasi, bahkan jika ada di dalam gambar, harus memiliki rasio kontras yang sesuai.Disarankan.

Poin ③ Mempertimbangkan pengguna dengan karakteristik penglihatan juga diperlukan.

Sampai saat ini, kami telah fokus pada rasio kontras saja, tetapi ketika mempertimbangkan aksesibilitas warna, ternyata rasio kontras saja tidak cukup. Karena,Perhatian terhadap pengguna dengan karakteristik penglihatankarena itu juga harus dipertimbangkan.

Misalnya, di bawah ini adalah urutan tombol yang sering kita lihat di formulir email di situs web, di mana kedua tombol memiliki rasio kontras antara warna latar belakang dan warna teks yang sesuai dengan standar AA.

◆ Tombol yang Mematuhi Rasio Kontras AA

Sering kali kita berpikir bahwa "rasio kontras telah memenuhi standar, jadi aksesibilitas telah terjamin," tetapi ini bukanlah kesimpulan yang tepat. Tombol ini memilikiPenglihatan warna tipe D (dua jenis dua warna)Jika dilihat melalui filter tersebut, tampilannya akan terlihat seperti di bawah ini.

◆ Tampilan Tombol untuk Tipe D dari Warna Penglihatan

Dengan cara ini,Dua tombol tersebut memiliki warna yang mirip sehingga sulit untuk dibedakan sekilas.Meskipun rasio kontras telah memenuhi nilai standar, itu tidak berarti bahwa kegunaan baik. Dengan kata lain, ketika memilih warna, tidak hanya rasio kontras yang perlu dipertimbangkan, tetapi juga karakteristik penglihatan.

Selain itu, dalam hal perhatian terhadap pengguna dengan karakteristik penglihatan,"Jangan sampaikan informasi hanya dengan perbedaan warna."Hal ini juga menjadi poin penting yang perlu diperhatikan.

di Uniweb, pengguna dapat mengubah kontras.

Jika Anda tidak memiliki sumber daya untuk memeriksa kontras situs Anda, kamialat aksesibiliti "Uniweb"Kami merekomendasikan penerapan ini. Uniweb hanya dengan menambahkan satu baris kode ke sumber situs web akan memberikan berbagai fungsi aksesibilitas.Implementasi segeraIni adalah alat berbentuk plugin yang dapat digunakan.

Salah satu ciri utama Uniweb adalahPengguna dapat menggunakan berbagai fungsi aksesibilitas saat menjelajahi situs web.Ini adalah fitur. Salah satu fitur aksesibilitas yang diimplementasikan adalah kemampuan untuk menyesuaikan kontras, yang memungkinkan peningkatan keterbacaan hanya dengan mengklik untuk beralih antara "warna terbalik", "kontras gelap", dan "kontras terang".

◆ Fungsi Pengubah Kontras Uniweb

Selain itu, di layar manajemen:Laporan diagnosis mengenai respons aksesibilitas web situs.Anda dapat memverifikasinya. Laporan akan menunjukkan tingkat kepatuhan (A, AA, AAA) untuk setiap item, dan untuk bagian yang perlu diperbaiki, metode perbaikan spesifik pada kode juga ditampilkan.Anda tidak perlu mencari perbaikan menggunakan berbagai alat verifikasi, sehingga operasi dapat dilakukan secara efisien.。

◆ Antarmuka manajemen Uniweb

Di sudut kanan bawah artikel iniklik 'ikon manusia berbentuk bulat biru'Jika Anda melakukannya, menu aksesibilitas Uniweb akan ditampilkan. Selain pengalihan kontras, terdapat berbagai fitur aksesibilitas lainnya, jadi silakan coba fungsi Uniweb secara langsung.

Ringkasan

Di situs web yang banyak berfokus pada informasi visual,Menjamin visibilitas dan keterbacaan untuk semua pengguna.Kita harus melakukannya. Oleh karena itu, penting untuk memahami perhatian yang diperlukan bagi pengguna dengan penglihatan rendah, orang tua, dan mereka dengan karakteristik penglihatan, dan menerapkan desain yang dapat diakses dengan tepat di situs web kita.

Pengecek kontras adalah alat yang sangat berguna dalam mencapai desain aksesibilitas. Banyak yang termasuk dalam alat pemeriksaan aksesibilitas web berbayar, tetapiJika hanya pemeriksa kontras, alat gratis sudah cukup untuk digunakan.Oleh karena itu, silakan mulai dengan memeriksa situs web Anda sendiri.

Dalam artikel ini, kami telah memfokuskan pada pemeriksaan rasio kontras dalam konteks aksesibilitas web.Untuk informasi lebih lanjut tentang aksesibilitas web, silakan lihat artikel sebelumnya di situs kami atau panduan 'Web Accessibility Implementation Handbook' yang disediakan oleh Biro Digital.。

Referensi:Artikel sebelumnya 'Apa yang harus dilakukan oleh pengelola situs untuk memastikan aksesibilitas web?'、Panduan Penerapan Aksesibilitas Web (Kantor Digital)

Selain itu, di Uniweb kamiKami juga menawarkan diagnosis gratis untuk situs web Anda.Karena kami mengimplementasikannya, bagi para pelaku bisnis yang sedang mempertimbangkan respons terhadap aksesibilitas web situs mereka,Tautan di bawah iniSilakan mendaftar dengan lebih mudah.

Diagnosis Aksesibiliti Percuma (Uniweb)

Pemeriksa kontras