명도 대비 검사기 (색상 대비)

글자색과 배경색의 명도 대비를 WCAG 2.1 공식으로 바로 계산하고, 일반 글자와 큰 글자 각각에 대해 AA·AAA 통과 여부를 보여 주는 색상 대비 검사기입니다. 기준에 못 미치면 같은 색상을 유지하면서 통과하는 가장 가까운 색을 추천해, 디자인의 느낌을 바꾸지 않고 고칠 수 있습니다.

사용법

1. 큰 색상 견본을 눌러 컬러 피커를 열거나, 스포이트로 화면의 색을 추출하거나, 각 입력란에 직접 입력합니다.
2. #hex, rgb(), hsl(), hwb(), oklch(), lab(), 색 이름 등 CSS 색상을 입력란이나 페이지 아무 곳에 붙여 넣을 수 있습니다.
3. 각 형식 옆의 복사 버튼으로 코드를 복사합니다. 불투명도 슬라이더로 투명도를 더할 수 있습니다.
4. 팔레트에서 견본을 누르면 현재 색이 되고, 길게 누르면(오른쪽 클릭) HEX가 복사됩니다. 명도 대비 탭에서 글자색과 배경색을 정하고, 기준에 못 미치면 제안 색을 눌러 고칩니다.

• WCAG 2.1은 일반 글자에 4.5:1(AA), AAA에 7:1을 요구합니다. 큰 글자(24 px 또는 굵은 18.66 px)는 AA 3:1, AAA 4.5:1이며 UI 요소와 그래픽은 3:1이 필요합니다.
• 제안 색은 색상과 채도를 유지하고 명도(OKLCH)만 바꿔 기준을 통과하는 가장 가까운 값을 찾습니다.
• 반투명 색은 배경과 합성한 뒤 대비율을 계산합니다.
• CMYK 값은 단순 변환입니다. 인쇄용이라면 인쇄소의 색상 프로파일을 사용하세요.
• 최근 사용한 색은 이 브라우저에만 저장됩니다.

WCAG 기준값

WCAG 2.1은 일반 글자에 명도 대비 4.5:1 이상(AA 등급), AAA 등급에는 7:1 이상을 요구합니다. 큰 글자(24px 이상, 또는 굵게 18.66px 이상)는 AA에서 3:1, AAA에서 4.5:1입니다. 입력창 테두리나 아이콘처럼 의미가 있는 UI 요소와 그래픽은 3:1이 필요합니다.

대비 값은 1:1(같은 색)부터 21:1(흰 바탕에 검정)까지입니다.

대비 계산 방법

각 색을 상대 휘도로 바꿉니다. sRGB 채널을 선형화한 뒤 빨강 0.2126, 초록 0.7152, 파랑 0.0722의 가중치로 더합니다. 대비는 (L1 + 0.05) / (L2 + 0.05)이고 밝은 색이 분자에 옵니다. 흰 바탕에 회색 #767676은 4.54:1로 AA를 겨우 통과하지만 #777777은 4.48:1로 통과하지 못합니다. 경계가 이만큼 아슬아슬할 수 있습니다. 반투명 색은 먼저 배경과 합성한 뒤 계산합니다.

통과하지 못한 색 고치기

추천 색은 색상과 채도는 그대로 두고 OKLCH 명도만 바꿔 통과하는 가장 가까운 값을 찾습니다. 대개 글자색을 어둡게 하는 것이 가장 눈에 덜 띄는 수정입니다. 명도 대비는 접근성의 일부일 뿐이며 글자 굵기, 크기, 간격도 중요합니다.

자주 묻는 질문