Mengapa tidak menggunakan hitam murni (# 000) dan putih murni (#FFF)?

17

Bar Top Baru untuk Stack Exchange mengatakan,

Hal pertama yang akan Anda perhatikan adalah benar-benar hitam* .

* Jin menunjukkan bahwa secara teknis itu tidak terlalu hitam: itu # 212121.

Dalam CSS-nya saya melihat,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Mengapa tidak "benar-benar hitam": mengapa "tidak cukup hitam" lebih baik?

Demikian pula, untuk sisa latar belakang saya melihat sesuatu seperti,

background: #fdfdfd

Kenapa tidak putih murni?

Saya tidak bertanya tentang StackExchange secara spesifik - maksud saya adalah, apakah ini aturan umum yang baik untuk semua / semua situs web: ketika spesifikasi desain tampaknya meminta hitam atau putih, apakah saya harus menggunakan hampir hitam dan putih daripada benar-benar hitam dan putih?

Apakah 'aturan' ini berlaku untuk warna lain juga (apa aturannya, tepatnya)?

Apakah aturan itu tergantung pada perangkat?

ChrisW
sumber
Google selalu menggunakan latar belakang putih bersih.
Pacerier

Jawaban:

18

Singkatnya, mudah di mata;

“Sederhananya, kontras adalah perbedaan antara dua warna. Pada halaman web, jumlah kontras yang diperlukan bervariasi dengan berbagai bagian halaman. Anda biasanya menginginkan kontras yang tinggi antara teks dan warna latar belakangnya. Tetapi kontras yang terlalu tinggi antara elemen desain mungkin memberikan kesan tidak tenang dan berantakan. Hitam dan putih menciptakan kontras setinggi mungkin. ' -Kutipan dari sini

Ini adalah situs yang bagus untuk saran / contoh dan teori warna UX. Dan membahas perbedaan warna di latar belakang, bahkan memberikan kode hex yang cukup praktis.

Kontras dan keseimbangan warna juga dibahas di sini .

Ini juga tampaknya menjadi gaya yang sedang tren karena kontras yang lebih rendah antara bckgrounds membuat kontras teks sedikit lebih baik (menurut saya) seperti terlihat dengan warna di sini dan di sini . Sampel ini lebih untuk melihat warna daripada konten mereka di dari apa yang ingin saya komunikasikan di sini.

Itu belum tentu aturan lebih dari preferensi atau gaya. Ini lebih tergantung pada konten daripada tergantung pada perangkat. Ini tentang di mana Anda ingin memiliki penekanan atau fokus yang paling - di mana pun yang terjadi adalah di mana harus ada yang paling kontras. Dalam kasus StackExchange itu semua tentang pertanyaan dan jawaban sehingga tubuh adalah tempat yang paling kontras karena itu adalah tempat yang paling relevan.

Semoga sukses dengan pilihan warna Anda di masa depan, ini adalah pertimbangan lain untuk dipertimbangkan: D

Jenna
sumber
1
Saya menyadari bahwa jawaban di sini harus singkat, jadi terima kasih telah menggunakan tautan Anda untuk memberikan tautan untuk bacaan lebih lanjut yang lebih rinci (saya seorang pemula yang lengkap).
ChrisW
Senang membantu (jika hanya sedikit). Jawaban untuk pertanyaan ini memiliki 3 komponen utama: teori warna, preferensi / gaya, dan desain UX. Mustahil untuk membahas masing-masing 100% dalam satu jawaban (seperti yang telah Anda sebutkan). Jadi saya hanya ingin memberi Anda jawaban singkat di samping gagasan tentang apa yang harus dijelajahi.
Jenna
6

Bilah atas hitam-murni akan terlihat sangat mencolok dengan latar belakang putih yang digunakan oleh banyak situs web, yang buruk karena fokusnya harus pada konten daripada menarik perhatian ke bagian atas layar. Membuatnya lebih terang (abu-abu) mengurangi kontras antara bilah atas dan latar belakang tubuh.

Namun, latar belakang abu-abu pada apa pun menghambat keterbacaan dengan mengurangi kemungkinan kontras antara teks dan latar belakang. Mata manusia paling sensitif terhadap perbedaan kecerahan, jadi memilih abu-abu 50% berarti bahwa apa pun warna teks yang Anda pilih, Anda menggunakan paling banyak setengah perbedaan kecerahan yang dapat dihasilkan layar pengguna.

Oleh karena itu, saya pikir pilihan 80% hitam adalah kompromi antara membuat bar atas kurang menggelegar dan mempertahankan kontras di dalamnya.

Untuk body text, biasanya Anda lakukan ingin menggunakan hitam murni dengan latar belakang cahaya, untuk memaksimalkan kontras dan dengan demikian keterbacaan. (Ini berlaku untuk layar dan cetak.) Perhatikan bahwa warna latar belakang untuk tubuh berbeda dari putih murni hanya dengan sedikit. Secara umum, situs web sering memilih latar belakang yang sangat sedikit putih. Salah satu tujuannya adalah untuk membuat situs terasa lebih hangat atau dingin dengan memilih merah muda pucat atau biru (ini abu-abu yang netral).

Siput mekanik
sumber
Di situs ini bahkan div.post-textwarna foreground color: #111;bukan hitam murni. Mengapa tidak membiarkan keterbacaan atau kecerahan layar pada browser / perangkat / pengguna default untuk dioptimalkan?
ChrisW
0

Menurut saya ... Hanya fashion, tren.

Jika pengguna merasa halaman web melukai matanya, ia hanya dapat menyesuaikan kecerahan layar. Dalam perangkat mobil, orang melakukan itu sepanjang waktu.

Ada tren gambar "vintage". Saturasi rendah, terhanyut.

Tampilan yang dicuci bisa membuat yang paling gelap atau / dan titik putih menjadi abu-abu.

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AU=

Tidak hanya di foto, tetapi juga di video ... termasuk video "bahagia".

https://www.youtube.com/watch?v=9HjrFnKEE8w

Memang benar bahwa banyak kontras dapat muncul, terutama latar belakang gelap dengan teks putih ... Ingat desain web tahun 90-an , dengan latar belakang hitam dan gif animasi jenuh ...

Trennya adalah memiliki lebih banyak situs web yang tampak "ramah", lebih "intim" jadi ini kelembutan. Ini juga dapat memberikan tampilan yang lebih "sinematik", bukan tampilan "TV".

Salah satu tren yang berlawanan dalam gambar adalah " Hdri look " atau gaya draggan, misalnya, yang menonjolkan kontras dan kontras mikro.

Dalam beberapa kasus, gambar yang pudar dapat memberikan tampilan rentang dinamis yang lebih internal, dibandingkan dengan nada yang dipetakan dengan kontras yang ditingkatkan dari gambar dengan rentang dinamis tinggi nyata.

Rafael
sumber
Juga jika seluruh palet Anda dibatasi, Anda bisa mengelabui autobalance mata Anda. Mengarah ke rentang dinamis Anda yang lebih tinggi. Pelukis menggunakan ini setiap saat.
joojaa
1
Ini bukan jawaban yang valid. The ilmu sekitar Sebaliknya, menggunakan hitam, menggunakan putih, hanya saja - ilmu pengetahuan, bukan pendapat.
Mike Earley