- 전경색(글자 색)과 배경색을 색상 피커로 고르거나 HEX 값을 직접 입력합니다.
- 두 색의 대비비가 "4.53:1" 같은 형식으로 계산되어 표시됩니다.
- AA·AAA 기준의 일반 텍스트·큰 텍스트 통과 여부가 통과/실패 배지로 나타납니다.
- 아래 미리보기에서 실제 글자가 배경 위에서 읽기 편한지 눈으로 확인합니다.
대비비는 두 색의 밝기(휘도) 차이를 1:1부터 21:1까지의 비율로 나타낸 값입니다. 1:1은 두 색이 같아 글자가 전혀 안 보이는 상태이고, 21:1은 순수한 검정과 흰색의 최대 대비입니다.
- 3:1 — 큰 텍스트·UI 요소의 최소선: 큰 제목, 아이콘, 입력창 테두리 같은 비텍스트 요소가 넘어야 하는 기준입니다.
- 4.5:1 — 본문 AA: 일반 크기 본문이 모두에게 읽히려면 넘어야 하는 가장 중요한 선입니다.
- 7:1 — AAA: 저시력 사용자까지 배려하는 강화 기준으로, 공공·금융 서비스에서 요구되곤 합니다.
색 코드를 직접 다룬다면 HEX·RGB 색상 코드 가이드를 함께 보면 색을 미세 조정하기 쉽습니다.
- 본문 색은 AA 이상을 목표로: 일반 텍스트는 대비비 4.5:1(AA)을 넘겨야 시력이 약한 사용자도 읽기 편합니다. 회색 본문(#777 등)을 흰 배경에 쓸 때 통과하는지 꼭 확인하세요. 통과하지 못하면 글자를 더 진하게 조정합니다.
- 큰 제목은 기준이 완화됩니다: 18pt(약 24px) 이상 또는 14pt 굵은 글씨는 "큰 텍스트"로 분류되어 3:1(AA)만 넘으면 됩니다. 그래서 옅은 색 제목도 크게 쓰면 기준을 통과할 수 있습니다.
- 버튼·링크에도 적용: 배경색 위 버튼 글자, 강조 링크 색도 대비를 확인해야 합니다. 브랜드 색이 흰 글자와 대비가 부족하면 색을 약간 어둡게 조정해 가독성과 접근성을 모두 잡으세요.
각 색의 상대 휘도(밝기)를 WCAG 공식으로 구한 뒤, (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05)로 계산합니다. 결과는 1:1(차이 없음)부터 21:1(검정·흰색)까지의 값으로 나옵니다.
둘 다 WCAG 접근성 등급으로, AAA가 더 엄격합니다. 일반 텍스트 기준 AA는 4.5:1, AAA는 7:1을 요구합니다. 공공·금융 사이트는 AAA를, 일반 웹은 최소 AA를 충족하는 것이 권장됩니다.
큰 글자는 같은 대비라도 읽기 쉬워 기준이 완화됩니다. WCAG는 18pt(약 24px) 이상 또는 14pt 굵은 글씨를 '큰 텍스트'로 보고, 일반 텍스트(AA 4.5:1)보다 낮은 3:1도 통과로 인정합니다.
네. 대비비는 어느 쪽이 글자이고 배경인지와 무관하게 두 색의 휘도 차이로만 계산되므로, 두 색을 바꿔 넣어도 같은 값이 나옵니다. 흰 글자에 옅은 노랑처럼 둘 다 밝은 조합은 대비비가 낮게 나와 AA를 통과하지 못하는 경우가 많으니, 한쪽 색을 더 어둡게 바꿔야 합니다.
그렇습니다. 라이트 모드에서 대비가 충분해도 다크 모드는 전경색과 배경색이 모두 달라지므로 대비비가 완전히 바뀝니다. 다크 모드용 글자색과 배경색을 다시 입력해 별도로 AA 통과 여부를 확인하는 것이 안전합니다. 특히 어두운 배경 위 회색 글자는 의외로 대비가 부족한 경우가 많습니다.