Apa itu Rasio WCAG? Mengapa Anda Harus Mengimplementasikannya dalam Desain Anda

Panduan Aksesibilitas Konten Web (WCAG) adalah panduan aksesibilitas untuk desain digital dan web. Mengikuti pedoman ini memastikan bahwa warna cukup kontras untuk membantu mereka yang memiliki gangguan penglihatan untuk melihat dan membaca desain Anda dengan benar. Ini juga sejalan dengan ukuran tipografi, untuk memastikan keterbacaannya bersama dengan warna.

Di dunia yang seharusnya lebih inklusif, menambahkan elemen yang mudah diakses ke desain Anda hanya akan meningkatkan karya Anda dan memungkinkan Anda membaginya dengan lebih banyak orang.

Apa itu Rasio WCAG?

WCAG adalah singkatan dari Pedoman Aksesibilitas Konten Web. WCAG membantu siapa saja yang mendesain atau berkreasi untuk web atau internet untuk memastikan desain mereka mencapai target aksesibilitas. Ini berarti desain Anda dapat dinikmati dan digunakan oleh siapa saja, tanpa terkecuali mereka yang memiliki gangguan penglihatan atau disabilitas lainnya jika memungkinkan.

Rasio WCAG menetapkan rasio minimum untuk mencapai aksesibilitas target. Ini termasuk kontras warna dan ukuran teks, keduanya memastikan mereka yang memiliki gangguan penglihatan memiliki kesempatan lebih baik untuk melihat, berinteraksi dengan, dan menggunakan desain Anda. Mencapai rasio WCAG tidak hanya membantu mereka yang memiliki gangguan penglihatan, tetapi juga meningkatkan pengalaman pengguna untuk semua pengguna web.

Itu World Wide Web Consortium mengembangkan standar untuk pengembangan web. Meskipun tidak ada aturan yang ditetapkan untuk aksesibilitas web, WCAG menetapkan standar yang harus dipatuhi oleh desainer web mana pun.

Saat menguji rasio kontras, WCAG menyarankan peringkat A hingga AAA. Peringkat A menunjukkan tingkat kontras terendah. AA adalah tingkat kontras rentang menengah dengan rasio 4,5:1—dianggap sebagai rasio minimum. Terakhir, AAA adalah tingkat kontras tertinggi. Jika mendesain untuk semua orang, tingkat kontras Anda paling baik saat berada di antara rentang AA dan AAA.

Mengapa Rasio WCAG Penting dalam Desain Grafis dan Web?

Desain grafis dan desain web seharusnya tidak hanya membuat informasi terlihat cantik. Desain informasi menginformasikan massa — ini berarti membuat informasi Anda dapat diakses oleh semua orang. Implementasi WCAG memastikan desain yang dapat diakses oleh mereka yang memiliki gangguan penglihatan, disleksia, neurodivergence, atau apa pun yang memengaruhi penglihatan atau kemampuan membaca seseorang.

Desain web dan digital—serta pemrograman—sudah menerapkan fitur aksesibilitas. Misalnya, Windows menyediakan alat aksesibilitas yang bermanfaat bagi pengguna, dan sudah menjadi hal yang lumrah untuk ditawarkan oleh sebagian besar video YouTube subtitel atau teks. Namun kami selalu dapat meningkatkan aksesibilitas.

Desain global menciptakan desain yang lebih baik. Semakin banyak orang yang dapat terlibat dengan desain Anda, semakin sukses desain tersebut, dan semakin luas jangkauannya. Tidak hanya baik bagi Anda sebagai desainer untuk menjangkau lebih banyak orang, tetapi lebih baik bagi dunia jika lebih sedikit orang yang dikecualikan.

Mendesain dengan rasio WCAG dan fitur aksesibilitas dalam desain Anda akan memberikan efek positif pada palet warna, pilihan tipografi, dan ukuran teks. Anda tidak akan dengan sengaja mendesain sesuatu yang sulit dibaca, jadi mengapa Anda tidak menyertakan lebih banyak cara untuk membuat desain dengan keterbacaan yang lebih baik untuk semua orang?

Menerapkan Rasio WCAG dalam Desain Anda

Ada beberapa tempat di mana Anda dapat memeriksa rasio WCAG pada desain Anda, seperti ini pemeriksa kontras situs web. Tetapi Anda harus tetap mempraktikkan penerapan fitur desain yang dapat diakses ke dalam pekerjaan Anda tanpa bergantung pada pemeriksaan minimal.

Perlu diperhatikan bahwa pedoman kontras tidak berlaku untuk desain logo. Ini karena logo disajikan dalam berbagai ukuran dan seringkali dengan latar belakang yang berbeda. Namun, tidak ada salahnya Anda mempertimbangkan rasio WCAG saat mendesain logo.

Warna Kontras Tinggi

Menggunakan warna kontras tinggi adalah cara mudah untuk menambahkan inklusivitas pada desain Anda. Warna yang kontras satu sama lain akan membantu mereka yang memiliki gangguan penglihatan dan buta warna untuk melihat desain Anda dengan lebih baik. Tidak hanya itu, bahkan orang yang tidak memiliki gangguan penglihatan pun akan lebih baik melihat—dan terlibat dengan—desain Anda.

Pernah mencoba membaca teks merah muda dengan latar belakang hijau muda? Hampir tidak mungkin. Tetapi teks biru tua dengan latar belakang kuning muda jauh lebih mudah dilihat dan dibaca.

Warna kontras tinggi berfungsi paling baik saat menempatkan teks pada latar belakang warna atau jika menggunakan jalur kecil dalam ilustrasi Anda. Khroma adalah generator palet warna AI yang dilengkapi dengan pemeriksa kontras bawaan—salah satu dari sekian banyak yang hebat Alat AI untuk membantu alur kerja desain grafis Anda.

Cara terbaik untuk memeriksa kontrasnya adalah dengan mengubah desain Anda menjadi skala abu-abu. Jika Anda dapat memisahkan warna dan memahami desain dalam warna hitam dan abu-abu, itu juga harus diterjemahkan dengan baik dalam warna pilihan Anda.

Ukuran teks

Seiring dengan warna teks yang cukup kontras dengan warna latar belakang, teks Anda sendiri harus cukup besar untuk dibaca dengan mudah. Rasio WCAG untuk ukuran teks besar adalah 3:1.

Ukuran teks tidak sama di semua tipografi, jadi jangan bergantung pada ukuran 12 poin—yang biasanya dilihat sebagai ukuran minimum untuk keterbacaan standar—untuk semua font. Uji sendiri atau dengan penguji pengguna dengan menampilkan atau mencetak desain ukuran sebenarnya. Jika warna Anda tidak kontras dengan baik, teks yang lebih besar akan membantu keterbacaan, sebagai solusinya.

Keterbacaan Font

Tak perlu dikatakan, tetapi font yang Anda pilih dalam desain Anda harus mudah dibaca. Font dekoratif, font kursif, atau font yang digambar dengan tangan sering memiliki masalah keterbacaan. Band heavy metal terkenal menggunakan tipografi yang sulit dibaca untuk logo band mereka, misalnya.

Anda juga harus mempertimbangkan kerning dan pelacakan saat menggunakan teks untuk desain kecil. Penspasian huruf juga dapat memengaruhi keterbacaan kata yang diinginkan.

Faktor Aksesibilitas Inklusif

Meskipun hanya kontras warna, ukuran font, dan keterbacaan teks dalam desain web yang dipertimbangkan dalam rasio WCAG, Anda harus membuat semua desain web dan grafis Anda dengan mempertimbangkan inklusivitas.

Jika Anda seorang desainer web yang bekerja dengan programmer atau pembuat kode, pastikan Anda melakukannya menggunakan teknik HTML yang membantu aksesibilitas web. ada juga fitur aksesibilitas di Canva untuk memperluas jangkauan desain Anda dengan audiens Anda.

Anda tidak boleh hanya berhenti pada persyaratan minimum untuk rasio WCAG; jika Anda memiliki kontrol untuk menambahkan teks alt ke gambar, keterangan ke file audio atau video, atau bahkan kata-kata yang berguna dari teks untuk hyperlink—yang dibacakan oleh pembaca layar—Anda harus pergi ke atas dan di luar. Menyertakan fitur aksesibilitas tidak mengecualikan audiens mana pun—ini hanya mengundang lebih banyak orang.

Merancang Dengan Rasio WCAG Meningkatkan Desain untuk Semua

Standar untuk desain web berasal dari World Wide Web Consortium, sebuah komunitas yang membantu praktik terbaik di seluruh web. Konsorsium mengembangkan Pedoman Aksesibilitas Konten Web, yang harus diikuti oleh desainer web. Ini memberikan standar rasio untuk pemeriksaan visibilitas saat mendesain untuk web.

Mengikuti pedoman dan standar rasio ini berarti desain web Anda dapat diakses oleh lebih banyak orang.