Menguji Kontras Warna Desain Web

Ikhtisar dari tiga alat dan teknik untuk menguji dan memverifikasi kontras warna yang dapat diakses dari desain Anda.

Adam Argyle
Charlie Gleason

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

Frasa 'Rubah cokelat cepat melompati malas' ditampilkan, dan setiap kata atau beberapa kata berwarna biru yang lebih terang. Di atas setiap bagian kata yang secara bertahap memudar 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 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?

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

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.
Manakah dari pasangan warna berikut yang lebih Anda rasa kontrasnya?

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.

  1. 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.
  2. 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.
  3. 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.

Download Pika

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:

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

Membandingkan warna pengisi dan goresan grafik vektor:

Dua warna ungu dibandingkan dari ikon berwarna duo, mereka memiliki rasio kontras 1,63 dan tidak meneruskan target WCAG apa pun.

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.

Dua warna yang terlihat seperti abu-abu tetapi sebenarnya warna ungu sangat desaturasi dibandingkan dari gambar dengan teks semi-transparan buram, mereka memiliki rasio kontras 4,65 dan melewati target AA.

Membandingkan warna dengan gradien

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

Screenshot dari acara TV menampilkan judul acara di atas, huruf L berwarna putih dan biru di belakangnya dibandingkan. Keduanya memiliki rasio kontras 8 dan lulus target AA dan AAA.

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.

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

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.

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

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:

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

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 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:

Screenshot panel DevTools Elements, dengan gaya pemilih warna ditampilkan dan di bagian tengah melaporkan rasio kontras warna 4,98.

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).

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

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

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

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:

  1. Setel fokus keyboard dalam warna di panel Gaya.
  2. Aktifkan alat elemen pemeriksaan dengan pintasan keyboard Control+Shift+C (atau Command+Shift+C di MacOS).
  3. Arahkan kursor ke target.
  4. 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:

Screenshot Ringkasan Ringkasan saat menjalankan alat pengambilan Ringkasan CSS. Laporan ini menunjukkan 7 masalah kontras, yang menunjukkan pasangan warna yang ditemukan dan hasil yang gagal.

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:

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

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:

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

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

Screenshot panel Issues di dalam Konsol untuk melaporkan 6 error di sekitar kontras.

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.

Screenshot opsi di DevTools emulasi untuk mengemulasi kekurangan penglihatan: tidak ada emulasi, penglihatan kabur, protanopia, deuteranopia, tritanopia, achromatopsia.

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.

Screenshot opsi di DevTools emulasi untuk mengemulasi kueri media CSS lebih memilih kontras: tidak ada emulasi, lebih banyak, lebih sedikit, khusus.

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.

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

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

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

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.