Skip to main content

웹 디자인의 백그라운드 및 전경색 대비 방법

포토샵 강좌 #55 - 디자이너가 많이 쓰는 단축키 모음 (유월 2025)

포토샵 강좌 #55 - 디자이너가 많이 쓰는 단축키 모음 (유월 2025)
Anonim

대비는 모든 웹 사이트의 디자인 성공에 중요한 역할을합니다. 적절한 대조는 사이트의 장기적인 성공에 기여할 수있는 양질의 사용자 경험과 가독성을 보장합니다.

대비가 너무 낮은 웹 사이트는 읽기와 사용이 어려워 사이트의 성공에 부정적인 영향을 미칩니다. 불투명 한 색상 대비 문제는 종종 쉽게 식별 할 수 있습니다. 종종 웹 브라우저에서 한 페이지를보고 대비가 어려운 색상 선택 때문에 텍스트를 읽기 어려운지 여부를 확인할 수 있습니다.

어떤 색상이 잘 작동하지 않는 지 쉽게 판단 할 수 있지만 다른 색상 및 웹 사이트 디자인과는 대조적으로 어떤 색상이 효과가 있을지를 결정하는 것은 어려울 수 있습니다. 이 차트는 다양한 색상과 그 색상이 전경색과 배경색과 어떻게 대비되는지를 보여줍니다. 사이트 프로젝트의 색상을 선택할 때 피할 수없는 불쌍한 쌍이 아니라 효과적인 쌍을 볼 수 있습니다.

모든 강한 대조가 좋은 대조는 아닙니다.

차트에서 주목해야 할 것은 이러한 색상 중 일부가 매우 밝아서 특정 배경색 (예 : 검정 바탕에 파란색)에 생생하게 표시되는 방법이지만 대조 색상이 좋지 않은 것으로 분류되어 있습니다. 이는 색상 조합이 대비에도 불구하고 여전히 읽기 어려운 텍스트를 생성하기 때문입니다. 검은 바탕에 파란색 글씨로 된 페이지를 만들려면 독자가 아주 빨리 눈의 피로감을 느끼게됩니다.

명암 대비를위한 규칙 및 모범 사례가 있지만 디자이너는 항상 해당 규칙을 평가하여 특정 인스턴스에서 작동하는지 확인해야합니다.

브랜딩 표준 및 대비되는 색상 선택

대비는 웹 사이트의 디자인에 색상을 선택할 때 고려해야 할 요소 중 하나 일뿐입니다. 색상을 선택할 때 회사, 다른 조직 또는 개인 이건간에 클라이언트의 브랜드 표준을 염두에 두어야 할 것입니다. 색상 팔레트는 조직의 브랜드 가이드 라인과 일치 할 수 있지만 온라인 프레젠테이션을 위해 잘 번역되지 않을 수 있습니다.

예를 들어 노란색과 밝은 녹색은 웹 사이트에서 효과적으로 사용하기가 어렵습니다. 이러한 색상이 회사의 브랜드 지침에있는 경우에는 강조 색상으로 만 사용해야 할 수도 있습니다. 왜냐하면 어느 색상과도 대비되는 색상을 찾기가 쉽지 않기 때문입니다.

마찬가지로 브랜드 색상이 흑백 인 경우 큰 대비를 의미하지만 긴 텍스트 양이있는 사이트가있는 경우 흰색 텍스트가있는 검은 색 배경은 고유 한 강도에도 불구하고 눈이 많이 부는 경험을 읽게됩니다. 흑과 백의 대비. 이 경우 흰색 배경에 검정 텍스트를 사용하여 색상을 반전하는 것이 좋습니다. 그것은 시각적으로 흥미롭지는 않지만, 훨씬 더 나은 대비와 가독성의 선택입니다.

온라인 도구

자신의 디자인 감각 외에도 사이트의 색상 선택을 테스트하는 데 사용할 수있는 온라인 도구가 있습니다. CheckMyColors.com은 사이트의 모든 색상을 테스트하고 페이지의 요소 간 대비 비율을보고합니다.

또한 색상 선택에 대해 생각할 때 웹 사이트 접근성 및 색맹 유형을 가진 사람들을 고려해야합니다. 웹 콘텐트 접근성 가이드 라인 (WCAG)에 대한 귀하의 선택을 시험 할 ContrastChecker.com과 마찬가지로 WebAIM.org가이를 도울 수 있습니다.