글자 색 대비 검사

사용법

1. 글자 색과 바탕 색을 고릅니다. 색 상자를 눌러 고르거나, 옆 칸에 #767676, rgb(118 118 118), hsl(0 0% 46%) 같은 값을 넣습니다. 형식이 맞지 않으면 칸 아래에 이유가 나오고, 고칠 때까지 계산하지 않습니다.
2. 실제로 쓸 글꼴과 굵기, 글자 크기를 정합니다. 크기와 굵기로 일반 글자 기준과 큰 글자 기준 가운데 어느 쪽을 적용할지 정해지고, 결과 표에서 해당하는 줄을 진하게 표시합니다.
3. 결과의 대비율과 표를 봅니다. 미리보기 칸에는 고른 색과 글꼴, 크기로 한글과 영문 예문을 보여 줍니다.
4. 기준에 못 미치면 아래쪽의 기준에 맞춘 글자 색을 확인하고, 색 값 복사 버튼으로 가져갑니다.
5. 지금 설정 링크 복사 버튼을 누르면 색과 글꼴, 크기가 주소에 담긴 링크를 복사합니다. 그 링크를 열면 같은 설정으로 다시 계산합니다.

기준

• 대비율은 WCAG 2.2의 정의를 따릅니다. 색의 sRGB 값(0–255)을 0–1로 나눈 뒤 0.04045 이하이면 12.92로 나누고, 그보다 크면 ((값 + 0.055) / 1.055)^2.4로 바꿉니다. 상대 휘도는 0.2126 R + 0.7152 G + 0.0722 B이고, 대비율은 (밝은 쪽 휘도 + 0.05) / (어두운 쪽 휘도 + 0.05)입니다. 1 : 1부터 21 : 1까지 나옵니다.
• 판정은 반올림하지 않은 값으로 합니다. 화면에는 소수 둘째 자리까지 반올림해 보여 주지만, 반올림하면 기준값에 닿는 경우(예: 4.499)는 버림한 값(4.49)으로 보여 줘 통과한 것처럼 보이지 않게 합니다.
• AA는 일반 글자 4.5 : 1, 큰 글자 3 : 1, AAA는 일반 글자 7 : 1, 큰 글자 4.5 : 1 이상이어야 합니다(WCAG 2 성공 기준 1.4.3, 1.4.6).
• 큰 글자는 18pt(24px) 이상, 또는 굵게 쓴 14pt(18.66px) 이상입니다. 이 도구는 CSS px로 크기를 받고, 굵기 700 이상을 굵은 글자로 봅니다. 굵기 숫자의 경계는 WCAG에 정해져 있지 않아 흔히 쓰는 bold(700)에 맞췄습니다.
• 불투명도가 100% 미만인 색은 겹쳐 보이는 색으로 계산합니다. 바탕 색은 흰 바탕(#ffffff) 위에, 글자 색은 그 바탕 위에 겹칩니다. sRGB 채널의 소수 값을 유지한 채 겹치고 대비율을 계산합니다. 미리보기와 실제 CSS 렌더링에서는 브라우저의 화면 출력에 따라 색이 양자화될 수 있습니다.
• 추천 색은 글자 색을 OKLCH로 바꾼 뒤 색상과 채도는 그대로 두고 밝기(L)만 0.001 단위로 올리거나 내려, 기준을 처음 넘는 색 가운데 원래 밝기에 가장 가까운 것을 고릅니다. HSL 밝기보다 OKLCH 밝기가 눈에 보이는 밝기와 더 가깝게 움직여서 이 방식을 골랐습니다. 밝기를 바꾸면 sRGB로 나타낼 수 없는 색이 생기기도 하는데, 그때는 채도만 필요한 만큼 줄입니다. 찾은 색은 #rrggbb로 반올림한 뒤 대비율을 다시 계산해 기준을 넘는 것만 보여 줍니다. 추천 색은 불투명한 색입니다.

예시

흰 바탕(#ffffff)에 #777777 글자는 4.48 : 1로, 본문 크기(16px, 굵기 400)에서는 AA에 조금 못 미칩니다. 한 단계 진한 #767676은 4.54 : 1로 AA를 넘습니다. 회색 글자를 쓸 때 #767676 근처가 흰 바탕의 경계라는 점을 기억해 두면 편합니다.

같은 #777777이라도 크기를 24px로 키우거나, 굵기 700으로 바꾸고 19px 이상으로 키우면 큰 글자 기준(3 : 1)이 적용되어 AA를 통과합니다. 버튼처럼 짧고 굵은 글자에 연한 색을 쓰려면 크기와 굵기를 함께 정하세요.

검은 글자를 rgb(0 0 0 / 50%)처럼 반투명하게 쓰면 흰 바탕 위에서 계산 색은 rgb(127.5 127.5 127.5)이고 대비율은 3.98 : 1입니다. 불투명도가 같은 글자도 바탕 색에 따라 대비율이 달라지므로, 바탕이 바뀌는 곳에서는 각 바탕마다 확인해야 합니다.

한계

• WCAG 2의 대비율은 두 색의 휘도만 비교하는 식입니다. 사람이 느끼는 읽기 쉬움과 꼭 일치하지는 않아서, 어두운 바탕에 밝은 글자처럼 같은 값이어도 다르게 보이는 경우가 있습니다. 이를 보완하려는 APCA 같은 새 방식도 있지만, 아직 표준 기준으로 정해지지 않아 이 도구는 쓰지 않습니다.
• 한글은 한 글자에 획이 많고 획 사이가 좁아서, 작은 크기나 가는 굵기에서는 같은 대비율이라도 라틴 문자보다 흐릿해 보일 수 있습니다. 작은 한글 본문은 기준을 겨우 넘기기보다 여유 있게 대비를 두고, 미리보기 칸에서 실제 크기로 확인해 보세요. 얼마나 더 높여야 하는지 정한 수치는 없습니다.
• 바탕이 사진이나 그러데이션이면 한 가지 색으로 계산할 수 없습니다. 중간 색까지 포함해 글자 바로 뒤의 모든 위치에서 대비율이 가장 낮은 곳을 직접 확인하세요.
• 색 이름(red, navy 등), hwb(), lab(), oklch() 같은 다른 CSS 색 형식은 받지 않습니다. 화면 밖 색 공간(Display P3 등)의 색도 계산하지 않습니다.
• 모니터 밝기와 색 설정, 화면 반사, 다크 모드 같은 환경은 계산에 들어가지 않습니다. 기준을 넘는 것은 최소 조건이고, 실제 화면과 인쇄물에서 따로 확인해야 합니다.
• WCAG의 큰 글자 기준은 pt로 정해져 있고 px로 옮긴 값은 근사치입니다. 글꼴마다 같은 크기에서도 글자 면 크기가 달라, 같은 px라도 크게 또는 작게 보일 수 있습니다.

자주 묻는 질문

4.5 : 1을 넘으면 접근성 검사를 통과한 건가요?

글자 대비(WCAG 성공 기준 1.4.3) 하나를 만족한 것입니다. 접근성 검사에는 아이콘·입력 칸 테두리의 대비, 확대했을 때의 배치, 색만으로 뜻을 전하지 않는지 같은 다른 기준도 함께 들어갑니다.

대비율이 4.49로 나오는데 4.5로 봐도 되나요?

안 됩니다. WCAG는 기준값을 반올림하지 말라고 정합니다. 이 도구도 반올림하면 기준에 닿는 값은 버림해서 보여 주므로, 화면의 값이 기준보다 작으면 미달입니다.

추천 색이 원래 색과 꽤 달라 보입니다.

바탕과 원래 글자 색의 밝기가 비슷하면 기준을 넘기까지 밝기를 많이 바꿔야 합니다. 채도가 높은 색은 sRGB 범위를 넘지 않게 채도도 함께 줄어들 수 있습니다. 색을 지키고 싶다면 바탕 색을 바꿔 보거나 글자를 크고 굵게 써서 큰 글자 기준을 적용하는 방법도 있습니다.

입력한 색이 어딘가에 저장되나요?

계산은 이 브라우저 안에서 하며, 별도의 설정 저장 기능은 없습니다. 설정은 주소의 쿼리에 담기므로, 그 주소를 열면 쿼리가 사이트 호스트로 전송됩니다.

함께 쓰면 좋은 것

• 단위 변환·행간 계산: 큰 글자 기준의 pt 값을 px나 rem으로 옮길 때 씁니다.
• 한글 더미 텍스트: 대비를 정한 색으로 시안의 본문 자리를 채울 글이 필요할 때 씁니다.
• 하다 산스: 굵기가 100부터 900까지 있어, 같은 색에서 굵기별로 읽기 쉬움을 비교하기 좋습니다.