Saat mendesain situs web, bagaimana saya tahu bagaimana pengguna melihat warna?

11

Saat mendesain situs web, bagaimana saya tahu bagaimana pengguna melihat warna? Saya melihat warna situs web secara berbeda dari Macbook dan desktop / notebook Windows saya. Terutama saya tidak bisa melihat warna-warna terang di desktop, misalnya batas meja abu-abu tidak terlihat.

Mana yang harus saya pedulikan saat mendesain? Apakah saya dapat membuat semua layar sangat mirip dengan solusi perancangan?

website-design color-conversion

— ahmet
sumber

Duplikat terkait dan mungkin: graphicdesign.stackexchange.com/questions/94401/…

— Vincent

1

Dan hanya untuk menambah kebingungan, hampir 10% orang menderita buta warna - tetapi setidaknya dengan itu ada ekstensi untuk Chrome setidaknya yang memungkinkan Anda (dengan asumsi Anda tidak) melihat kira-kira seperti apa penampilan seseorang dengan orang lain. ...

— Rycochet

... dan pada level perusahaan gamma / kontras + pengaturan layar lainnya dapat berada di semua tempat pada monitor dalam situasi kantor (klien Anda) ketika disiapkan oleh TI yang sering menggunakan akses jarak jauh dan pengaturan grup untuk mengontrol jaringan PC. Di perusahaan terakhir saya, TI berada di negara yang berbeda dengan sedikit simpati untuk desain - Saya mendapatkan akses Admin dan menambahkan monitor dan pengaturan saya sendiri! Bekerja sesuai standar dan menghindari ekstrem adalah pendekatan terbaik dengan memperhatikan bahwa beberapa klien (seperti Pemerintah) akan memiliki aksesibilitas yang ketat - tanyakan hal ini di muka untuk menghindari revisi yang tidak perlu

— Applefanboy

23

Jawaban singkat: Anda tidak.

Jawaban yang lebih panjang: benar-benar mustahil untuk memperhitungkan semua pengaturan dan kalibrasi layar, keadaan dan kemampuan visual (dis) pemirsa. Itulah sebabnya ada pedoman untuk, misalnya, kontras teks dan latar belakangnya, untuk menjamin kegunaan dalam setidaknya sebagian besar kasus.

Alur kerja pribadi saya mencakup setidaknya dua monitor yang tidak dikalibrasi dan beberapa pengujian pada perangkat seluler yang berbeda dalam situasi pencahayaan yang berbeda.

W3C telah membuat beberapa panduan tentang penggunaan warna dan kontras yang diperlukan yang dapat Anda baca di sini . Secara pribadi, saya menggunakan alat kontras ini untuk teks oleh Lea Verou untuk memeriksa apakah warna teks saya mematuhi panduan atau setidaknya sudah dekat.

— Vincent
sumber

8

Saya ingin tahu apakah orang-orang SE membaca pedoman itu. Saya memiliki visi yang cukup bagus, tetapi kontras antara latar belakang dan warna tautan sorot pada banyak situs SE (termasuk yang ini) buruk.

— Barmar

1

Saya berharap saya dapat memperbaiki ini lebih dari sekali! Saya sendiri menggunakan ekstensi peramban pembaca gelap sehingga tidak peduli seberapa cantik situs Anda, saya akan benar-benar memusnahkannya hanya karena masih memiliki penglihatan yang baik ketika saya berusia lima puluh tahun!

— PieBie

Menurut situs web ini, webaim.org/resources/contrastchecker , perbedaan warna antara latar belakang dan tautan gagal standar aksesibilitas di situs SE ini. Jadi mungkin aman untuk menganggap orang SE tidak membaca pedoman tersebut.

— ESR

2

Anda tidak, dan Anda tidak dapat mengontrol atau menegakkan pengaturan yang sama pada monitor / perangkat semua orang. Yang terbaik yang dapat Anda lakukan adalah menggunakan profil warna sRGB saat mengekspor gambar raster untuk web.

sRGB adalah ruang warna standar di seluruh dunia untuk reproduksi warna di web.

Ini akan membantu sampai taraf tertentu, tetapi pada akhirnya preferensi pengguna sendiri akan memutuskan bagaimana gambar dilihat pada perangkat mereka. Jelas, ini untuk gambar raster, bukan elemen grafis lainnya pada halaman.

— Billy Kerr
sumber

Dan kalibrasikan display Anda ke sRGB, jadi setidaknya display Anda menunjukkan apa yang seharusnya

— joojaa

Komentar bukan untuk diskusi panjang; percakapan ini telah dipindahkan ke obrolan .

— Vincent

1

Peramban dan komputer modern saat ini jarang memiliki masalah dalam menampilkan warna yang benar (lihat https://websafecolors.info/learn untuk informasi tentang itu).

Sepertinya tampilan itu sendiri yang membuat warna tampil berbeda. Ini bisa disebabkan oleh kecerahan monitor, kontras dan pengaturan tingkat cahaya biru, dan bahkan karena teknologi monitor itu sendiri seperti LED dan tipe panel. Tidak ada cara untuk menegakkan pengaturan yang konsisten di seluruh tampilan, atau bahkan membaca pengaturan mereka dan menyesuaikan situs web.

Saya akan merekomendasikan menggunakan Elemen Inspeksi dan melihat kode hex warna pada setiap platform. Jika mereka identik, maka Anda tahu itu adalah tampilan. Solusinya adalah dengan menggunakan warna yang lebih kontras satu sama lain, sehingga mereka memiliki peluang lebih besar untuk menonjol di semua layar. Atau, cobalah perbatasan yang lebih tebal, atau bahkan meja empuk tanpa batas! Sebagian besar pengguna memiliki layar definisi tinggi yang membuka banyak kemungkinan untuk desain tabel, yang biasanya menggunakan teks dan pemformatan piksel-tebal.

— LloydTao
sumber

0

Jawabannya adalah tidak, karena warna laptop dan warna desktop tidak sama untuk setiap komputer. Anda dapat menggunakan kode warna jika Anda ingin memastikan warnanya sama, misalnya, Anda dapat mengetikkan kode ini di css:

background-color: #D2B48C

— Sally_2891
sumber

2

Hai Sally, saya telah memperbaiki font di jawaban Anda, tetapi saya tidak tahu persis bagaimana ini merupakan jawaban untuk pertanyaan itu. Bisakah Anda menguraikan?

— PieBie

Ini tidak menyelesaikan masalah yang sebenarnya. Masalahnya adalah bahwa #D2B48C akan terlihat berbeda pada monitor yang berbeda, dan pertanyaannya adalah bagaimana menyelesaikannya.

— pipa