명도 대비 프로
팔레트, 이미지, 코드 색상의 명도 대비를 비교하고 가독성 보고서와 내보내기를 확인하세요.
명도 대비 프로는 무엇을 비교하나요
명도 대비 프로는 단일 전경과 배경 조합을 넘어서 여러 색상 후보를 한 화면에서 비교하는 고급 대비 검사 흐름입니다. 팔레트 색을 추가해 대비 매트릭스를 만들고, 이미지에서 추출한 색을 분석하며, HTML 또는 CSS 스니펫 안의 색상도 검토할 수 있습니다. 검색 자료에서는 color contrast checker라는 표현이 자주 쓰이지만, 이 화면은 단순한 한 쌍 검사보다 팔레트와 코드 점검에 더 초점을 둡니다.
색상 시스템을 만들 때는 주색 하나만 안전하면 충분하지 않습니다. 배경, 표면, 텍스트, 보조 텍스트, 테두리, 강조 색, 상태 색, 차트 색이 서로 섞이기 때문에 어떤 색은 텍스트로 쓸 수 있고 어떤 색은 장식이나 배경으로만 써야 합니다. 명도 대비 프로는 이런 관계를 매트릭스로 보여 주어 위험한 조합을 빨리 찾게 해 줍니다.
현재 인터페이스는 팔레트, 이미지, 코드 탭으로 나뉩니다. 팔레트 탭에서는 색상을 추가하고 대비 매트릭스를 확인합니다. 이미지 탭에서는 PNG, JPG, WEBP 이미지를 업로드하거나 끌어다 놓고 추출된 색상을 분석할 수 있습니다. 코드 탭에서는 HTML/CSS 스니펫을 붙여 넣고 색상 대비 보고서를 확인합니다. 결과 모달에서는 전경과 배경 색상, 대비율, 가독성 판정을 확인하고 단일 검사 화면으로 넘겨 더 세밀하게 조정할 수 있습니다.
명도 대비 프로 사용 방법
- 팔레트 탭에서 색상 추가 버튼을 눌러 비교할 색을 넣습니다. 매트릭스를 만들려면 색상이 2개 이상 필요합니다.
- 대비 매트릭스 영역에서 색상 쌍별 대비율을 확인합니다. 낮은 비율은 텍스트나 중요한 UI 문구에 쓰기 전에 조정이 필요합니다.
- 내보내기 버튼을 열어 현재 팔레트 결과를 확인합니다. 색상 목록을 정리해 디자인 문서나 코드 작업에 넘기기 전에 위험한 조합을 먼저 걸러냅니다.
- 이미지 탭에서는 원본 이미지 영역을 클릭하거나 파일을 끌어다 놓아 PNG, JPG, WEBP 이미지를 업로드합니다.
- 이미지에서 추출된 색상이 표시되면 분석 버튼으로 팔레트 검토에 활용합니다. 이미지 기반 브랜드 무드나 배경 후보를 검사할 때 유용합니다.
- 코드 탭에서는 HTML/CSS 스니펫을 소스 코드 입력 영역에 붙여 넣고 분석 버튼을 누릅니다.
- 분석 보고서에서 코드 안의 색상 조합과 대비 문제를 확인합니다. 필요한 경우 보고서의 조합을 단일 검사로 넘겨 더 자세히 조정합니다.
- 특정 한 쌍을 정밀하게 다듬어야 하면 명도 대비에서 텍스트 색상, 배경 색상, 명도, 불투명도를 세밀하게 조정합니다.
팔레트 이미지 코드 모드 비교
세 탭은 모두 대비를 확인하지만 출발점이 다릅니다. 이미 정한 팔레트를 검토하는지, 이미지에서 색을 가져오는지, 코드에 이미 들어간 색을 찾아야 하는지에 따라 적합한 탭이 달라집니다. 같은 가독성 기준을 보더라도 입력 방식이 다르므로 작업 전에 목적을 분명히 하는 것이 좋습니다.
| 모드 | 입력 방식 | 확인하기 좋은 작업 |
|---|---|---|
| 팔레트 | 색상을 직접 추가해 매트릭스 생성 | 브랜드 팔레트, 디자인 토큰, UI 상태 색의 상호 대비를 비교합니다. |
| 이미지 | PNG, JPG, WEBP 업로드 또는 드래그 앤 드롭 | 사진, 배너, 그래픽에서 추출한 색을 텍스트나 배경 후보로 검토합니다. |
| 코드 | HTML/CSS 스니펫 붙여넣기 | 이미 작성된 마크업이나 스타일 안의 색상 문제를 빠르게 찾습니다. |
| 보고서 모달 | 선택한 색상 쌍 상세 확인 | 전경, 배경, 대비율, 가독성 상태를 보고 단일 검사로 이어 갑니다. |
| 내보내기 | 팔레트 결과 정리 | 검토한 색상 목록을 팀 문서나 구현 작업에 전달하기 전에 확인합니다. |
대비 매트릭스를 읽는 방법
대비 매트릭스는 색상 목록을 행과 열로 배치해 모든 조합을 비교하는 방식입니다. 한 색이 배경으로 쓰일 때 다른 색이 텍스트로 충분히 읽히는지, 반대로 역할이 바뀌었을 때도 안정적인지 빠르게 볼 수 있습니다. 매트릭스에서 낮은 수치가 보이면 그 조합은 본문, 버튼 문구, 레이블, 테이블 텍스트처럼 의미가 있는 콘텐츠에 바로 쓰기 어렵습니다.
높은 수치가 항상 좋은 디자인을 보장하는 것은 아닙니다. 매우 강한 대비는 가독성에는 안전하지만 전체 분위기에서 너무 딱딱하게 보일 수 있습니다. 반대로 낮은 대비 색상도 배경 장식, 넓은 면, 비활성 장식, 그래프 보조 영역에는 사용할 수 있습니다. 매트릭스의 역할은 색을 무조건 제거하는 것이 아니라, 어떤 색상 쌍을 텍스트용으로 신뢰할 수 있고 어떤 쌍을 장식용으로 제한해야 하는지 구분하는 것입니다.
이미지에서 추출한 색상을 검토하는 기준
이미지 기반 색상은 시각적으로 매력적이지만 그대로 텍스트나 UI 색상으로 쓰기에는 위험할 수 있습니다. 사진에서 추출된 색은 조명, 그림자, 압축, 주변 색의 영향을 받습니다. 밝은 하늘색이나 흐린 베이지색은 배경에는 어울려도 흰 글자나 회색 글자와 만나면 대비가 약할 수 있습니다.
이미지 탭에서 색을 추출한 뒤에는 대표 색만 보지 말고 실제 사용 역할을 나눠 봐야 합니다. 가장 어두운 색은 텍스트나 아이콘 후보가 될 수 있고, 중간 톤은 배경이나 카드 표면에 적합할 수 있으며, 매우 밝은 색은 넓은 배경이나 보조 하이라이트에 쓰기 쉽습니다. 추출 색상을 분석한 뒤 낮은 대비 조합은 텍스트용에서 제외하거나 더 어둡고 밝은 변형을 따로 만들어야 합니다.
코드 분석 보고서를 사용할 때 확인할 점
코드 탭은 이미 작성된 HTML/CSS 스니펫 안에서 색상 조합을 확인할 때 유용합니다. 예시처럼 버튼에 배경색과 글자색이 직접 들어가 있거나, 컴포넌트 코드에 여러 색상이 섞여 있을 때 색상 문제를 시각적으로 찾을 수 있습니다. 단, 코드에서 색이 발견된다고 해서 모든 색이 같은 관계로 사용된다는 뜻은 아닙니다. 장식용 border 색과 실제 텍스트 색은 별도로 판단해야 합니다.
보고서를 읽을 때는 낮은 대비 항목을 우선순위로 정리합니다. 본문, 버튼 문구, 링크, 폼 레이블처럼 읽어야 하는 요소의 실패는 먼저 수정하고, 그림자나 장식 배경처럼 의미 전달과 덜 관련된 색은 별도 검토 항목으로 분리합니다. 코드에서 찾은 값은 실제 페이지 배경, 컴포넌트 상태, 다크 모드 여부와 함께 다시 확인해야 합니다.
팔레트 검토에서 흔히 놓치는 상태
팔레트가 기본 상태에서 좋아 보여도 실제 UI에는 다양한 상태가 존재합니다. hover 상태, focus 상태, active 상태, disabled 상태, selected 상태, error 상태는 같은 색상 계열을 쓰더라도 명도와 채도가 달라질 수 있습니다. 명도 대비 프로로 기본 팔레트 조합을 검토한 뒤에는 상태별 색상도 함께 매트릭스에 넣어 비교하는 편이 안전합니다.
- 비활성 버튼의 회색 텍스트와 회색 배경
- 선택된 탭의 배경과 탭 문구
- 오류 메시지의 빨간색 텍스트와 연한 빨간 배경
- 성공 배지의 초록색 문구와 연한 초록 배경
- 다크 모드 카드 위의 보조 텍스트
- 차트 범례와 그래프 배경 또는 카드 배경
단일 검사로 넘겨야 하는 경우
매트릭스는 넓게 훑어보기에 좋지만, 한 조합을 실제로 고치는 작업은 더 세밀한 입력이 필요합니다. 특정 색상 쌍이 기준에 조금 못 미치거나 불투명도 때문에 애매하게 보인다면 단일 검사에서 전경과 배경을 놓고 명도와 불투명도를 직접 조정하는 것이 더 정확합니다. 보고서 모달의 색상 쌍을 기준으로 단일 검사에 넘기면 수정할 조합을 다시 입력하는 시간을 줄일 수 있습니다.
또한 최종 적용 전에는 매트릭스의 숫자만 믿지 말고 실제 문구 길이와 폰트 굵기를 고려해야 합니다. 짧은 버튼 문구는 통과해 보여도 긴 안내 문구에서는 피로하게 느껴질 수 있고, 얇은 글꼴은 같은 대비율에서도 더 약하게 보일 수 있습니다. 중요한 색상 쌍은 단일 검사에서 실제 전경과 배경 역할을 분명히 나눠 다시 확인합니다.
내보내기 전에 정리할 것
팔레트를 내보내기 전에 색상 이름, 역할, 사용 제한을 함께 정리하면 구현 단계에서 실수가 줄어듭니다. 예를 들어 같은 보라색 계열이라도 하나는 배경용, 하나는 텍스트용, 하나는 hover 상태용일 수 있습니다. 대비 매트릭스에서 안전한 조합과 위험한 조합을 확인한 뒤 내보내면 개발자가 어떤 조합을 피해야 하는지도 함께 이해할 수 있습니다.
- 텍스트용으로 통과한 색과 배경용으로만 쓸 색을 구분합니다.
- 이미지에서 추출한 색은 원본 이미지 맥락과 분리해 다시 검토합니다.
- 코드 분석 결과는 실제 CSS 우선순위와 컴포넌트 상태를 고려해 적용합니다.
- 낮은 대비 조합은 단순 삭제보다 역할 제한 또는 색상 보정을 먼저 검토합니다.
- 최종 색상은 디자인 토큰명, HEX 값, 사용 목적을 함께 기록합니다.
흔한 고급 대비 검사 실수
가장 큰 실수는 팔레트 전체가 예쁘다는 이유로 모든 색을 텍스트와 배경에 자유롭게 쓰는 것입니다. 팔레트 안의 색상은 서로 역할이 다르고, 모든 색상 쌍이 접근성 기준을 충족할 필요도 없습니다. 중요한 것은 어떤 조합이 읽어야 하는 콘텐츠에 안전한지, 어떤 조합은 장식이나 넓은 배경으로 제한해야 하는지 명확히 구분하는 것입니다.
- 매트릭스에서 낮은 대비가 보이는데도 작은 텍스트에 그대로 적용하지 않습니다.
- 이미지 추출 색을 브랜드 팔레트로 쓰기 전에 밝기와 배경 역할을 검토합니다.
- 코드 분석에서 발견된 모든 색상을 같은 우선순위로 수정하지 않습니다.
- 팔레트 내보내기 전에 실패 조합과 사용 제한을 기록합니다.
- 단일 조합을 세밀하게 고쳐야 할 때 매트릭스 화면에서만 판단하지 않습니다.
명도 대비 프로는 여러 색이 함께 쓰이는 실제 디자인 환경에 적합합니다. 팔레트, 이미지, 코드에서 출발한 색을 같은 기준으로 비교하고, 위험한 조합을 찾은 뒤, 필요한 쌍만 단일 검사에서 조정하면 접근성 검토와 색상 정리가 더 체계적으로 진행됩니다.