Menguji Kontras Warna Desain Web

Gambaran umum tentang tiga alat dan teknik untuk menguji dan memverifikasi kontras warna desain Anda yang mudah diakses.

Adam Argyle
Charlie Gleason

Misalnya, Anda memiliki beberapa teks dengan latar belakang terang, seperti ini:

Frasa 'The quick brown fox jumps over the lazy dog again' ditampilkan, dengan setiap kata atau beberapa kata berwarna biru lebih terang. Di atas setiap bagian kata yang memudar secara bertahap adalah skor rasio kontrasnya. Beberapa kata terakhir sangat sulit dibaca karena kontrasnya rendah.

Meskipun semua contoh dapat dibaca oleh Anda, hal ini tidak berlaku untuk semua orang.

Kontras warna yang mudah diakses adalah praktik yang memastikan teks dapat dibaca oleh semua orang. Terkadang pengujian kontras mudah dan terkadang sangat sulit. Pada akhir posting ini, Anda akan memiliki tiga alat dan teknik baru untuk memeriksa, memperbaiki, dan memverifikasi kontras desain web sehingga Anda dapat mengatasi skenario yang paling sulit.

WCAG dan kontras warna

Web Accessibility Initiative W3C menyediakan strategi, standar, dan referensi untuk memastikan bahwa internet dapat diakses oleh sebanyak mungkin orang. Pedoman yang mendasari standar ini disebut Web Content Accessibility Guidelines, atau WCAG. Versi stabil terbaru, WCAG 2.1, mencakup persyaratan aksesibilitas penting: kontras minimum.

Hubungan antara dua warna di WCAG 2.1 dijelaskan oleh rasio kontrasnya—yaitu, angka yang Anda dapatkan saat membandingkan luminans dua warna. Luminans adalah cara untuk menjelaskan 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 terkait penghitungan ini. Pada akhirnya, cara yang lebih andal akan diterapkan, tetapi saat ini, WCAG adalah yang terbaik yang kami miliki.

Apa aturannya?

AA AAA
Teks isi (< 24 px) 4,5 7
Teks besar (> 24 piksel) 3 4,5
UI (ikon, grafik, dll.) 3 tidak ditentukan

Rasio kontras yang lebih tinggi akan diberi skor dengan angka yang lebih tinggi, seperti 4,5 atau 7, bukan 3. Untuk lebih memahami tabel penskoran, lihat Pemeriksa Kontras Polypane.

Teks ditampilkan di atas warna ungu: satu pasangan adalah teks hitam di atas ungu dan pasangan lainnya adalah teks putih di atas ungu.
Manakah dari pasangan warna berikut yang lebih Anda rasakan kontras?

Menguji kontras antarwarna

Setelah mengetahui apa yang kita cari, bagaimana cara mengujinya? Berikut adalah tiga alat gratis untuk membantu Anda memeriksa, mengoreksi, dan mengukur kontras situs. Kelebihan dan kekurangan masing-masing akan diuraikan sehingga Anda dapat menguji aksesibilitas warna dan konten situs dengan percaya diri dengan berbagai cara.

  1. Pika
    Aplikasi MacOS, yang secara unik dapat menampilkan kontras warna apa pun di seluruh layar, warna pada gradien, warna dengan transparansi, dan lainnya. Intent bersifat eksplisit, pengguna memilih piksel untuk dibandingkan secara manual. Sedikit kurang otomatis dengan peningkatan fitur yang besar.
  2. VisBug
    Ekstensi lintas browser, yang secara unik dapat menampilkan lebih dari satu overlay kontras sekaligus, tetapi seperti DevTools, terkadang tidak dapat mendeteksi intent.
  3. Chrome DevTools
    DevTools terintegrasi dengan Chrome dan dilengkapi 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, Pika siap membantu. Pika memiliki akses ke setiap piksel di layar karena ini adalah alat sistem, bukan alat web.

Download Pika

Hal 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, sedangkan warna yang dibandingkan Pika dipilih secara manual dari titik mana pun di layar. Tindakan ini memberi Pika lebih banyak kontrol, dan membuka beberapa kasus penggunaan tambahan:

  • Membandingkan dua warna apa pun terlepas dari apakah warna tersebut ada 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-campuran di CSS.

Membandingkan dua warna

Membandingkan teks dengan warna latar belakang:

Dua warna abu-abu dibandingkan secara berdampingan, keduanya memiliki rasio kontras 13,01 dan lulus target AA dan AAA.

Membandingkan warna goresan dan isian grafik vektor:

Dua warna ungu dibandingkan dari ikon dua warna, keduanya memiliki rasio kontras 1,63 dan tidak lulus target WCAG apa pun.

Membandingkan warna dengan transparansi

Bandingkan warna teks dengan berbagai piksel sampel latar belakang. Di sini, abu-abu paling terang dari efek kaca buram digunakan sebagai warna perbandingan latar belakang.

Dua warna yang terlihat seperti abu-abu, tetapi sebenarnya adalah ungu yang sangat tidak jenuh, dibandingkan dari gambar dengan teks semi-transparan yang buram. Kedua warna tersebut memiliki rasio kontras 4,65 dan lulus target AA.

Membandingkan warna dengan gradien

Membandingkan teks pada gradien atau pada gambar. Di sini, L dari "Lasso" dibandingkan dengan warna biru muda pada gambar:

Screenshot dari acara TV menampilkan judul acara di atasnya, L berwarna putih dan biru di belakangnya dibandingkan. Layar tersebut memiliki rasio kontras 8 dan melewati target AA dan AAA.

VisBug

VisBug adalah alat yang terinspirasi dari FireBug bagi desainer dan developer untuk memeriksa, men-debug, dan bermain dengan desain situs mereka secara visual. Maksudnya adalah memiliki penghalang masuk yang lebih rendah daripada Chrome DevTools dengan mengemulasi UI dan UX dari alat desain yang sudah dikenal dan disukai banyak orang.

Coba VisBug atau instal di Chrome, Firefox, Edge, Brave, atau Safari.

Salah satu penawaran alatnya adalah alat Inspeksi Aksesibilitas.

Screenshot toolbar VisBug di sisi kiri halaman kosong, ikon alat aksesibilitas berwarna merah muda, dan popover ditampilkan yang memberikan petunjuk alat.

Periksa di seluruh browser (dan bahkan di seluler)

Setelah alat Pemeriksaan Aksesibilitas diklik, informasi aksesibilitas dari apa pun yang diarahkan pengguna, atau yang dinavigasi keyboard, akan dilaporkan di tooltip. Tooltip ini menyertakan perbandingan warna antara warna latar depan dan latar belakang yang ditemukan.

Komponen dengan judul dan ikon ditampilkan dengan kotak pembatas berwarna merah muda di sekitarnya, tooltip aksesibilitas VisBug mengarah ke kotak merah muda dengan laporan perbandingan warna dari warna teks dan latar belakangnya. Rasionya adalah 13,86 dan lulus target AA dan AAA.

Periksa satu atau beberapa

DevTools dapat melihat satu pasangan warna atau mendapatkan laporan tentang semua pasangan warna Anda di halaman, tetapi VisBug menawarkan jalan tengah yang baik dengan mengizinkan beberapa pasangan warna. Klik elemen dan tooltip akan tetap ada. Tahan Shift dan terus klik elemen lain, lalu semua tooltip akan tetap berada di tempatnya:

Daftar link di halaman web ditampilkan dengan beberapa overlay aksesibilitas VisBug, yang masing-masing secara kontekstual mengarah ke dan melaporkan kontras warna teks dan latar belakang yang ditemukan.

Hal ini sangat penting untuk desain berbasis komponen, dengan beberapa bagian komponen harus lulus skor rasio kontras. Metode ini memungkinkan Anda melihat semua bagian komponen tersebut sekaligus. Juga bagus untuk peninjauan desain.

Chrome DevTools

Jika Anda sudah menginstal Chrome, berarti Anda sudah dibekali dengan banyak alat pengujian kontras:

Pemilih warna Chrome DevTools

Di panel Gaya Chrome DevTools pada panel Elemen, nilai warna akan memiliki swatch warna persegi visual kecil di sampingnya. Saat swatch ini diklik, Anda akan melihat alat pemilih warna. Jika memungkinkan, bagian tengah alat akan menunjukkan kontras warna terhadap latar depan atau latar belakang.

Pada contoh berikut, pemilih warna dibuka untuk nilai warna properti kustom. Skor rasio kontras dilaporkan sebagai 15,79 dan memiliki dua tanda centang hijau, yang menunjukkan bahwa skor tersebut lulus persyaratan AA dan AAA WCAG 2.1:

Screenshot panel Elemen DevTools, dalam gaya, pemilih warna ditampilkan dan di tengah melaporkan rasio kontras warna 4,98.

Koreksi otomatis Pemilih Warna

Melihat skor saat memilih warna memang praktis, tetapi Chrome DevTools memiliki fitur tambahan untuk koreksi otomatis. Saat pemilih warna melaporkan skor kontras warna yang gagal diakses, pemilih warna dapat diluaskan untuk menampilkan target skor AA dan AAA, serta alat pipet mata. Di samping AA dan AAA terdapat swatch dan ikon muat ulang yang ketika diklik akan menemukan warna penerusan terdekat untuk Anda:

Jika Anda tidak terlalu pemilih warna, fitur koreksi otomatis adalah cara yang bagus untuk memenuhi pedoman aksesibilitas dan tidak perlu bekerja terlalu keras untuk menyelesaikan tugas.

Tooltip inspeksi

Alat pemilihan elemen memiliki fitur khusus selama pengarahan kursor halaman yang melaporkan informasi font, warna, dan aksesibilitas umum. Alat pemilihan elemen adalah ikon di sebelah kiri pada screenshot berikut. Ini adalah kotak dengan kursor panah di sudut kanan bawah. Opsi ini juga dapat dipilih menggunakan tombol pintasan Control+Shift+C (atau Command+Shift+C di MacOS).

Screenshot ikon kotak dan panah di DevTools yang memanggil alat pilih elemen.

Setelah diaktifkan, ikon akan berubah menjadi biru, dan mengarahkan kursor ke apa pun di halaman akan menampilkan tooltip pemeriksaan cepat berikut:

Screenshot overlay yang sangat mirip dengan VisBug, yang menampilkan beberapa informasi gaya dan bagian aksesibilitas yang menampilkan skor kontras 15,79 yang lulus target AA.

Alat ini memungkinkan Anda mengarahkan kursor ke sekitar halaman untuk melihat skor kontras, bukan alat pemilih warna yang mengharuskan Anda menemukan pilihan warna di panel Gaya. Seperti pemilih warna, alat ini hanya dapat menampilkan satu skor kontras dalam satu waktu.

Bump bump 'til you pass 🎶

Saya sering memeriksa kombinasi warna dengan alat pemeriksaan cepat ini dan mendapati bahwa warna tersebut hampir memenuhi rasio yang diperlukan. Daripada menggunakan fitur koreksi otomatis pemilih warna (karena saya pemilih), saya mendorong saluran warna di CSS dan mengamati hingga saya melewati rasio yang saya butuhkan. Saya menyebut proses ini "bump bump til you pass" karena saya menaikkan nomor saluran warna hingga lulus WCAG 2.1.

Langkah-langkahnya sebagai berikut, dan harus dilakukan dalam urutan yang tepat:

  1. Menetapkan fokus keyboard di dalam warna di panel Gaya.
  2. Aktifkan alat periksa elemen dengan pintasan keyboard Control+Shift+C (atau Command+Shift+C di MacOS).
  3. Arahkan kursor ke target.
  4. Tekan tombol atas/bawah pada keyboard untuk mengubah angka dalam nilai warna.

Hal ini berfungsi karena nilai gaya CSS masih memiliki fokus keyboard Anda, sementara mouse memungkinkan Anda mengarahkan kursor ke target. Pastikan untuk tidak mengklik target atau fokus akan berpindah dari area nilai warna dan tidak mengizinkan Anda mengubah nilai lagi hingga difokuskan kembali.

Ringkasan CSS

Hingga saat ini, Chrome DevTools telah menyediakan cara untuk melihat satu pasangan warna sekaligus, tetapi Ringkasan CSS dapat meng-crawl seluruh halaman Anda dan menampilkan semua pasangan yang tidak dapat diakses sekaligus:

Screenshot Ringkasan Ringkasan dari menjalankan alat perekaman Ringkasan CSS. Hasil ini menunjukkan 7 masalah kontras, yang menunjukkan pasangan warna yang ditemukan dan hasil yang gagal.

Baca selengkapnya tentang fitur ini di postingan ini Ringkasan CSS: Identifikasi peningkatan CSS potensial atau tonton Jocelyn Yeen di YouTube dalam serial Tips DevTools yang mengajarkan cara Mengidentifikasi peningkatan CSS potensial dengan panel Ringkasan CSS.

Mercusuar

Lighthouse adalah alat audit lain di Chrome DevTools. Alat ini dapat meng-crawl halaman Anda dan melaporkan pasangan warna yang tidak dapat diakses. Halaman ini menampilkan screenshot kecil dari setiap pencocokan warna untuk Anda tinjau, lulus, dan gagal. Setiap kombinasi yang gagal akan berdampak negatif pada skor Lighthouse Anda.

Berikut tampilan hasil tersebut:

Screenshot evaluasi Lighthouse, yang menampilkan hasil teks kontras rendah dari kombinasi warna 2 kata.

Konsol JS

Mungkin semua alat yang tercantum sejauh ini tidak di tempat Anda berada. Mungkin tempat Anda berada (sepanjang hari) adalah JavaScript. Berikut adalah eksperimen yang dapat Anda coba. Panel Masalah di konsol dapat terus melaporkan masalah aksesibilitas kontras warna saat Anda mem-build. Aktifkan fitur ini di Setelan > Eksperimen, seperti yang ditunjukkan di bawah ini:

Screenshot kotak centang yang diaktifkan: &#39;Aktifkan pelaporan masalah kontras otomatis melalui panel Masalah&#39;.

Kemudian, buka panel Masalah dan lihat apakah ada penemuan. Jika ya, tampilannya dapat terlihat seperti ini:

Screenshot panel Masalah di dalam Konsol, yang melaporkan 6 error terkait kontras.

Emulasi buta warna

Selagi membahas topik kontras warna dan memastikan pasangan warna yang dapat diakses, sebaiknya tunjukkan alat emulasi kekurangan penglihatan. Cara ini akan mengubah warna atau tampilan desain untuk menunjukkan hasil dari berbagai kebutaan warna, yang memberi Anda kesempatan untuk mengubah desain sehingga warna bukan satu-satunya cara UX berkomunikasi kepada pengguna.

Screenshot opsi di DevTools emulasi untuk mengemulasikan kekurangan daya penglihatan: tidak ada emulasi, penglihatan buram, protanopia, deuteranopia, tritanopia, achromatopsia.

Menggunakan warna secara eksklusif untuk menggambarkan informasi, seperti merah untuk buruk dan hijau untuk baik, bukanlah praktik aksesibilitas yang aman. Sebagian orang tidak melihat warna hijau atau merah sama, dan alat emulasi ini akan membantu Anda merasakan dan mengingatnya.

Emulasi preferensi sistem kontras warna

Semakin banyak pengguna yang mengubah setelan kontras di sistem operasi mereka, sehingga mereka dapat meminta personalisasi kontras yang lebih sedikit atau lebih banyak di UI mereka. CSS dapat memanfaatkan setelan ini, seperti halnya 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.

Screenshot opsi di DevTools emulasi untuk mengemulasikan kueri media CSS prefers-contrast: tidak ada emulasi, lebih, kurang, kustom.

Mencoba APCA WCAG 3.0

Eksperimen lain yang dapat dicoba adalah menguji pasangan warna Anda dengan sistem skor rasio warna APCA eksperimental. Diaktifkan melalui Setelan > Eksperimen, fitur ini mengganti sistem rasio WCAG 2.1 dengan algoritma pemeriksa kontras yang lebih baru dan lebih baik, sehingga Anda dapat melihat pratinjau hasilnya saat proposal tersebut mengarah ke standar.

Screenshot kotak centang yang diaktifkan: &#39;Aktifkan Advanced Perceptual Contrast Algorithm (APCA) baru menggantikan rasio kontras dan pedoman AA/AAA sebelumnya.&#39;

Setelah diaktifkan, gunakan tooltip periksa titik atau pemilih warna untuk melihat skor pencocokan warna dan melihat apakah skor tersebut lulus:

Tooltip elemen inspeksi Devtools menampilkan -100,2% untuk skor kontras pada elemen dd.

Kesimpulan

Kontras warna adalah bagian penting dari teka-teki untuk aksesibilitas di web, dan mematuhinya akan membuat web lebih mudah digunakan oleh banyak orang dalam situasi yang paling beragam. Semoga ketiga alat ini membantu Anda merasa mampu membuat pilihan warna yang bagus.