순수한 검정색 (# 000)과 순수한 흰색 (#FFF)을 사용하지 않는 이유는 무엇입니까?


17

스택 교환을위한 새로운 Top Bar에 따르면

가장 먼저 눈에 띄는 것은 실제로 검정색 이라는 * 입니다.

* Jin은 기술적으로는 이것이 검은 색이 아니라고 지적합니다. # 212121입니다.

CSS에서 나는

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

왜 "정말 검은 색"이 아닌가? "아주 검은 색이 아닌"이유는 무엇입니까?

마찬가지로 나머지 배경에서도 다음과 같은 내용이 표시됩니다.

background: #fdfdfd

왜 순백이 아닌가?

나는 특히 StackExchange에 대해 묻지 않고 있습니다. 내가 의미하는 바는 이것이 모든 웹 사이트에 대한 일반적인 규칙입니다. 디자인 사양이 흑백을 요구하는 것처럼 보일 때 실제로 흑백 대신 거의 흑백을 사용해야합니까? 검정색과 흰색?

이 '규칙'이 다른 색상에도 적용됩니까 (정확한 규칙은 무엇입니까)?

규칙은 장치에 따라 다릅니 까?


Google은 항상 순수한 흰색 배경을 사용합니다.
Pacerier

답변:


18

요컨대, 눈이 편합니다.

간단히 말해, 대조는 두 색상의 차이입니다. 웹 페이지에서 필요한 대비 량은 페이지의 각 부분에 따라 다릅니다. 일반적으로 텍스트와 배경색 사이에 고 대비를 원합니다. 그러나 디자인 요소 간의 대비가 너무 높으면 불안정하고 지저분한 인상을 줄 수 있습니다. 흑백은 가능한 최고의 대비를 만듭니다. ' 여기 에서 인용

사이트는 UX 색상 제안 / 예제 및 이론을위한 훌륭한 사이트입니다. 그리고 배경에 다른 색상의 대비를 설명하고 16 진 코드도 제공합니다.

대비 및 색상 균형에 대해서도 설명 합니다 .

이것은 또한 bckgrounds 사이의 대비가 낮을수록 여기여기 의 색상으로 볼 때 텍스트의 대비를 조금 더 멋지게 만들 수 있기 때문에 트렌드 스타일입니다 . 여기서 의사 소통하고 싶은 용어.

반드시 선호 또는 스타일 이상의 규칙은 아닙니다. 장치 의존적보다 컨텐츠 의존적입니다. 가장 강조하거나 집중하고 싶은 곳이 어디인지, 가장 큰 대조가 필요한 곳입니다. StackExchange의 경우 질문과 답변에 관한 모든 것이 있으므로 본문은 가장 관련성이 높은 곳과 대비가 가장 높은 곳입니다.

앞으로 색상을 선택해 주셔서 감사합니다. 고려해야 할 또 다른 고려 사항입니다. : D


1
여기에 대한 답변은 짧아야한다는 것을 알고 있으므로 자세한 내용을 읽을 수있는 링크를 제공하기 위해 귀하의 답변을 사용해 주셔서 감사합니다 (완전한 초보자입니다).
ChrisW December

기꺼이 도와 드리겠습니다. 이 질문에 대한 답은 3 가지 주요 구성 요소 인 색상 이론, 환경 설정 / 스타일 및 UX 디자인입니다. 한 번의 답변으로 100 %를 커버하는 것은 불가능합니다 (앞서 언급했듯이). 그래서 나는 단지 당신에게 무엇을 탐구 해야할지에 대한 짧은 대답을주고 싶었습니다.
Jenna

6

순수한 검은 색 상단 표시 줄은 많은 웹 사이트에서 사용하는 흰색 배경에 매우 눈에 띄는 것처럼 보입니다. 화면 상단으로 눈을 끌기보다는 콘텐츠에 초점을 두어야하기 때문에 나쁩니다. 더 밝게 (회색) 만들면 상단 막대와 신체 배경 사이의 대비가 줄어 듭니다.

그러나 무엇이든 회색 배경은 텍스트와 배경 간의 가능한 대비를 줄임으로써 가독성을 방해합니다. 사람의 눈은 밝기의 차이에 가장 민감하므로 50 % 회색을 선택하면 어떤 텍스트 색상을 선택하든 사용자 화면에서 생성 할 수있는 밝기 차이의 최대 절반을 사용한다는 의미입니다.

따라서 80 % 검은 색을 선택하는 것이 상단 막대의 왜곡을 줄이고 대비를 유지하는 것 사이의 절충안이라고 생각합니다.

본문 텍스트의 경우, 일반적으로 않는 반면 때문에 가독성을 극대화하기 위해, 빛 배경에 순수한 검은 색을 사용하고 싶습니다. (이것은 스크린과 인쇄 모두에 적용됩니다.) 본문의 배경색은 순수한 흰색과 약간 다릅니다. 일반적으로 웹 사이트는 종종 약간 희미한 배경을 선택합니다. 한 가지 목적은 옅은 분홍색 또는 파란색을 선택하여 사이트를 더 따뜻하거나 시원하게 만드는 것입니다 (여기서는 중립 회색 임).


이 사이트에서는 div.post-text전경색 조차 color: #111;순수한 검정색 대신 사용됩니다. 가독성이나 화면 밝기를 브라우저 / 장치 / 사용자 기본값으로 유지하여 최적화하지 않겠습니까?
ChrisW December

0

내 의견으로는 ... 그냥 패션, 트렌드.

사용자가 웹 페이지가 눈을 아프게 느끼면 화면의 밝기를 조정할 수 있습니다. 모빌 기기에서 사람들은 항상 그렇게합니다.

"빈티지"이미지의 경향이 있습니다. 낮은 채도, 세척.

씻겨 진 모습은 가장 어둡거나 하얀 점을 회색으로 만들 수 있습니다.

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

사진뿐만 아니라 "행복한"비디오를 포함한 비디오에서도.

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

많은 대조가 성가신, 특히 흰색 텍스트가있는 어두운 배경 일 수 있습니다 ... 검정색 배경과 과포화 애니메이션 GIF가 있는 90의 웹 디자인을 기억하십시오 ...

트렌드는보다 "친근한"웹 사이트를 만들고,보다 "친밀한"웹 사이트를 가지게되어 부드러움입니다. 또한 "TV"모양 대신 "영화 적"모양을 제공 할 수 있습니다.

이미지에서 하나의 반대 경향은 예를 들어 대비와 미세 대비를 강조 하는 " Hdri look "또는 draggan 스타일입니다.

경우에 따라 씻겨 진 이미지는 톤이 매핑 된 실제 높은 다이나믹 레인지 이미지 대비 향상된 내부 다이나믹 레인지의 모양을 제공 할 수 있습니다.


또한 전체 팔레트가 어떻게 제한되는지 눈의 자동 균형을 속일 수 있습니다. 더 높은 다이나믹 레인지로 이어집니다. 화가는 항상 이것을 사용합니다.
joojaa

1
이것은 단지 올바른 대답이 아닙니다. 과학 과학이 아닌 의견 - 대비 약, 검은 색을 사용하여 화이트 사용하여, 그것은 단지입니다.
Mike Earley
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.