Tingkatkan keterbacaan situs web Anda dan pengalaman pengguna dengan kontras yang memadai
Kontras memainkan peran penting dalam keberhasilan desain situs web apa pun. Dari tipografi situs tersebut , hingga gambar yang digunakan di seluruh situs, hingga kontras antara elemen latar depan dan warna latar belakang - situs yang dirancang dengan baik harus memiliki kontras yang memadai di semua area ini untuk memastikan pengalaman pengguna yang berkualitas dan kesuksesan situs jangka panjang.
Kontras Rendah Sama dengan Pengalaman Membaca yang Buruk
Situs web yang terlalu rendah kontrasnya dapat sulit dibaca dan digunakan, yang akan berdampak negatif pada keberhasilan situs apa pun. Masalah kontras warna yang buruk seringkali mudah diidentifikasi. Anda biasanya dapat melakukannya hanya dengan melihat halaman yang ditampilkan di browser web dan Anda dapat melihat apakah teks terlalu sulit dibaca karena pilihan warna yang buruk. Namun, meskipun mungkin mudah untuk menentukan warna mana yang tidak bekerja dengan baik, sebenarnya sangat sulit untuk memutuskan warna apa yang bekerja dengan baik berbeda dengan yang lain. Anda mungkin tidak berhasil, tetapi bagaimana Anda menentukan apa yang berhasil? Gambar dalam artikel ini akan membantu menunjukkan berbagai warna yang berbeda dan bagaimana mereka kontras sebagai warna latar depan dan latar belakang. Anda dapat melihat pasangan "baik" dan pasangan "miskin", yang akan membantu Anda membuat pilihan warna yang tepat dalam proyek Anda.
Mengenai Kontras
Satu hal yang harus Anda perhatikan adalah kontras lebih dari seberapa terang warna dibandingkan dengan latar belakang. Seperti yang seharusnya Anda lihat dalam gambar tersebut, beberapa dari warna-warna ini sangat cerah dan muncul dengan penuh semangat pada warna latar belakang - seperti biru di atas hitam, tetapi saya masih menandainya sebagai memiliki kontras yang buruk. Saya melakukan ini karena, meski mungkin terang, kombinasi warnanya masih membuat teks sulit dibaca. Jika Anda membuat halaman di semua teks biru pada latar belakang hitam, pembaca Anda akan mengalami kelelahan mata dengan sangat cepat. Inilah mengapa kontras tidak hanya hitam dan putih (ya, itu pun dimaksudkan). Ada aturan dan praktik terbaik untuk kontras, tetapi sebagai perancang, Anda harus selalu mengevaluasi aturan-aturan itu untuk memastikan bahwa mereka berfungsi dalam contoh khusus Anda.
Memilih Warna
Kontras hanyalah salah satu faktor yang perlu dipertimbangkan ketika memilih warna untuk desain situs web Anda, tetapi ini adalah salah satu yang penting. Ketika memilih warna, berhati-hatilah dengan standar merek untuk perusahaan, tetapi juga bersedia untuk menangani palet warna yang, sementara mereka mungkin konsisten dengan pedoman merek organisasi, tidak berfungsi dengan baik secara online. Sebagai contoh, saya selalu menemukan hijau kuning dan terang menjadi sangat sulit untuk digunakan secara efektif di situs web. Jika warna-warna ini ada dalam pedoman merek perusahaan, mereka mungkin perlu digunakan sebagai warna aksen saja, karena sulit untuk menemukan warna yang kontras dengan baik.
Demikian pula, jika warna merek Anda hitam dan putih, ini berarti kontras yang besar, tetapi jika Anda memiliki situs dengan teks dalam jumlah yang sangat panjang, memiliki latar belakang hitam dengan teks putih akan membuat pembacaan sangat sulit. Bahkan kontras antara hitam dan putih sangat bagus, teks putih pada latar belakang hitam menyebabkan ketegangan mata untuk bagian yang panjang. Dalam hal ini, saya akan membalikkan warna untuk menggunakan teks hitam pada latar belakang putih. Itu mungkin tidak menarik secara visual, tetapi Anda tidak akan menemukan kontras yang lebih baik dari itu!
Alat Online
Selain selera desain Anda sendiri, ada beberapa alat online yang dapat Anda gunakan untuk menguji pilihan warna situs Anda.
CheckMyColors.com akan menguji semua warna situs Anda dan melaporkan rasio kontras antar elemen di halaman.
Selain itu, ketika memikirkan pilihan warna, Anda juga harus mempertimbangkan aksesibilitas situs web dan orang-orang yang memiliki bentuk buta warna. WebAIM.org dapat membantu dengan ini, seperti ContrastChecker.com, yang akan menguji pilihan Anda terhadap pedoman WCAG.