기초 — 예쁜 사이트로 ⏱ 10분 +135 XP

색·대비·접근성

60-30-10 색 배분, 글자와 배경의 대비, 그리고 누구나 읽을 수 있게 만드는 접근성 원칙을 익힙니다.

🧑‍🏫

멘토 한마디

여기까지 온 것만으로도 이미 어제의 나보다 한 뼘 자랐어요. 끝까지 함께 가요! 🌱

색은 인상을 좌우하지만, 많이 쓴다고 좋은 게 아닙니다. 잘 정리된 사이트는 색을 절제하고, 대신 대비를 똑똑하게 씁니다. 이번 챕터에서는 색을 배분하는 규칙과, 누구나 읽을 수 있게 만드는 접근성을 배웁니다.

60-30-10 규칙

화면의 색 비율을 대략 이렇게 나누면 균형이 잡힙니다.

핵심 강조색은 '10%'라서 강조가 됩니다. 모든 것을 강조색으로 칠하면 아무것도 강조되지 않습니다. 브랜드 색 1개 + 중립 회색 단계만으로도 충분히 세련될 수 있습니다.

글자와 배경의 밝기 차이를 명도 대비(contrast)라고 합니다. 대비가 낮으면(연한 회색 글자에 흰 배경) 잘 보이지 않습니다. 웹 접근성 기준(WCAG)은 본문 글자의 대비비를 최소 4.5:1 이상으로 권장합니다.

'빨간 글자는 오류'처럼 색에만 의존하면, 색을 구분하기 어려운 사용자(색각 이상)는 정보를 놓칩니다. 색과 함께 아이콘·글자·밑줄을 같이 쓰세요. 예를 들어 오류는 빨간색 + ⚠️ 아이콘 + '오류:' 문구를 함께 보여 줍니다.

링크는 색만 바꾸지 말고 밑줄도 함께 주면, 색을 구분하기 어려운 사람도 '여기가 링크'임을 알 수 있습니다.

버튼이나 입력칸은 마우스를 올렸을 때(hover)와 키보드로 선택됐을 때(focus)의 모습을 다르게 해, 지금 어디에 있는지 알 수 있게 합니다. 특히 focus 표시는 키보드만으로 사이트를 쓰는 사람에게 필수입니다.

주의 보기 싫다고 focus 외곽선(outline)을 완전히 없애면, 키보드 사용자가 자기 위치를 잃습니다. 없앨 거라면 반드시 다른 눈에 띄는 표시로 대체해야 합니다.

접근성은 특별한 배려가 아니라, 더 많은 사람이 쓸 수 있게 만드는 기본기입니다. 대비를 지키고 색에만 의존하지 않는 것만으로 큰 차이가 납니다.