Web Guide컬러 시스템웹 색상브랜드 컬러
컬러 시스템 만들기: 주색, 보조색, 강조색
색을 많이 쓸수록 어디를 봐야 할지 알 수 없게 됩니다.
역할이 정해진 몇 가지 색만 쓰는 것이 원칙입니다.
01색마다 역할을 정한다
'우리 회사 색은 파랑'만으로는 부족합니다. 어떤 파랑을 어디에 쓸지 정해야 합니다. 역할이 정해지면 색을 고를 일이 없어집니다.
역할 없이 예쁜 색을 추가하다 보면 화면이 알록달록해지고 무엇이 중요한지 알 수 없게 됩니다.
주색 — 버튼, 링크, 강조
브랜드를 대표하는 색. 면적은 제한합니다
보조색 — 배경, 구분선, 카드
연한 톤. 넓은 면적에 씁니다
강조색 — 경고, 신규, 할인
드물게 씁니다. 자주 쓰면 효과가 사라집니다
중립색 — 텍스트, 테두리
회색 계열 3~4단계. 실제로 가장 많이 쓰입니다
02중립색이 가장 많이 쓰인다
브랜드 색에 집중하다 보면 정작 화면의 대부분을 차지하는 회색 계열을 대충 정하게 됩니다. 실제로는 텍스트와 테두리, 배경이 화면의 90%입니다.
회색도 단계를 나눠 정해야 합니다. 제목, 본문, 보조 텍스트가 같은 색이면 위계가 없어집니다.
제목 색
가장 진한 색. 거의 검정에 가깝게.
본문 색
제목보다 살짝 연하게. 완전한 검정은 눈이 피로합니다.
보조 텍스트
날짜, 캡션 등. 본문보다 연하게.
테두리·구분선
아주 연한 회색. 있는 듯 없는 듯.
배경
흰색 또는 아주 연한 회색.
03대비를 확인한다
예쁜 색 조합이라도 배경과 글자의 대비가 부족하면 읽히지 않습니다. 특히 연한 회색 글자를 흰 배경에 쓰는 경우가 흔한 문제입니다.
밝은 화면에서는 괜찮아 보여도 야외나 저조도에서는 안 보입니다.
대비가 부족한 조합
흰 배경 + 연회색 글자 · 브랜드 색 배경 + 흰 글자(밝은 색인 경우) · 이미지 위 텍스트 · 모니터에서는 보이지만 실제로는 안 읽힘
충분한 대비
명도 차이를 확보 · 접근성 기준 충족 · 어떤 환경에서도 읽힘 · 검사 도구로 수치 확인 가능
04색만으로 구분하지 않는다
'빨간색은 오류, 초록색은 정상'처럼 색만으로 정보를 전달하면, 색을 구분하기 어려운 사람은 알 수 없습니다.
색과 함께 아이콘이나 글자를 두면 모두가 이해할 수 있습니다.
오류 표시빨간 테두리 + 오류 아이콘 + 설명 문구.
상태 표시색 배지 + 상태 이름. '진행중', '완료'.
필수 항목빨간 별표 + '(필수)' 글자.
그래프색 외에 패턴이나 라벨을 함께 씁니다.
링크색만 다르게 하지 말고 밑줄을 함께 쓰면 확실합니다.
CHECK POINT
□ 주색·보조색·강조색의 역할이 정해져 있는가
□ 중립색(회색)이 단계별로 정의되어 있는가
□ 제목·본문·보조 텍스트의 색이 구분되는가
□ 배경과 글자의 대비가 충분한가
□ 연한 회색 글자를 흰 배경에 쓰고 있지 않은가
□ 색만으로 정보를 구분하지 않는가
□ 정의한 색 외에 임의로 추가된 색이 없는가
#컬러 시스템#웹 색상#브랜드 컬러#명도 대비#접근성#중립색#디자인 토큰#홈페이지 디자인#웹비스타#홈페이지 제작