Menggunakan Background Foreground dan Warna Latar Belakang di Reka Bentuk Web

Tingkatkan pembacaan dan pengalaman pengguna laman web anda dengan kontras yang mencukupi

Sebaliknya memainkan peranan penting dalam kejayaan reka bentuk laman web mana pun. Dari tipografi laman web itu , kepada imej-imej yang digunakan di seluruh laman web ini, untuk kontras antara unsur-unsur latar depan dan warna latar belakang - tapak yang direka dengan baik mesti mempunyai kontras yang mencukupi dalam semua bidang ini untuk memastikan pengalaman pengguna yang berkualiti dan kejayaan laman jangka panjang.

Kontras Rendah Sama dengan Pengalaman Membaca Miskin

Laman web yang terlalu rendah sebaliknya sukar untuk dibaca dan digunakan, yang akan memberi kesan negatif ke atas kejayaan mana-mana laman web. Isu-isu kontras warna yang lemah sering mudah dikenalpasti. Anda biasanya boleh melakukannya hanya dengan melihat halaman yang diberikan dalam pelayar web dan anda dapat melihat jika teks terlalu sukar dibaca kerana pilihan warna yang buruk. Walau bagaimanapun, walaupun mudah untuk menentukan warna mana yang tidak berfungsi dengan baik bersama-sama, ia sebenarnya boleh menjadi sangat mencabar untuk menentukan warna apa yang berfungsi dengan baik berbanding dengan yang lain. Anda mungkin tidak apa yang tidak berfungsi, tetapi bagaimana anda akan menentukan apa yang berfungsi? Imej dalam artikel ini harus membantu memaparkan pelbagai warna dan bagaimana kontras mereka sebagai latar depan dan warna latar belakang. Anda boleh melihat beberapa pasangan "baik" dan beberapa pasangan "miskin", yang akan membantu anda membuat pilihan warna yang betul dalam projek anda.

Mengenai Sebaliknya

Satu perkara yang perlu anda perhatikan adalah bahawa kontras adalah lebih daripada sekadar betapa terang warna dibandingkan dengan latar belakang. Seperti yang anda lihat dalam imej yang disebutkan di atas, beberapa warna ini sangat terang dan kelihatan bersemangat pada warna latar belakang - seperti biru pada hitam, tetapi saya masih melabelnya sebagai mempunyai perbezaan yang tidak baik. Saya melakukan ini kerana, walaupun ia mungkin terang, kombinasi warna masih membuat teks sukar dibaca. Sekiranya anda membuat halaman dalam semua teks biru pada latar belakang hitam, pembaca anda akan mengalami sakit mata dengan cepat. Itulah sebabnya kontras tidak hanya hitam dan putih (ya, pun itu dimaksudkan). Terdapat peraturan dan amalan terbaik untuk kontras, tetapi sebagai pereka anda mesti selalu menilai peraturan tersebut untuk memastikan bahawa mereka bekerja dalam contoh tertentu anda.

Memilih Warna

Kontras hanyalah salah satu faktor yang perlu dipertimbangkan ketika memilih warna untuk reka bentuk laman web anda, tetapi ia adalah penting. Apabila memilih warna, ingatlah standard jenama untuk syarikat itu, tetapi juga bersedia untuk menyentuh palet warna yang, walaupun mereka konsisten dengan garis panduan jenama organisasi, tidak berfungsi dengan baik dalam talian. Sebagai contoh, saya sentiasa mendapati kuning dan cerah hijau untuk menjadi sangat mencabar untuk digunakan dengan berkesan di laman web. Jika warna ini ada dalam garis panduan jenama syarikat, mereka mungkin perlu digunakan sebagai warna aksen sahaja, kerana sukar untuk mencari warna yang kontras dengan baik sama ada.

Begitu juga, jika warna jenama anda hitam dan putih, ini bermakna kontras yang hebat, tetapi jika anda mempunyai laman web dengan teks yang panjang, mempunyai latar belakang hitam dengan teks putih akan membuat bacaan yang sangat keras. Walaupun kontras antara hitam dan putih adalah besar, teks putih pada latar belakang hitam menyebabkan ketegangan mata untuk petikan yang panjang. Dalam kes ini, saya akan mengubah warna untuk menggunakan teks hitam pada latar belakang putih. Ini mungkin tidak berminat secara visual, tetapi anda tidak akan mendapati kontras yang lebih baik daripada itu!

Alat Dalam Talian

Di samping rasa reka bentuk anda sendiri, terdapat beberapa alat dalam talian yang boleh anda gunakan untuk menguji pilihan warna laman web anda.

CheckMyColors.com akan menguji semua warna tapak anda dan melaporkan nisbah kontras antara unsur-unsur di halaman.

Di samping itu, apabila memikirkan pilihan warna, anda juga harus mempertimbangkan akses laman web dan orang yang mempunyai buta warna. WebAIM.org boleh membantu dengan ini, seperti yang boleh ContrastChecker.com, yang akan menguji pilihan anda terhadap garis panduan WCAG.