Khi thiết kế một trang web, làm thế nào để tôi biết làm thế nào người dùng nhìn thấy màu sắc?

Khi thiết kế một trang web, làm thế nào để tôi biết làm thế nào người dùng nhìn thấy màu sắc? Tôi thấy màu sắc của trang web khác với Macbook và máy tính để bàn / máy tính xách tay Windows của tôi. Đặc biệt tôi không thể nhìn thấy màu sáng trên màn hình, ví dụ như viền màu xám của bảng là vô hình.

Cái nào tôi nên quan tâm khi thiết kế? Tôi có thể làm cho tất cả các màn hình khá giống nhau với một giải pháp thiết kế không?

Câu trả lời ngắn gọn: bạn không.

Câu trả lời dài hơn: theo nghĩa đen là không thể tính đến tất cả các cài đặt màn hình và hiệu chỉnh, hoàn cảnh và khả năng (dis) trực quan của người xem. Đó là lý do tại sao có các hướng dẫn, ví dụ, độ tương phản của văn bản và nền tảng của nó, để đảm bảo một số khả năng sử dụng trong ít nhất là phần lớn các trường hợp.

Quy trình làm việc cá nhân của tôi bao gồm ít nhất hai màn hình chưa được hiệu chỉnh và một số thử nghiệm trên các thiết bị di động khác nhau trong các tình huống ánh sáng khác nhau.

W3C đã đưa ra một số hướng dẫn về việc sử dụng màu sắc và độ tương phản cần thiết mà bạn có thể đọc ở đây . Cá nhân, tôi sử dụng công cụ tương phản này cho văn bản của Lea Verou để kiểm tra xem màu văn bản của tôi có tuân theo hướng dẫn hay ít nhất là gần gũi không.

Bạn không và bạn không thể kiểm soát hoặc thực thi các cài đặt tương tự trên màn hình / thiết bị của mọi người. Điều tốt nhất bạn có thể làm là sử dụng cấu hình màu sRGB khi xuất hình ảnh raster cho web.

sRGB là không gian màu tiêu chuẩn trên toàn thế giới để tái tạo màu sắc trên web.

Điều này sẽ giúp một mức độ, nhưng cuối cùng, sở thích của người dùng sẽ quyết định cách xem hình ảnh trên thiết bị của họ. Rõ ràng, đây là cho hình ảnh raster, không phải các yếu tố đồ họa khác trên một trang.

Các trình duyệt và máy tính hiện đại ngày nay hiếm khi gặp sự cố hiển thị màu chính xác (xem https://websafecolors.info/learn để biết một số thông tin về điều đó).

Có vẻ như chính màn hình hiển thị làm cho màu sắc xuất hiện khác nhau. Điều này có thể là do cài đặt độ sáng, độ tương phản và mức độ ánh sáng màu xanh của màn hình và thậm chí do chính công nghệ của màn hình như đèn LED và loại bảng điều khiển. Không có cách nào để thực thi các cài đặt nhất quán trên các màn hình hoặc thậm chí đọc các cài đặt của chúng và điều chỉnh trang web.

Tôi sẽ khuyên bạn nên sử dụng Inspect Element và xem mã hex của các màu trên mỗi nền tảng. Nếu chúng giống hệt nhau, thì bạn biết đó là màn hình. Giải pháp sẽ là sử dụng các màu có độ tương phản với nhau nhiều hơn, để chúng có cơ hội nổi bật hơn trên tất cả các màn hình. Ngoài ra, hãy thử các đường viền dày hơn, hoặc thậm chí các bảng đệm không viền! Hầu hết người dùng có màn hình độ nét cao mở ra rất nhiều khả năng cho thiết kế bảng, thường sử dụng định dạng và văn bản dày pixel.

Câu trả lời là không, vì màu laptop và màu desktop không giống nhau cho mỗi máy tính. Bạn có thể sử dụng mã màu nếu bạn muốn đảm bảo màu giống nhau, ví dụ: bạn có thể nhập mã này vào css:

background-color: #D2B48C