Sebagai elemen desain yang penting, warna adalah alat yang ampuh untuk berkomunikasi secara visual. Ini sangat berguna sehingga sering diimplementasikan secara intuitif, tanpa kita secara sadar menyadari cara kerjanya. Untuk menilai kembali warna yang digunakan untuk aksesibilitas, mari kita perkecil dan tinjau tujuan umum warna yang disajikan di situs web.

Secara umum, warna ada untuk mencirikan, mengarahkan perhatian dan memberikan umpan balik. Lebih khusus lagi, warna digunakan untuk

Branding

Skema warna tertentu merupakan faktor penting dalam identitas visual bisnis. Pikirkan merah Netflix atau biru Twitter. Dengan kata lain, warna dalam hal ini bertindak sebagai singkatan visual untuk nama merek. Meskipun penting, ini sering ada di latar belakang, bekerja pada tingkat bawah sadar.

Hirarki visual

Warna dapat digunakan untuk membuat penekanan dan keteraturan pada halaman, memberikan tengara visual bagi pemirsa untuk mengarahkan pandangan mereka. Misalnya, seluruh bagian halaman web mungkin diwarnai secara berbeda untuk menandakan materi pelajaran konten yang berbeda. Pada skala yang lebih kecil, kotak berwarna terang mungkin mengelilingi konten yang kurang diprioritaskan, seperti tip alat.

Umpan balik visual

Warna dapat menunjukkan apakah pengguna telah berhasil menyelesaikan suatu tindakan. Merah dan hijau adalah warna yang paling umum digunakan untuk tujuan ini—tanda centang hijau saat pengguna mencentang kotak atau 'X' merah saat pengguna mengklik sesuatu yang tidak dapat mereka akses (buta warna merah/hijau juga merupakan bentuk yang paling umum).

Visualisasi data

Warna membuat bagan dan grafik yang kompleks lebih mudah dibaca. Ini terutama benar dalam kasus diagram lingkaran, di mana warna ditampilkan berdampingan.

Teks interaktif

Warna dapat menandai perbedaan antara apa yang dimaksudkan untuk dibaca secara pasif dan apa yang dapat diklik. Contoh paling umum adalah fakta bahwa teks hyperlink biasanya berwarna biru.

Kiat untuk merancang skema warna situs web yang dapat diakses

Tanpa basa-basi lagi, mari masuk ke bagaimana Anda dapat menerapkan prinsip aksesibilitas ke skema warna pada desain situs web. Sebelum kita mulai, pastikan Anda memoles dasar-dasar teori warna, terutama roda warna.

Pahami dasar-dasar kontras

Ketika Anda memikirkannya, kontras adalah warna yang sebenarnya. Jika semuanya berwarna sama, tidak akan ada yang bisa dilihat. Pekerjaan warna yang paling mendasar dalam desain web adalah membuat sesuatu menonjol di layar: pertanyaannya adalah sejauh mana dan dalam kaitannya dengan elemen lain mana.

Kontras adalah bagaimana desainer secara visual merepresentasikan perbedaan antara objek desain. Itu dapat diukur dalam skala dari tinggi ke rendah. Skema warna analog akan menjadi contoh kontras rendah karena warnanya sebagian besar sama. Skema warna komplementer, di sisi lain, akan kontras tinggi, karena ini berlawanan pada roda warna.

Salah satu cara untuk memikirkan kontras warna adalah dari segi nilai. Nilai (dalam seni) mengacu pada seberapa terang atau gelap suatu warna. Ketika orang buta warna atau low vision melihat ke layar, nilai adalah apa yang akan mereka lihat, bukan warna tertentu. Menghasilkan kontras tinggi berarti menyandingkan gelap dengan terang.

WCAG memberikan rasio yang direkomendasikan untuk kontras teks-ke-latar belakang. Ini dapat bervariasi berdasarkan ukuran teks (teks yang lebih besar membutuhkan lebih sedikit kontras agar terlihat) dan seberapa tinggi standar yang ingin Anda patuhi. WCAG memberi peringkat keberhasilan pada tingkat yang berbeda, dengan AA mewakili kepatuhan aksesibilitas minimum dan AAA mewakili standar tertinggi.

Standar kontras level AA

4.5:1 untuk teks lebih kecil 18pt

3:1 untuk teks yang lebih besar dari 18pt

Standar kontras level AAA

7:1 untuk teks yang lebih kecil dari 18pt

4.5:1 untuk teks yang lebih besar dari 18pt

Cara termudah untuk mengetahui apakah skema warna cocok dengan rasio ini adalah dengan menggunakan pemeriksa kontras online, yang ada beberapa. Beberapa yang populer adalah Stark (plugin untuk Sketch), Adobe Color, dan Contrast. Di luar ini, pencarian google tentang "pemeriksa kontras warna" akan memberi Anda banyak opsi untuk dicoba.

Biasanya, ini akan mengharuskan Anda untuk menemukan kode hex warna latar belakang/latar depan Anda (kode enam digit yang didahului oleh tanda pound yang mewakili warna tertentu) dan memasukkannya ke dalam perangkat lunak. Penting untuk dicatat bahwa '1' dalam rasio yang disebutkan di atas mewakili warna latar belakang Anda, dan beberapa pemeriksa kontras akan menghilangkan nomor ini.

Buat palet warna situs web yang dapat diakses sebelumnya

Warna situs web tidak ada dalam ruang hampa tetapi harus bekerja bersama satu sama lain. Itulah mengapa penting untuk merencanakan skema warna yang dapat diakses sebelumnya untuk memastikan bahwa warnanya selaras sambil tetap memenuhi standar kontras WCAG.

Selain warna merek yang telah ditetapkan sebelumnya yang merupakan bagian dari identitas visual, desainer web sering kali perlu memperhitungkan sejumlah skenario warna yang berbeda: termasuk warna aksen (sering digunakan untuk tombol), warna umpan balik (seperti sinyal warna bahwa pengguna sedang online), dan berbagai tahapan hyperlink (mouse hover, pra-klik dan pasca-klik). Mereka juga perlu memutuskan nada netral tertentu (biasanya pada spektrum putih, abu-abu dan hitam) yang biasanya akan digunakan untuk latar belakang, body copy, dan header.

Dari sini, hanya masalah menguji warna-warna ini (menggunakan pemeriksa kontras yang disebutkan di bagian sebelumnya) untuk memastikan mereka termasuk dalam rasio kontras yang dapat diterima. Untungnya, Anda tidak perlu menguji semua ini untuk kontras satu sama lain tetapi hanya yang berada dalam hubungan latar belakang/latar depan.

Selain latar belakang situs web secara keseluruhan, perhatikan warna lain yang akan berfungsi sebagai latar belakang teks, seperti bidang formulir atau kotak informasi. Dan tentu saja, warna aksen harus memiliki kontras tertinggi dari semua warna karena dimaksudkan untuk paling menonjol dan digunakan dengan hemat. Warna tambahan dengan elemen desain tambahan

Sebuah situs web juga dapat jatuh di bawah standar aksesibilitas jika warna adalah satu-satunya indikator untuk konten penting. Desainer web harus melengkapi indikator warna dengan elemen lain, seperti ikon, teks, atau animasi.

Misalnya, jika bidang formulir berubah menjadi merah saat memasukkan kata sandi yang salah, ini akan mudah dilewatkan oleh penyandang tunanetra. Untuk mengurangi hal ini, desainer UX biasanya menambahkan setidaknya satu dari yang berikut: tip alat yang bertuliskan "Sandi salah," ikon seru, dan/atau animasi gemetar di seluruh bidang formulir.

Demikian pula, aplikasi manajemen proyek Trello memungkinkan pengguna untuk mewarnai item kode dengan label. Tetapi mereka juga menawarkan mode ramah buta warna yang menambahkan tekstur pada label, membuat perbedaan di antara mereka lebih jelas.

Gunakan warna sebagai alat bantu

Mendesain warna untuk aksesibilitas bukan hanya tentang merencanakan skenario tanpa warna. Dalam beberapa kasus, warna dapat menjadi alat yang berguna untuk membantu pemirsa membaca halaman.

Dalam kasus di mana penderita disleksia mungkin mengalami kesulitan membaca paragraf teks, mode khusus dapat menggunakan warna untuk menyorot satu kata atau frasa pada satu waktu. Ini adalah strategi umum yang digunakan oleh aplikasi untuk belajar bahasa asing melalui membaca, seperti Beelinguapp. Untuk poin bonus, desainer dapat menyertakan batas atau ikon jari penunjuk untuk melengkapi warna sorotan.

Warna situs web yang dapat diakses bermanfaat bagi semua orang

Aksesibilitas lebih dari sekadar menangani kasus tepi yang unik dan langka. Faktanya, begitu banyak pengguna akan berakhir dengan bentuk gangguan penglihatan (baik sementara atau permanen) di beberapa titik dalam kehidupan sehari-hari mereka sehingga bisnis tidak dapat mengabaikan aksesibilitas.

Kabar baiknya adalah bahwa ada pedoman dan alat yang jelas untuk membantu pengguna dengan gangguan. Tentu saja, pemilihan warna yang baik tidak hanya bergantung pada rasio dan matematika—ini adalah bentuk seni. Itulah mengapa ketika Anda membutuhkan skema warna situs web yang dapat diakses dan memukau secara visual, penting untuk memastikan Anda bekerja dengan desainer yang cerdas.

1111MicrosoftInternetExplorer402DocumentNotSpecified7.8 ?Normal0