색상 대비율 4.5:1은 무엇일까? 글자색과 배경색 확인

대비율은 색 하나가 아니라 두 색의 관계입니다

같은 회색 글자도 흰 배경과 검은 배경에서는 다르게 보입니다. Tooliv가 표시하는 두 대비율은 선택한 색과 각각 #FFFFFF, #000000을 비교한 값입니다. 배경이 연한 회색인 화면에 흰 배경 결과를 그대로 적용하면 안 됩니다.

현재 도구는 6자리 HEX 입력과 색 선택을 지원하고 RGB·HSL 값을 보여줍니다. 별도의 배경색 입력이나 알파 투명도 합성 계산은 제공하지 않습니다. 보색·유사색 팔레트도 자동으로 접근성 기준을 통과한 색상 목록은 아닙니다.

일반 글자와 큰 글자의 기준을 구분하세요

대상	WCAG 2.2 AA 최소 대비
일반적인 텍스트와 텍스트 이미지	4.5:1
WCAG에서 정의하는 큰 텍스트	3:1

W3C의 기준 설명은 큰 글자에 18pt 이상 또는 굵은 14pt 이상 등을 제시하며, 한·중·일 글꼴은 그에 상응하는 크기를 고려합니다. 단순히 제목 태그이거나 굵게 표시했다는 이유만으로 낮은 기준을 적용하지 마세요. 로고나 비활성 요소 등은 별도 예외 조건이 있으므로 일반 본문의 기준과 섞지 않아야 합니다.

4.50으로 보여도 반올림 전 값을 확인해야 합니다

기준은 경계값입니다. 실제 계산값이 4.499라면 화면에 반올림해 4.50으로 보여도 4.5:1을 충족하지 않습니다. 이 점을 W3C 문서가 명시합니다. 경계에 딱 맞춘 색보다 여유가 있는 조합을 고르고, 최종 적용에서는 반올림 전 계산값으로 판정하세요.

다음은 불투명한 sRGB 색상에 대비 공식을 적용한 계산 예시입니다. 실제 화면을 촬영해 측정한 값은 아닙니다.

글자색	흰 배경 대비 약값	일반 글자 4.5:1 기준
#777777	4.478:1	미달
#767676	4.542:1	충족

차이가 작아 보이더라도 경계값을 넘는지는 달라집니다. 다만 이 숫자만으로 실제 글꼴의 두께, 작은 크기에서의 읽기 편의, 화면 전체의 접근성이 모두 해결된다고 판단해서는 안 됩니다.

HSL의 밝기와 대비율을 같은 값으로 읽지 마세요

HSL은 색상·채도·명도로 색을 표현합니다. MDN의 hsl 설명에 나오는 L 값은 그 표현 체계의 명도입니다. L=50%라는 숫자 자체가 흰 배경에서 대비 기준을 통과한다는 뜻은 아닙니다. 보색을 골랐다는 사실도 충분한 대비의 보장은 아닙니다.

실제 화면에서 쓸 글자색과 배경색을 정한 뒤 조합을 평가하세요. 반투명 텍스트, 배경 이미지, 그라데이션이 있다면 합성된 색과 글자가 놓이는 영역까지 확인해야 합니다. 다크 모드에서는 밝은 모드와 별도로 검사합니다.

흰색이나 검정 배경을 쓰는 화면이라면 색상 피커에서 후보를 비교할 수 있습니다. 이후 실제 컴포넌트에서 글꼴 크기와 굵기를 적용하고, 각 상태의 전경·배경 조합으로 최종 대비를 확인하세요.