배색 체커(명암비·보색·색각 시뮬레이션)
글자색과 배경색을 입력하면 WCAG 2.1 명암비와 AA·AAA 합격 여부를 판정하고, 기준을 충족하는 가장 가까운 색까지 제안합니다. 보색·유사색·트라이어드 등 색상환에서 뽑은 배색 패턴과 HEX／RGB／HSL 변환, 1형·2형·3형 색각과 그레이스케일에서 보이는 모습 비교도 같은 화면에서 할 수 있습니다.
불러오는 중...
ABOUT
배색 체커(명암비·보색·색각 시뮬레이션) 소개
배색 체커는 색을 하나 정한 뒤에 필요한 확인을 한 화면에서 한꺼번에 하는 도구입니다. 글자색과 배경색의 명암비를 WCAG 2.1 기준으로 판정하고, 기준에 미치지 못하면 색상과 채도를 유지한 채 명도만 바꾼 「합격하는 가장 가까운 색」을 보여 줍니다. 보색·유사색·트라이어드 등 색상환에서 뽑는 배색 패턴과 HEX／RGB／HSL 변환, 1형(P형)·2형(D형)·3형(T형) 색각과 그레이스케일에서 보이는 모습 비교도 같은 화면에서 확인할 수 있습니다.
배색 체커(명암비·보색·색각 시뮬레이션) 사용 방법
- 1위 입력란에 글자색(기준색)을 넣는다. 컬러 피커 외에 #4F46E5·rgb(79,70,229)·hsl(243,75%,59%) 어떤 표기든 읽어 들인다
- 2배경색을 넣고 「명암비」 탭에서 비율과 AA·AAA 합격 여부를 본다(불합격이면 합격하는 가까운 색이 제안된다)
- 3「배색 패턴」 탭에서 보색·유사색·트라이어드 등의 조합과 컬러 코드를 확인한다(색 견본을 클릭하면 복사할 수 있다)
- 4「색각 시뮬레이션」 탭에서 그래프나 자료에 쓰는 색을 한꺼번에 넣고, 혼동하기 쉬운 조합이 없는지 확인한다
- 5공유 URL을 복사하면 같은 색의 판정 결과를 그대로 다른 사람에게 전달할 수 있다
이럴 때 유용해요
- 사이트나 슬라이드의 글자색이 배경에 비해 읽기 어렵지 않은지 공개 전에 수치로 확인한다
- 브랜드 컬러를 본문에 쓰고 싶지만 그대로는 연할 때, 인상을 바꾸지 않고 진하기만 조정한다
- 로고나 배너의 포인트 색을 정하기 위해 기준색의 보색이나 분할 보색을 구한다
- 그래프의 계열 색이 색각 유형에 따라 같은 색으로 보이지 않는지 확인한다
- 흑백으로 인쇄·복사되는 자료의 색 구분이 명도 차이만으로 구별되는지 확인한다
- 디자인에서 받은 HEX를 RGB나 HSL로 변환해 CSS나 슬라이드에 붙여 넣는다
이용 시 참고 사항
- 명암비는 WCAG 2.1의 상대 휘도로 계산합니다. 흰색과 검은색 조합이 최대인 21.00:1입니다.
- 합격 기준은 일반 글자가 AA 4.5:1·AAA 7:1, 큰 글자(24px 이상 또는 굵은 18.66px＝약 19px 이상)가 AA 3:1·AAA 4.5:1, 버튼 테두리나 그래프 색 구분 등 글자 이외의 요소가 3:1입니다.
- 비율은 버림으로 표시하고 판정도 같은 값으로 합니다. 4.49:1이 「4.5」로 표시되어 합격처럼 보이는 일은 없습니다.
- 제안하는 색은 색상과 채도를 고정하고 명도만 움직여, 4.5:1을 충족하는 가장 가까운 색을 밝은 방향·어두운 방향 양쪽에서 찾은 것입니다.
- 배색 패턴은 화면(빛의 삼원색) 색상환＝HSL의 색상을 돌려 만들기 때문에 빨강의 보색은 시안이 됩니다. 물감처럼 색료로 섞는 색상환에서는 빨강의 보색을 초록으로 봅니다. 보색은 180°, 유사색은 ±30°, 분할 보색은 150°와 210°, 트라이어드는 120°와 240°, 테트라드는 90°·180°·270°입니다.
- CMYK는 컬러 프로파일을 쓰지 않는 단순 변환의 참고값입니다. 인쇄소 입고 값으로는 쓸 수 없습니다.
- 색각 시뮬레이션은 Machado 외(2009)의 변환 행렬을 중증도 1.0으로 적용한 것입니다. 실제로 보이는 모습에는 개인차가 있으므로 최종 확인은 당사자나 전용 소프트웨어로 해 주세요.
- 구별하기 쉬운지의 판정에는 CIEDE2000 색차를 사용하며, 10 미만인 조합을 「혼동하기 쉬움」으로 표에 표시합니다.
- 판정은 모두 브라우저 안에서 계산하며, 입력한 색이 서버로 전송되지 않습니다.
이런 질문에 답해 드려요
배색 체커(명암비·보색·색각 시뮬레이션): 이런 상황에 도움이 됩니다.
- 이 글자색과 배경색 조합은 읽기 어렵지 않을까?
- 명암비가 부족할 때 어떤 색으로 하면 될까?
- 이 색의 보색(반대색)은 무슨 색?
- 그래프 색 구분이 색각 유형에 따라 같게 보이지 않는지 확인하고 싶다
- HEX를 RGB나 HSL로 변환하고 싶다
- 흑백으로 인쇄해도 구별되는 배색으로 하고 싶다
자주 묻는 질문
- 명암비는 얼마면 충분한가요?
- 본문 크기의 글자라면 4.5:1 이상이 기준입니다(WCAG 2.1의 AA). 24px 이상의 큰 글자나 굵은 18.66px 이상이라면 3:1로 충분합니다. 더 엄격한 AAA는 일반 글자가 7:1, 큰 글자가 4.5:1입니다. 버튼 테두리, 입력란 경계, 그래프 색칠 같은 글자 이외의 요소도 3:1 이상이 요구됩니다.
- 브랜드 컬러가 기준을 충족하지 않습니다. 색을 바꿀 수밖에 없나요?
- 대부분은 색상과 채도는 그대로 두고 명도만 움직이면 충분합니다. 이 도구는 4.5:1을 충족하는 가장 가까운 색을 밝은 방향·어두운 방향 양쪽에서 찾아 제안하므로 시각적인 인상을 유지한 채 고칠 수 있습니다. 그래도 미치지 못한다면 브랜드 컬러는 제목이나 면의 색에 쓰고 본문은 검은색에 가까운 색으로 하는 식으로 나누는 것이 현실적입니다.
- 보색은 어떻게 구하나요?
- 색상환에서 정반대에 있는 색, 즉 색상을 180° 돌린 색입니다. 예를 들어 색상 240°인 파랑의 보색은 60°인 노랑이 됩니다. 보색끼리는 가장 눈에 띄는 조합이지만 같은 면적으로 나란히 두면 부딪혀 보이므로, 한쪽을 포인트 색으로 한정하거나 보색의 양옆을 쓰는 분할 보색(150°와 210°)을 쓰면 다루기 쉬워집니다.
- 색각 유형에 따라 보이는 모습이 다르면 무엇이 문제인가요?
- 일본인 남성의 약 5%가 1형이나 2형 색각으로, 빨강과 초록이 비슷한 색으로 보입니다. 그래프를 빨강과 초록으로 구분해 칠하면 그분들에게는 같은 색의 띠로 보입니다. 이 도구는 색을 나란히 놓고 4가지 보이는 방식으로 표시하며, CIEDE2000 색차가 10 미만인 조합을 표에 표시하므로 어떤 쌍이 위험한지 바로 알 수 있습니다.
- 색으로 구별할 수 없을 때는 어떻게 하나요?
- 색 이외의 단서를 더하는 것이 확실합니다. 꺾은선이라면 실선·파선·점선으로 나누고, 막대그래프라면 무늬를 넣고, 범례에 의존하지 않고 그래프에 직접 라벨을 두는 방법이 있습니다. 색을 남긴 채 개선하고 싶다면 색상이 아니라 명도를 떨어뜨려 주세요. 명도 차이가 있으면 흑백 복사에서도, 색각 유형이 달라도 구별할 수 있습니다.
- HEX·RGB·HSL은 어떻게 구분해서 쓰나요?
- HEX(#4F46E5)는 디자인 도구와 주고받을 때, RGB는 화면 표시 계산에, HSL은 색을 조정할 때 적합합니다. HSL은 색상·채도·명도가 나뉘어 있어서 「같은 색 그대로 조금 어둡게 하기」「색감만 옮기기」 같은 조작이 숫자 하나로 끝납니다. 이 도구의 배색 패턴과 톤도 HSL로 계산합니다.
Special Thanks