Ikhtisar dari tiga alat dan teknik untuk menguji dan memverifikasi kontras warna yang dapat diakses dari desain Anda.
Misalnya Anda memiliki beberapa teks dengan latar belakang terang, seperti ini:
Meskipun semua contoh dapat dibaca oleh Anda, hal ini tidak berlaku untuk semua orang.
Kontras warna yang aksesibel adalah praktik yang memastikan teks dapat dibaca oleh semua orang. Terkadang pengujian kontras itu mudah dan terkadang sangat sulit. Di akhir postingan ini, Anda akan memiliki tiga alat dan teknik baru untuk memeriksa, mengoreksi, dan memverifikasi kontras desain web sehingga Anda dapat mengatasi skenario yang paling sulit.
WCAG dan kontras warna
Inisiatif Aksesibilitas Web W3C memberikan strategi, standar, dan resource untuk memastikan bahwa internet dapat diakses oleh sebanyak mungkin orang. Pedoman yang melandasi standar ini disebut {i>Web Content Accessibility Guidelines<i}, atau WCAG. Versi stabil terbaru, WCAG 2.1, mencakup persyaratan aksesibilitas yang penting: kontras minimum.
Hubungan antara dua warna dalam WCAG 2.1 dijelaskan oleh rasio kontrasnya yaitu, angka yang Anda dapatkan saat membandingkan luminans dua warna. Luminans adalah cara mendeskripsikan seberapa dekat warna dengan hitam (0%) atau putih (100%). WCAG menentukan beberapa aturan dan algoritma penghitungan terkait rasio kontras yang diperlukan agar web dapat diakses. Namun, ada masalah umum pada penghitungan ini. Pada akhirnya, cara yang lebih andal akan digunakan, tetapi saat ini, WCAG adalah yang terbaik.
Apa saja aturannya?
Rasio kontras yang lebih tinggi diberi skor dengan angka yang lebih tinggi, seperti 4,5 atau 7, bukan 3. Untuk lebih memahami tabel skor, lihat Pemeriksa Kontras Polypane.
![Teks ditampilkan di atas ungu: satu pasangan adalah teks hitam di atas ungu dan yang lainnya adalah teks putih di atas ungu.](https://web.dev/static/articles/testing-web-design-color-contrast/image/text-is-shown-purple-p-2fb14a88b4576.png?authuser=6&hl=id)
Menguji kontras antar-warna
Setelah mengetahui apa yang dicari, bagaimana cara mengujinya? Berikut ini tiga alat gratis untuk membantu Anda memeriksa, mengoreksi, dan mengukur kontras situs web Anda. Kekuatan dan kelemahan masing-masing akan diuraikan agar Anda dapat menguji aksesibilitas warna dan konten situs Anda dengan banyak cara.
- Pika
Aplikasi MacOS, secara unik yang mampu menampilkan kontras warna apa pun di seluruh layar, warna pada gradien, warna dengan transparansi, dan banyak lagi. Intent bersifat eksplisit, pengguna memilih piksel secara manual untuk dibandingkan. Sedikit kurang otomatis dengan peningkatan fitur yang besar. - VisBug
Ekstensi lintas browser, yang secara unik mampu menampilkan lebih dari satu overlay kontras dalam satu waktu, namun seperti DevTools, terkadang tidak dapat mendeteksi intent. - Chrome DevTools
DevTools disertakan dalam Chrome dan dikemas dengan berbagai cara untuk memeriksa, memperbaiki, dan men-debug masalah warna, tetapi memiliki kekurangan saat memeriksa gradien dan warna semi-transparan, dan terkadang tidak dapat mendeteksi intent.
Pika (aplikasi macOS)
Jika DevTools atau VisBug tidak dapat menilai kontras dengan benar, seperti saat Anda perlu menguji warna di luar browser, atau saat transparansi atau gradien terlibat, maka Pika siap membantu hari. Pika memiliki akses ke setiap piksel di layar karena ini adalah alat sistem, bukan alat web.
Ini juga berarti UX untuk menggunakan Pika berbeda dengan DevTools atau VisBug. DevTools dan VisBug melakukan yang terbaik untuk menampilkan warna teks dan latar belakang dari DOM browser, sementara warna yang dibandingkan Pika dipilih secara manual dari titik mana pun di layar. Tindakan ini memberi Pika kontrol lebih besar, dan membuka beberapa kasus penggunaan tambahan:
- Membandingkan dua warna apa pun terlepas dari apakah keduanya berada di browser atau tidak—jika Anda dapat melihatnya di layar, Anda dapat mengujinya.
- Membandingkan warna dengan transparansi.
- Membandingkan warna dalam gradien.
- Membandingkan warna yang menggunakan mode campuran, seperti mode campuran di CSS.
Membandingkan dua warna mana pun
Membandingkan teks dengan warna latar belakang:
Membandingkan warna pengisi dan goresan grafik vektor:
Membandingkan warna dengan transparansi
Membandingkan warna teks dengan berbagai piksel sampel latar belakang. Di sini, abu-abu muda dari efek kaca buram digunakan sebagai warna perbandingan latar belakang.
Membandingkan warna dengan gradien
Membandingkan teks pada gradien atau pada gambar. Di sini L dari "Lasso" dibandingkan dengan warna biru muda dari gambar:
VisBug
VisBug adalah alat yang terinspirasi FireBug bagi desainer dan developer untuk memeriksa, men-debug, dan bermain-main dengan desain situs mereka secara visual. Dimaksudkan untuk memiliki hambatan masuk yang lebih rendah daripada Chrome DevTools dengan mengemulasi UI dan UX dari alat desain yang dikenal dan disukai orang untuk digunakan.
Coba VisBug atau instal di Chrome, Firefox, Edge, Brave, atau Safari.
Salah satu penawaran alatnya adalah alat Pemeriksaan Aksesibilitas.
Inspeksi di berbagai browser (dan bahkan di perangkat seluler)
Setelah alat Pemeriksaan Aksesibilitas diklik, informasi aksesibilitas apa pun yang dituju pengguna atau keyboard akan dilaporkan di tooltip. Tooltip ini menyertakan perbandingan warna antara warna latar depan dan latar belakang yang ditemukan.
Memeriksa satu atau beberapa
DevTools dapat melihat satu pasangan warna atau mendapatkan laporan semua pasangan warna Anda di halaman, tetapi VisBug menawarkan jalan tengah yang bagus dengan mengizinkan beberapa pasangan warna. Klik elemen dan tooltip akan tetap berada. Tahan Shift dan lanjutkan mengklik elemen lain, dan semua tooltip akan tetap tidak berubah:
Hal ini sangat penting untuk desain berbasis komponen, ketika beberapa bagian komponen harus lulus skor rasio kontras. Metode ini memungkinkan melihat semua bagian komponen tersebut sekaligus. Bagus juga untuk tinjauan desain.
Chrome DevTools
Jika Anda telah menginstal Chrome, berarti Anda telah dilengkapi dengan banyak alat pengujian kontras:
- Pemilih warna
- tooltip inspeksi
- Ringkasan CSS
- Mercusuar
- Konsol JS
- Alat emulasi buta warna
- Emulasi preferensi kontras warna sistem
- Eksperimen APCA 3.0 WCAG
Pemilih warna Chrome DevTools
Di panel Styles Chrome DevTools pada panel Elements, nilai warna akan memiliki contoh warna persegi visual kecil di sebelahnya. Saat {i>swatch<i} ini diklik, Anda akan melihat alat {i>color picker<i}. Jika memungkinkan, bagian tengah alat akan menampilkan kontras warna terhadap latar depan atau latar belakang.
Pada contoh berikut, pemilih warna dibuka untuk nilai warna properti khusus. Skor rasio kontras dilaporkan sebagai 15,79 dan memiliki dua tanda centang hijau, yang menunjukkan skor lulus persyaratan WCAG 2.1 AA dan AAA:
Koreksi otomatis Pemilih Warna
Anda dapat melihat skor saat memilih warna, tetapi Chrome DevTools memiliki fitur tambahan untuk koreksi otomatis. Saat pemilih warna melaporkan skor kontras warna yang gagal diakses, skor ini dapat diperluas untuk menampilkan target skor AA dan AAA , ditambah alat pipet tetes. Di samping AA dan AAA adalah swatch dan ikon refresh yang ketika diklik akan menemukan warna penerusan terdekat untuk Anda:
Jika Anda tidak pilih-pilih warna, fitur koreksi otomatis adalah cara yang tepat untuk memenuhi panduan aksesibilitas dan tidak bekerja terlalu keras untuk menyelesaikan tugas.
Tooltip inspeksi
Alat pemilihan elemen memiliki fitur khusus selama pengarahan kursor halaman yang melaporkan
font, warna, dan informasi aksesibilitas umum. Alat pemilihan elemen
adalah ikon di sebelah kiri pada screenshot berikut. Ini adalah kotak dengan kursor
panah di sudut kanan bawah. Kolom ini juga dapat dipilih menggunakan hotkey
Control+Shift+C
(atau Command+Shift+C
di MacOS).
Setelah diaktifkan, ikon akan berubah menjadi biru, dan mengarah ke apa pun di halaman akan menampilkan tooltip pemeriksaan cepat berikut:
Sebagai ganti alat pemilih warna, yang mengharuskan Anda menemukan contoh warna di panel Styles, alat ini memungkinkan Anda mengarahkan kursor ke halaman untuk melihat skor kontras. Seperti pemilih warna, fitur ini hanya dapat menampilkan satu skor kontras dalam satu waktu.
Kencangkan benturan sampai Anda melewatinya 🎶
Saya sering memeriksa pasangan warna dengan alat pemeriksaan cepat ini dan ternyata tidak meneruskan rasio yang diperlukan. Daripada menggunakan fitur koreksi otomatis dari pemilih warna (karena saya pemilih), saya mendorong saluran warna di CSS dan menontonnya sampai saya meneruskan rasio yang dibutuhkan. Saya menyebut proses ini "bump bump til you pass" karena saya menambahkan nomor saluran warna hingga lulus WCAG 2.1.
Langkah-langkahnya sebagai berikut, dan harus dilakukan dalam urutan yang sama persis:
- Setel fokus keyboard dalam warna di panel Gaya.
- Aktifkan alat elemen pemeriksaan dengan pintasan keyboard
Control+Shift+C
(atauCommand+Shift+C
di MacOS). - Arahkan kursor ke target.
- Tekan ke atas/bawah pada keyboard untuk mengubah angka dalam nilai warna.
Cara ini berfungsi karena nilai gaya CSS masih memiliki fokus keyboard Anda, sedangkan mouse memungkinkan Anda mengarahkan kursor ke target. Pastikan Anda tidak mengklik target atau fokus akan berpindah dari area nilai warna dan tidak memungkinkan Anda mendorong nilai lagi sampai fokus kembali.
Ringkasan CSS
Hingga saat ini, Chrome DevTools telah menyediakan cara untuk melihat satu pasangan warna dalam satu waktu, tetapi Ringkasan CSS dapat meng-crawl seluruh halaman Anda dan menyajikan semua pasangan yang tidak dapat diakses sekaligus:
Baca informasi selengkapnya tentang fitur ini di postingan Ringkasan CSS: Identifikasi potensi peningkatan CSS atau tonton Jecelyn Yeen di YouTube dalam serialnya di DevTools Tips yang mengajarkan Anda cara Mengidentifikasi potensi peningkatan CSS dengan panel Ringkasan CSS.
Mercusuar
Lighthouse adalah alat audit lain di Chrome DevTools. Fitur ini dapat meng-crawl halaman Anda dan melaporkan pasangan warna yang tidak dapat diakses. Panduan ini menampilkan screenshot kecil dari setiap pasangan warna untuk Anda tinjau, lulus, dan gagal. Setiap kombinasi yang gagal akan berdampak negatif pada skor Lighthouse Anda.
Hasilnya akan terlihat seperti berikut:
Konsol JS
Mungkin semua alat yang tercantum sejauh ini tidak sesuai dengan kemampuan Anda. Mungkin posisi Anda saat ini (sepanjang hari) adalah JavaScript. Berikut adalah eksperimen untuk dicoba. Panel Issues di konsol dapat terus melaporkan masalah aksesibilitas kontras warna apa pun saat Anda mem-build. Aktifkan fitur ini di Setelan > Eksperimen, seperti yang ditunjukkan berikut ini:
Kemudian buka panel Issue dan lihat apakah ada penemuan. Jika ya, tampilannya akan terlihat seperti ini:
Emulasi buta warna
Saat membahas topik kontras warna dan memastikan pasangan warna yang mudah diakses, sebaiknya tunjukkan alat emulasi kekurangan penglihatan. Tindakan ini akan mengubah warna atau tampilan desain untuk menunjukkan hasil dari berbagai kebutaan warna, yang memberi Anda kesempatan untuk memodifikasi desain sehingga warna bukan satu-satunya cara UX berkomunikasi dengan pengguna.
Bukan praktik aksesibilitas yang aman untuk hanya menggunakan warna untuk menggambarkan informasi, seperti merah untuk buruk dan hijau untuk kebaikan. Beberapa orang tidak melihat warna hijau atau merah sama dan alat emulasi ini akan membantu Anda mengalami dan mengingatnya.
Emulasi preferensi sistem kontras warna
Semakin banyak pengguna mengubah setelan kontras di sistem operasi mereka, sehingga pengguna dapat meminta lebih sedikit atau lebih banyak personalisasi kontras di UI mereka. CSS dapat memanfaatkan setelan ini, seperti yang dapat dilakukannya dengan preferensi tema terang atau gelap. Chrome DevTools menawarkan kemampuan untuk mengemulasi preferensi ini sehingga desain dapat diuji dan beradaptasi dengan permintaan pengguna tanpa mengalihkan setelan dari sistem.
Coba WCAG 3.0 APCA
Eksperimen lain yang dapat dicoba adalah menguji pasangan warna Anda dengan sistem skor rasio warna ACA eksperimental. Diaktifkan melalui Setelan > Eksperimen, fitur ini menggantikan sistem rasio WCAG 2.1 dengan algoritma pemeriksa kontras yang lebih baru dan lebih baik, sehingga Anda dapat melihat pratinjau hasilnya saat proposal bekerja menuju standar.
Setelah diaktifkan, gunakan tooltip pemeriksa titik atau pemilih warna untuk melihat skor penyambungan warna dan melihat apakah skor tersebut lulus:
Kesimpulan
Kontras warna adalah bagian penting teka-teki untuk aksesibilitas di web, dan dengan mematuhinya akan membuat web lebih bermanfaat bagi sebagian besar orang dalam situasi yang paling bervariasi. Mudah-mudahan, ketiga alat ini membantu Anda merasa diberdayakan untuk membuat pilihan warna yang bagus.