웹 사이트를 디자인 할 때 사용자가 색상을 어떻게 보는지 어떻게 알 수 있습니까?

웹 사이트를 디자인 할 때 사용자가 색상을 어떻게 보는지 어떻게 알 수 있습니까? 웹 사이트의 색상이 Macbook 및 Windows 데스크탑 / 노트북과 다르게 보입니다. 특히 데스크탑에서 밝은 색상을 볼 수 없습니다 (예 : 테이블의 회색 테두리가 보이지 않음).

디자인 할 때 어떤 것을주의해야합니까? 디자인 솔루션으로 모든 화면을 매우 유사하게 만들 수 있습니까?

짧은 대답 : 당신은하지 않습니다.

더 긴 대답 : 모든 화면 설정과 보정, 상황 및 시청자의 시각 (장애)을 고려하는 것은 사실상 불가능합니다. 그렇기 때문에 적어도 대부분의 경우 유용성을 보장하기 위해 텍스트 대비 및 배경과 같은 지침이있는 이유입니다.

내 개인 워크 플로에는 적어도 두 개의 보정되지 않은 모니터와 다른 조명 상황에서 다른 모바일 장치에 대한 일부 테스트가 포함됩니다.

W3C는 여기에서 읽을 수 있는 색상 사용 및 필요한 대비에 대한 몇 가지 지침을 만들었 습니다 . 개인적 으로 Lea Verou의 텍스트에이 대비 도구를 사용 하여 텍스트 색상이 지침을 따르는 지 또는 최소한 가까운지를 확인합니다.

귀하는 그렇게 할 수 없으며 모든 사람의 모니터 / 장치에서 동일한 설정을 제어하거나 시행 할 수 없습니다. 웹용 래스터 이미지를 내보낼 때 sRGB 색상 프로파일을 사용하는 것이 가장 좋습니다.

sRGB는 웹에서 색상을 재생하기위한 전세계 표준 색상 공간입니다.

이것은 어느 정도 도움이 될 것이지만 궁극적으로 사용자 자신의 취향에 따라 장치에서 이미지를 보는 방법이 결정됩니다. 분명히 이것은 페이지의 다른 그래픽 요소가 아닌 래스터 이미지를위한 것입니다.

오늘날의 최신 브라우저와 컴퓨터는 올바른 색상을 표시하는 데 거의 문제가 없습니다. 자세한 내용은 https://websafecolors.info/learn 을 참조 하십시오 .

색상 자체가 다르게 표시되는 디스플레이 자체 인 것 같습니다. 모니터 밝기, 대비 및 블루 라이트 수준 설정, LED 및 패널 유형과 같은 모니터 기술 자체 때문일 수 있습니다. 디스플레이간에 일관된 설정을 적용하거나 설정을 읽고 웹 사이트를 조정할 수있는 방법이 없습니다.

Inspect Element를 사용하고 각 플랫폼에서 색상의 16 진 코드를 보는 것이 좋습니다. 그것들이 동일하다면, 당신은 그것이 디스플레이라는 것을 알고 있습니다. 해결책은 색상을 서로 대조하여 색상을 사용하여 모든 화면에서 눈에 잘 띄게하는 것입니다. 또는 더 두꺼운 테두리 또는 테두리없는 패딩 테이블을 사용해보십시오! 대부분의 사용자는 고화질 화면을 사용하므로 일반적으로 픽셀 두께의 텍스트와 서식을 사용하는 테이블 디자인이 가능합니다.

대답은 '아니요'입니다. 랩탑 색상과 데스크탑 색상은 컴퓨터마다 다르기 때문입니다. 색상이 동일한 지 확인하려면 색상 코드를 사용할 수 있습니다. 예를 들어이 코드를 CSS로 입력 할 수 있습니다.

background-color: #D2B48C