대비는 무엇이 중요한지를 눈에 소리치는 방식입니다. 차이가 클수록 강하게 튀고 작을수록 조용히 묻힙니다. 색과 무게, 크기의 대비를 CSS로 어떻게 다루는지 예제로 하나씩 보겠습니다. 아래 코드는 그대로 복사해 확인할 수 있습니다.
05.1 핵심 행동에 색 대비 몰기
가입 버튼과 취소 버튼을 같은 색으로 칠하면 눈이 어디로 가야 할지 모릅니다. 주된 행동에만 강한 색을 몰아 줍니다.
.btn { padding: 10px 18px; border-radius: 8px; }
.btn-primary {
background: #2563eb;
color: #fff;
}
.btn-secondary {
background: #f3f4f6;
color: #4b5563;
}
짙은 파랑과 흰 글자의 대비가 강하니 파란 버튼이 화면에서 먼저 튀어나옵니다. 회색 버튼은 배경과 대비가 약해 조용히 물러섭니다. 색 하나로 우선순위가 갈립니다. 두 버튼을 나란히 두면 대비의 차이가 곧 눌러야 할 순서를 말해 주니, 사용자는 설명을 읽지 않고도 어느 쪽이 주된 행동인지 압니다.
05.2 읽히는 글자 대비 지키기
연한 회색 배경에 연한 회색 글자를 얹으면 멋져 보여도 읽기가 괴롭습니다. 글자와 배경의 명도 차이는 넉넉히 벌려야 합니다.
.text-ok {
color: #1f2937;
background: #ffffff;
}
.text-weak {
color: #c7c7c7;
background: #ffffff;
}
진한 먹색 글자는 흰 배경과 대비가 커서 또렷하지만, 옅은 회색 글자는 대비가 부족해 흐릿합니다. 본문 글자는 배경과 명도 대비를 충분히 확보하는 것이 강조보다 먼저입니다.
05.3 강조색은 아껴 쓰기
강조색을 여기저기 뿌리면 시선이 분산돼 아무것도 강조되지 않습니다. 한 가지 강조색을 정해 정말 중요한 곳에만 씁니다.
:root {
--accent: #ef4444;
}
.badge-new {
background: var(--accent);
color: #fff;
}
.link-important {
color: var(--accent);
}
강조색을 변수 하나로 묶어 두면 새 배지와 중요 링크가 같은 붉은 톤으로 통일됩니다. 이 색이 보이는 곳은 곧 여기를 봐 달라는 신호가 됩니다. 드물게 쓸수록 힘이 셉니다.
05.4 크기 대비로 시선 잡기
모든 글자가 비슷하면 시선이 미끄러질 곳이 없습니다. 딱 하나를 크게 키워 눈이 앉을 자리를 만듭니다.
.stat {
display: flex;
align-items: baseline;
gap: 6px;
}
.stat .num {
font-size: 40px;
font-weight: 700;
}
.stat .unit {
font-size: 15px;
color: #6b7280;
}
40px 숫자와 15px 단위의 큰 차이가 숫자를 주인공으로 세웁니다. 단위는 옅은 회색으로 물러서니 눈은 숫자에 먼저 꽂힙니다. 대비가 클수록 시선은 큰 쪽으로 쏠립니다. 대시보드처럼 숫자가 많은 화면일수록 이 크기 차이를 확실히 벌려 두어야 어떤 값을 봐 달라는 건지 분명해집니다.
05.5 무게 대비로 한 줄 안에서 강조
크기를 못 바꾸는 좁은 줄에서는 굵기 차이로 강조를 만듭니다. 핵심 단어만 굵게 남기고 나머지는 보통으로 둡니다.
.price {
font-weight: 400;
color: #6b7280;
}
.price strong {
font-weight: 700;
color: #111827;
}
같은 줄에서 굵고 진한 금액만 앞으로 나오고 안내 문구는 뒤로 빠집니다. 크기를 건드리지 않고도 무게와 색의 대비만으로 강약이 생깁니다.
05.6 배경 대비로 영역 나누기
구획을 선으로만 나누면 답답합니다. 배경색을 살짝 달리하면 선 없이도 영역이 갈립니다.
.section-plain {
background: #ffffff;
}
.section-tint {
background: #f8fafc;
}
흰 구획과 아주 옅은 회색 구획이 번갈아 놓이면 눈은 색이 바뀌는 지점을 경계로 읽습니다. 대비가 미세해도 영역을 가르는 데는 충분합니다. 은은한 차이가 오히려 세련돼 보입니다. 굵은 선으로 칸을 나눌 때보다 화면이 한결 가벼워 보이고, 구획이 늘어도 어수선해지지 않는다는 점이 이 방식의 장점입니다.
05.7 상태를 색 대비로 알리기
성공과 경고를 같은 색으로 두면 사용자가 결과를 구분하지 못합니다. 의미마다 색을 나눠 한눈에 읽히게 합니다.
.alert-success {
background: #ecfdf5;
color: #065f46;
}
.alert-error {
background: #fef2f2;
color: #991b1b;
}
초록 계열은 잘됐다는 안심을, 붉은 계열은 문제라는 긴장을 색만으로 전합니다. 배경은 옅게, 글자는 진하게 두어 대비를 지키면 메시지가 또렷이 읽힙니다.
05.8 색만으로 강조하지 않기
색 대비만으로 정보를 전하면 색을 구분하기 어려운 사용자는 놓칩니다. 색에 아이콘이나 굵기를 함께 얹습니다.
.status-error {
color: #991b1b;
font-weight: 600;
}
.status-error::before {
content: "! ";
}
붉은 색에 굵기와 느낌표 기호를 더하면 색이 잘 안 보이는 화면이나 눈에서도 경고임이 전해집니다. 대비는 색 하나에만 기대지 않을 때 더 튼튼합니다.
05.9 강조를 움직임으로 거들기
정적인 대비에 작은 움직임을 더하면 손이 올라간 요소가 살아 있는 느낌을 줍니다. 색 변화를 부드럽게 이어 줍니다.
.btn-primary {
background: #2563eb;
transition: background .15s ease;
}
.btn-primary:hover {
background: #1d4ed8;
}
마우스를 올리면 색이 한 톤 짙어지며 이건 누를 수 있다고 답합니다. transition이 그 변화를 딱딱하지 않게 이어 주니 대비의 변화가 자연스럽게 느껴집니다.
05.10 대비를 하나로 모으기
지금까지의 도구를 한 카드에 얹으면 이렇게 강약이 살아납니다. 마크업은 단출하고 강조는 CSS가 나눠 줍니다.
<div class="plan">
<span class="badge-new">NEW</span>
<p class="price">월 <strong>9,900원</strong></p>
<button class="btn btn-primary">시작하기</button>
</div>
붉은 배지가 새것임을 알리고, 굵은 금액이 눈을 붙들고, 파란 버튼이 다음 행동을 가리킵니다. 강조가 세 군데지만 색과 무게가 저마다 달라 서로 부딪히지 않습니다. 만약 셋을 모두 같은 붉은색으로 칠했다면 어디를 먼저 봐야 할지 되레 헷갈렸을 겁니다. 대비는 무엇을 키울지가 아니라 무엇을 뺄지를 정하는 일에 가깝습니다. 배경이 잠잠해야 강조가 살고, 강조가 하나둘로 절제될 때 비로소 화면이 말을 겁니다.