색은 감이 아니라, 시스템입니다.

입사 초에 시안을 올렸더니 팀장이 한마디 했습니다. “이거 색은 예쁜데, 왜 이 파랑이야?” 대답을 못 했습니다. 그냥 손이 가는 대로 골랐거든요. 그날 이후로 저는 색을 고를 때마다 ‘왜’를 적어 둡니다. 이 색은 메인인지 액센트인지, 배경과 대비는 몇 대 몇인지, 다크모드로 넘어가면 어떻게 되는지. 색은 취향이 아니라 근거를 가진 결정이라는 걸 그렇게 배웠습니다.

색을 몇 개 써야 하나요?

개수가 아니라 역할로 생각합니다. 메인은 브랜드를 기억하게 하는 큰 면적의 색, 보조는 메인을 받쳐 주는 1~2개의 색, 액센트는 ‘여기를 눌러요’라고 외치는 단 하나의 색입니다. 액센트를 곳곳에 뿌리면 아무 데도 강조가 안 됩니다. 화면에서 가장 누르길 바라는 한 곳에만 쓰면, 시선은 알아서 그리로 갑니다.

역할을 말로 설명하기보다, 제가 실제로 쓰는 역할별 색을 스와치로 펼쳐 보여 드립니다. 각 색이 ‘무슨 일을 하는 색’인지가 이름에 박혀 있습니다.

액센트(#3fe6c0)는 단 하나뿐이고 나머지는 배경·면·글자로 역할이 갈립니다. 개수가 아니라 ‘각자 할 일’로 나눈다는 게 이렇게 한눈에 보입니다.

그러면 같은 화면을 색만 바꿔 보일 수 있나요?

가능합니다. 색을 직접 칠하지 않고 ‘토큰(이름 붙인 색)’으로 쓰면, 구조는 그대로 두고 색 값만 갈아끼울 수 있습니다. 말로는 와닿지 않으니 직접 눌러보세요. 아래 카드의 구조는 하나, 테마만 셋입니다.

방금 바뀐 건 글자나 레이아웃이 아니라 --bg·--fg·--accent 같은 토큰의 값뿐입니다. 토큰이 정리돼 있으면 다크모드도, 고객사 브랜드에 맞춘 리컬러도 몇 분이면 끝납니다. 색을 코드에 직접 박아 넣으면 테마 하나 추가할 때마다 수백 줄을 고쳐야 합니다.

그런데 그 색, 읽을 수는 있나요?

예쁜 조합이 가장 자주 무너지는 지점이 여기입니다. 연한 회색 글자에 흰 배경, 파스텔 위의 파스텔. 디자이너 모니터에선 멀쩡해 보여도 햇빛 아래 휴대폰이나 저시력 사용자에겐 글자가 사라집니다. 그래서 저는 색을 고르면 반드시 대비를 ‘측정’합니다. 직접 해보세요. 두 색을 골라보면 합격 여부가 즉시 나옵니다.

이 검사기는 WCAG의 상대 명도 공식 그대로 계산합니다. 본문 글자라면 4.5:1, 24px 이상이거나 굵은 19px 이상의 큰 글자라면 3:1을 넘겨야 합니다. 저는 시안을 넘기기 전에 본문·버튼·플레이스홀더까지 전부 이 기준을 통과시킵니다. 접근성은 ‘배려’이기 이전에 ‘읽히느냐’의 문제입니다.

다크모드는 그냥 색을 뒤집으면 되지 않나요?

이게 가장 흔한 함정입니다. 라이트모드를 단순 반전하면 어두운 배경에 순백 글자가 눈을 찌릅니다. 그래서 다크모드 글자는 순백 대신 살짝 회색을 섞고, 깊이는 그림자가 아니라 표면 밝기 차이로 표현하며, 액센트는 채도를 한 단계 낮춰 번짐을 막습니다. 위 테마 전환 위젯에서 다크와 라이트를 오가 보면, 단순 반전이 아니라 각 테마가 따로 조율돼 있다는 걸 느낄 수 있습니다.

색이 신뢰와 전환에 정말 영향을 주나요?

색 하나로 매출이 오른다는 말은 과장입니다. 하지만 첫인상은 색이 만듭니다. 대비가 무너진 화면은 ‘대충 만든 곳’처럼 보여 신뢰를 잃고, 액센트가 사방에 흩어진 화면은 어디를 눌러야 할지 몰라 사용자를 망설이게 합니다. 반대로 절제된 색·충분한 대비·한 곳에 모인 액센트는 사용자가 다음 행동을 ‘안심하고’ 하게 만듭니다. 색은 전환의 직접 원인이 아니라, 망설임을 줄이는 환경입니다.

색맹 사용자를 위해서는 무엇을 하나요?

핵심은 ‘색만으로 말하지 않는 것’입니다. 한국인 남성의 상당수가 적록색약을 가지고 있어, 빨강과 초록만으로 성공·오류를 구분하면 일부 사용자는 똑같이 보입니다. 그래서 저는 상태에 색을 쓰되, 항상 아이콘이나 텍스트를 함께 붙입니다. ‘완료’에는 체크 아이콘, ‘오류’에는 경고 모양과 문구를. 위 대비 검사기의 합격 표시도 색만 바꾸지 않고 ‘통과/실패’ 글자를 함께 보여 주는 이유입니다.

항목	감으로 쓴 색	컬러 시스템
일관성	화면마다 비슷하지만 다른 색	토큰 하나로 전 화면 통일
접근성	대비 미측정 → 일부 안 읽힘	4.5:1·3:1 기준 통과 검증
신뢰	액센트 남발 → 시선 분산	액센트 한 곳 → 다음 행동 명확

다른 담당자와의 연결

색은 혼자 살지 못합니다. 제가 고른 색은 늘 옆자리 동료의 일과 맞물립니다. 대비는 곧 접근성입니다 — 명도 대비를 지키는 일은 키보드·스크린리더까지 챙기는 접근성 작업의 한 축입니다. 색은 타이포 위에서 읽힙니다 — 같은 색이라도 글자 크기·굵기에 따라 가독성이 갈리므로, 색은 타이포 담당자의 가독성 설계와 함께 결정합니다. 그리고 브랜드 색은 곧 브랜딩입니다 — 메인 색을 정하는 일은 회사가 어떤 인상을 줄지 정하는 브랜딩의 출발점입니다. 좋은 화면은 색·글자·접근성·브랜딩이 같은 방향을 볼 때 나옵니다.

색을 이렇게 보는 사람이, 화면 전체를 만듭니다

색을 측정하고 토큰으로 정리하고 대비를 검증하는 태도는 결국 사이트 전체로 번집니다. 색을 근거로 다루는 사람은 글자도, 여백도, 속도도 같은 태도로 다룹니다. Findable에서는 이 방식이 기본값입니다. 당신의 사이트, 어떤 색으로 신뢰를 만들어 드릴까요?