색상 대비 검사기 — WCAG AA/AAA 대비율과 APCA
텍스트와 배경 색상을 WCAG 2.x AA·AAA 기준으로 검사하고, APCA Lc 값을 확인하고, 통과하는 가장 가까운 색상을 찾아보세요.
큰 텍스트, 24px(18pt) 보통
큰 굵은 텍스트, 18.67px(14pt) 굵게
16px 일반 본문 텍스트입니다. 다람쥐 헌 쳇바퀴에 타고파. 가는 획이 작은 크기에서 뭉개지기 때문에 긴 단락은 제목보다 더 높은 대비가 필요합니다.
13px 작은 글씨, 캡션과 푸터 크기입니다.
가장 가까운 통과 색상
명도(OKLCH)만 바꾸므로 색조는 그대로 유지됩니다. 적용하거나 복사하세요.
#7676764.54:1#0606064.52:1#5959597.00:1브라우저에서 계산됩니다. 입력한 내용은 전송되거나 저장되지 않습니다. 모든 무료 도구 보기.
문제를 발견하셨거나 개선할 점이 있나요? 모든 메시지를 읽고 빠르게 고칩니다.
이 무료 색상 대비 검사기는 ADA, 유럽 접근성법(European Accessibility Act), 대부분의 접근성 감사의 기준인 WCAG 2.x에 따라 텍스트가 배경 위에서 읽기 쉬운지 알려 줍니다. 선택기, HEX 코드, 화면 스포이트로 텍스트 색상과 배경 색상을 입력하면 대비율과 함께 일반·큰 텍스트 크기의 AA·AAA, 그리고 버튼 테두리와 아이콘 같은 UI 구성 요소의 통과 여부를 보여 줍니다.
조합이 통과하지 못하면 OKLCH에서 명도만 조정해 브랜드 색조는 그대로 둔 채 통과하는 가장 가까운 텍스트나 배경 색상을 제안합니다. WCAG 3 작업 초안의 새 방식인 APCA Lc 값도 보여 주는데, 이는 대비가 실제로 어떻게 인지되는지를 모델링해 다크 모드와 얇은 글꼴을 더 잘 판단합니다. WCAG 3는 아직 표준이 아니므로 규정 준수에는 WCAG 2.x 대비율이 기준이 되며, 두 방식이 어디서 다른지는 페이지에서 설명합니다.
사용 방법
- 텍스트 색상과 배경 색상을 입력하세요. 선택기를 쓰거나, HEX 코드(#777 또는 #777777)를 입력하거나, 눈 아이콘을 클릭해 화면의 아무 픽셀이나 추출할 수 있습니다(Chrome, Edge).
- 대비율과 다섯 가지 판정을 확인하세요. 본문 텍스트는 AA 일반(4.5:1), 24px 또는 굵은 18.66px 제목은 AA 큰 텍스트(3:1)를 충족해야 합니다.
- 미리보기에서 본문, 큰 텍스트, 캡션 크기로 실제로 어떻게 보이는지 확인하세요.
- 검사를 통과하지 못하면 가장 가까운 통과 색상에서 제안 색상을 적용하세요. 명도만 바뀝니다.
- 바꾸기로 반대 조합(예: 다크 모드 버전)을 테스트한 뒤 결과나 CSS를 복사하세요.
자주 묻는 질문
WCAG가 요구하는 대비율은 얼마인가요?
WCAG 2.1과 2.2의 AA 수준은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1(성공 기준 1.4.3), 입력란 테두리, 포커스 링, 아이콘 같은 사용자 인터페이스 구성 요소와 의미 있는 그래픽에 3:1(1.4.11)을 요구합니다. AAA 수준은 텍스트 기준을 일반 7:1, 큰 텍스트 4.5:1로 높입니다(1.4.6). 로고와 순수 장식용 요소, 비활성 요소는 예외입니다.
WCAG에서 큰 텍스트는 어느 정도인가요?
보통 굵기 18포인트 이상 또는 굵게 14포인트 이상입니다. 1포인트가 1.333픽셀이므로 CSS 픽셀로는 보통 굵기 24px 또는 굵게 약 18.66px입니다. 굵은 16px 제목은 큰 텍스트가 아니며, 보통 굵기 20px도 아닙니다. 얇거나 장식적인 글꼴은 이 크기에서도 실제로는 부족할 수 있는데, 이것이 APCA가 해결하려는 문제 중 하나입니다.
흰색 위의 #777777은 접근성 기준을 충족하나요?
본문 텍스트로는 아닙니다. #ffffff 위의 #777777은 대비율이 4.48:1로 AA 기준 4.5:1에 살짝 못 미치므로, 일반 텍스트 AA는 통과하지 못하고 큰 텍스트와 UI 구성 요소에서만 통과합니다. WCAG는 반올림을 허용하지 않으므로 4.48은 불합격입니다. 흰색 위에서 AA를 통과하는 가장 밝은 회색은 #767676(4.54:1)이고, AAA는 #595959(7.00:1)입니다.
APCA는 무엇이고, WCAG 2 대신 써야 하나요?
APCA(Accessible Perceptual Contrast Algorithm)는 WCAG 3에 제안된 대비 계산 방식입니다. 비율 대신 약 -108에서 106 사이의 명도 대비 값 Lc를 주며, 부호가 극성을 나타냅니다(음수는 어두운 배경에 밝은 텍스트). 같은 비율이라도 극성과 색이 얼마나 어두운지에 따라 다르게 읽힌다는 점을 반영하는데, WCAG 2가 어두운 색끼리의 조합을 과대평가하고 일부 색 배경 위 흰 글자를 과소평가하는 이유가 여기에 있습니다. 더 나은 디자인 결정을 내리는 데는 APCA를 쓰되, 규정 준수 보고에는 WCAG 2.x를 쓰세요. WCAG 3는 작업 초안이고 대비 계산 방식은 아직 바뀔 수 있습니다.
대비율은 어떻게 계산하나요?
각 색상의 상대 휘도는 sRGB 채널을 선형 광으로 변환한 뒤, 눈의 민감도에 따라 빨강 0.2126, 초록 0.7152, 파랑 0.0722로 가중해 계산합니다. 대비율은 (L1 + 0.05) / (L2 + 0.05)이며, L1이 더 밝은 색입니다. 범위는 1:1(같은 색)부터 21:1(흰색 위 검은색)까지입니다. 0.05 항은 화면에 반사되는 주변광을 나타냅니다.
대비 기준을 통과하지 못하는 색상은 어떻게 고치나요?
색조가 아니라 명도를 바꾸세요. 대비율이 통과할 때까지 텍스트를 어둡게 하거나 배경을 밝게 하세요(다크 모드에서는 반대로). 이 페이지의 제안이 OKLCH 색 공간에서 바로 그렇게 하므로, 통과하지 못한 브랜드 파란색은 다른 색이 아니라 더 어두운 파란색이 됩니다. 다른 쪽 색이 중간 톤이라 어느 방향으로도 목표에 도달할 수 없다면, 다른 쪽 색을 바꾸세요. 중간 회색 배경은 어떤 텍스트 색상으로도 7:1에 도달할 수 없습니다.
WCAG 2.x 대비 요구 사항 한눈에 보기
• 일반 텍스트, AA(1.4.3): 4.5:1. 본문, 레이블, 링크, 정보를 전달하는 placeholder 텍스트, 이미지 속 텍스트에 적용됩니다.
• 큰 텍스트, AA(1.4.3): 3:1. 보통 굵기 24px 이상 또는 굵게 18.66px 이상인 텍스트.
• UI 구성 요소와 그래픽, AA(1.4.11): 인접한 색상 대비 3:1. 입력란 테두리, 체크박스 외곽선, 포커스 표시, 의미를 전달하는 아이콘, 차트 선.
• 일반 텍스트, AAA(1.4.6): 7:1. 큰 텍스트, AAA: 4.5:1. 모든 곳에서 AAA를 충족하는 사이트는 드뭅니다. 긴 글을 읽는 페이지나 고령층 사용자를 위해서는 목표로 삼을 만합니다.
• 예외: 로고와 브랜드명, 비활성 컨트롤, 순수 장식용 요소, 부수적인 텍스트(예: 사진의 일부).
거의 모든 감사에서 두 가지 실수가 나옵니다. 양식 입력란의 placeholder 텍스트는 보통 연한 회색이라 4.5:1을 통과하지 못하는데, 유일한 레이블인 경우가 많아 검사 대상이 됩니다. 그리고 흰 글자가 들어간 브랜드 색상 버튼은 대비가 3에서 4.5 사이에 머물러 큰 텍스트로만 통과하는 경우가 많은데, 버튼 레이블은 14px나 16px입니다.
WCAG 2와 APCA가 다르게 판단하는 경우
WCAG 2 공식은 대비를 대칭적이고 휘도에 선형적인 것으로 취급하는데, 시각은 그렇게 작동하지 않습니다. 그 결과 실제로 두 가지 문제가 계속 나타납니다.
다크 모드: 거의 검은 배경 위의 연회색 텍스트는 WCAG 2를 여유 있게 통과하지만 눈이 부시거나 번져 보이는 경우가 많고, 일부 중간~어두운 조합은 통과하는데도 읽기 어렵습니다. APCA는 어두운 배경 위 밝은 텍스트를 따로(음수 Lc) 다루며 어두운 쪽에서 더 엄격합니다.
채도 높은 색상: 주황색(#ff7a00) 위 흰 글자는 WCAG 2로 약 2.6:1이라 불합격이고 같은 주황색 위 검은 글자는 통과하지만, 많은 독자는 흰 글자도 똑같이 잘 읽힌다고 느낍니다. APCA는 이런 조합을 인지에 더 가깝게 평가합니다.
APCA 수준의 대략적인 기준: 본문 텍스트는 Lc 90 권장, Lc 75가 본문 최소, 기타 콘텐츠 텍스트는 Lc 60, 큰 제목은 Lc 45, placeholder와 비활성 텍스트는 Lc 30, 구분선 같은 비텍스트 요소는 Lc 15입니다. 전체 지침은 글꼴 굵기와 크기에 따라서도 달라집니다. 규정 준수 검사를 대체하는 것이 아니라 WCAG 2와 함께 쓰는 디자인 보조 도구로 활용하세요.
관련 무료 도구
- 색상 팔레트 생성기 — 스페이스바를 눌러 새 팔레트를 만들고, 마음에 드는 색은 잠그고, 색 조합을 고르거나 사진에서 팔레트를 추출하세요. CSS, Tailwind, SCSS, JSON, PNG로 내보낼 수 있습니다.
- 색상 선택기·변환기 — 화면 어디서든 색상을 추출하거나 HEX, RGB, HSL 간에 즉시 변환하세요.
- CSS 그라디언트 생성기 — 드래그할 수 있는 색상 지점, 각도 다이얼, 프리셋으로 선형·원형·원뿔형 그라디언트를 만들고 CSS나 Tailwind 클래스를 복사하세요.
- 박스 그림자 생성기 — 실시간 미리보기와 엘리베이션·뉴모피즘·글로 프리셋으로 레이어형 box-shadow와 text-shadow 효과를 디자인하고 CSS를 복사하세요.