대비율 4.5:1은 무엇을 뜻하나요?

밝은 색의 상대 휘도에 0.05를 더한 값이 어두운 색의 값보다 4.5배 크다는 뜻입니다. 일반 크기 글자가 WCAG AA를 통과하는 최소 기준입니다.

회색 글자 #777777은 흰 배경에서 통과하나요?

대비율이 4.47:1이라 일반 글자 AA(4.5:1)에는 조금 못 미치고 큰 글자 기준만 통과합니다. 한 단계 어두운 #767676부터 4.54:1로 AA를 넘습니다.

AA는 일반 글자 4.5:1, AAA는 7:1이 필요합니다. 대부분의 사이트는 AA를 목표로 하고, 본문이 길거나 저시력 사용자가 많으면 AAA를 씁니다.

있습니다. WCAG 1.4.11에 따라 뜻을 전달하는 UI 요소와 그래픽은 주변과 3:1 이상이어야 합니다. 표의 'UI 요소·그래픽' 행이 그 기준입니다.

글자색과 배경색의 대비율을 WCAG 2.2 기준(AA·AAA, 큰 글자, UI 요소)으로 검사하고, 통과하는 가장 가까운 색을 제안합니다

도구를 불러오는 중…

글자색과 배경색을 고르면 WCAG 2.2 대비율과 AA·AAA 통과 여부가 바로 나오고, 기준에 못 미치면 색상을 유지한 채 밝기만 바꾼 통과 색을 제안합니다. 웹·앱 화면이나 발표 자료의 글자가 잘 읽히는지 확인할 때 씁니다.

'두 색 검사' 탭에서 '글자색'과 '배경색'을 색 선택기나 HEX·rgb()·hsl() 입력으로 정합니다. 대비율과 기준별 통과 표가 바로 바뀝니다.
'미리보기 문장'에 실제 문구를 넣어 일반 글자, 큰 글자, 굵은 글자, 테두리·아이콘에서 어떻게 보이는지 봅니다.
'통과하는 가장 가까운 색'에서 '글자색을 바꾸면' 또는 '배경색을 바꾸면' 옆의 '적용'을 누르면 그 색이 바로 들어갑니다. HEX 값을 누르면 복사됩니다.
'팔레트 검사' 탭에 색을 2~12개 넣으면 모든 조합의 대비율 표와 '기준을 넘는 색 조합' 목록이 나옵니다. '강조할 기준'으로 AA·AAA를 바꿉니다.

대비율 = (L1 + 0.05) ÷ (L2 + 0.05)이며 L1, L2는 두 색의 상대 휘도입니다. 1:1(같은 색)부터 21:1(검정과 흰색)까지이고 소수 둘째 자리에서 내림합니다.
기준은 WCAG 2.2의 1.4.3(AA: 일반 글자 4.5:1, 큰 글자 3:1), 1.4.6(AAA: 일반 글자 7:1, 큰 글자 4.5:1), 1.4.11(UI 요소·그래픽 3:1)입니다. 큰 글자는 24px 이상 또는 굵은 18.66px 이상입니다.
제안 색은 OKLCH 색 공간에서 색상과 채도를 두고 밝기만 위아래로 움직여 기준을 처음 넘는 지점을 찾습니다. 밝기만으로 닿을 수 없으면 '밝기만으로는 불가'로 표시됩니다.
마지막 색, 미리보기 문장, 팔레트 목록은 이 기기의 브라우저에만 저장됩니다.

대비율 4.5:1은 무엇을 뜻하나요?: 밝은 색의 상대 휘도에 0.05를 더한 값이 어두운 색의 값보다 4.5배 크다는 뜻입니다. 일반 크기 글자가 WCAG AA를 통과하는 최소 기준입니다.
회색 글자 #777777은 흰 배경에서 통과하나요?: 대비율이 4.47:1이라 일반 글자 AA(4.5:1)에는 조금 못 미치고 큰 글자 기준만 통과합니다. 한 단계 어두운 #767676부터 4.54:1로 AA를 넘습니다.
AA와 AAA의 차이는 무엇인가요?: AA는 일반 글자 4.5:1, AAA는 7:1이 필요합니다. 대부분의 사이트는 AA를 목표로 하고, 본문이 길거나 저시력 사용자가 많으면 AAA를 씁니다.
버튼 테두리나 아이콘에도 대비 기준이 있나요?: 있습니다. WCAG 1.4.11에 따라 뜻을 전달하는 UI 요소와 그래픽은 주변과 3:1 이상이어야 합니다. 표의 'UI 요소·그래픽' 행이 그 기준입니다.