적절한 대비를 통해 웹 사이트의 가독성과 사용자 환경을 개선하십시오.
대비는 모든 웹 사이트의 디자인 성공에 중요한 역할을합니다. 해당 사이트의 인쇄술 에서부터 사이트 전반에 걸쳐 사용 된 이미지, 전경 요소와 배경색의 대조에 이르기까지 잘 디자인 된 사이트는 양질의 사용자 경험과 장기간의 사이트 성공을 보장하기 위해 이러한 모든 영역에서 적절한 대비를 가져야합니다.
낮은 콘트라스트가 나쁜 독서 경험과 같음
대비가 너무 낮은 웹 사이트는 읽기와 사용이 어려워 사이트의 성공에 부정적인 영향을 미칩니다. 불투명 한 색상 대비 문제는 종종 쉽게 식별됩니다. 일반적으로 웹 브라우저에서 렌더링 된 페이지를보고 색상 선택이 좋지 않아서 텍스트를 읽기가 너무 어려울 때 볼 수 있습니다. 어떤 색상이 잘 어울리지 않는지 쉽게 판단 할 수는 있지만 실제로 다른 색상과 비교하여 어떤 색상이 효과가 있는지 결정하는 것은 매우 어려울 수 있습니다. 작동하지 않는 것이 아니라 작동 원리를 어떻게 결정할 것인가? 이 기사의 이미지는 다양한 색상을 보여주고 전경색과 배경색으로 대비되는 방식을 보여줍니다. "좋은"쌍과 "불쌍한"쌍을 볼 수있어 프로젝트에서 올바른 색상을 선택할 수 있습니다.
명암 대비
한 가지 유의해야 할 점은 대비는 배경에 비해 색상이 얼마나 밝았는지보다 더 중요하다는 것입니다. 앞서 언급 한 이미지에서 볼 수 있듯이,이 색상 중 일부는 매우 밝고 배경색에 검은 색 파란색과 같이 생생하게 표시되지만 여전히 대비가 좋지 않은 것으로 분류되어 있습니다. 밝기가 좋을지라도 색상 조합으로 인해 텍스트를 읽기가 어려워지기 때문에이 작업을 수행했습니다. 검은 바탕에 파란색 글씨로 된 페이지를 만들려면 독자가 매우 빨리 눈의 피로감을 느끼게됩니다. 이것이 대비가 흑백이 아닌 이유입니다 (예, 그 말장난이 의도 된 것입니다). 명암 대비를위한 규칙과 모범 사례가 있지만 디자이너는 항상 해당 규칙을 평가하여 특정 인스턴스에서 작동하는지 확인해야합니다.
색상 선택하기
대비는 웹 사이트의 디자인에 색상을 선택할 때 고려해야 할 요소 중 하나 일 뿐이지 만 중요한 부분입니다. 색상을 선택할 때는 회사의 브랜드 표준을 염두에 두어야 할뿐만 아니라 조직의 브랜드 지침과 일치 할 수는 있지만 온라인으로 잘 작동하지 않는 색상 팔레트를 기꺼이 해결할 수 있습니다. 예를 들어 나는 항상 노란색과 밝은 초록이 웹 사이트에서 효과적으로 사용하기가 어렵다는 사실을 알고 있습니다. 이러한 색상이 회사의 브랜드 지침에있는 경우에는 강조 색상으로 만 사용해야 할 수도 있습니다. 왜냐하면 어느 색상과도 대비되는 색상을 찾기가 쉽지 않기 때문입니다.
마찬가지로 브랜드 색상이 흑백 인 경우 큰 대비를 의미하지만 긴 텍스트 양이있는 사이트의 경우 검정색 배경에 흰색 텍스트가 있으면 매우 열심히 읽게됩니다. 검은 색과 흰색의 대비조차도 훌륭합니다. 검은 색 바탕에 흰색 텍스트가 있으면 긴 구절에 눈이 피로 해집니다. 이 경우 흰색 배경에 검은 색 텍스트를 사용하도록 색상을 반전시킵니다. 그것은 시각적으로 관심이 없을 수도 있지만, 당신은 그것보다 나은 대비를 찾지 못할 것입니다!
온라인 도구
자신의 디자인 감각 외에도 사이트의 색상 선택을 테스트하는 데 사용할 수있는 온라인 도구가 있습니다.
CheckMyColors.com은 사이트의 모든 색상을 테스트하고 페이지의 요소 간 대비 비율을보고합니다.
또한 색상 선택에 대해 생각할 때 웹 사이트 접근성 및 색맹 유형을 가진 사람들을 고려해야합니다. ContrastChecker.com과 마찬가지로 WebAIM.org에서 WCAG 지침에 대한 선택을 테스트 할 수 있습니다.