색상 대비 검사기 (WCAG)

전경색과 배경색 조합이 WCAG 접근성 기준을 충족하는지 확인합니다.

스튜디오 · 중성 환경

대비율

— : 1

AA · 본문 ≥ 4.5

AA · 큰 글자 ≥ 3.0

AAA · 본문 ≥ 7.0

AAA · 큰 글자 ≥ 4.5

원클릭 보정 · 색상 유지

글자 색

배경색

표본

기능

명도 대비 수치 표시

WCAG AA/AAA 통과 여부

텍스트 실시간 미리보기

일반 텍스트와 큰 텍스트

사용 방법

1. 글자 색과 배경색을 설정하면 표본과 WCAG 판정이 실시간으로 갱신됩니다.

2. 표본(타이포 / 아티클 / 인터페이스)을 전환해 실제 사용 상황에서 색 조합을 확인하세요. S 키로 두 색을 교체할 수 있습니다.

3. 기준에 미달하면 원클릭 보정을 사용하세요 — 색상은 유지하고 명도만 조정합니다. WCAG 보고서 복사도 가능합니다.

이 도구에 대하여

글자와 배경의 밝기가 너무 비슷하면 누구에게나 읽기 힘들고, 어떤 사람에게는 아예 읽을 수 없습니다. 웹 콘텐츠 접근성 지침(WCAG)은 두 색의 상대 휘도를 바탕으로 1:1부터 21:1까지의 명암비로 이를 측정합니다. AA 등급은 본문에 4.5:1 이상, 큰 글자(24px 또는 약 18.66px 굵게)에 3:1 이상을 요구하고, AAA 등급은 이를 7:1과 4.5:1로 높입니다. 이 검사기는 명암비를 실시간으로 계산해 네 가지 기준의 통과 여부를 보여 주고, 실제 글꼴 견본·기사·인터페이스를 그려 실제 쓰임새에서 색 조합을 판단할 수 있게 합니다. 기준에 못 미치면 명도만 바꿔 통과하는 가장 가까운 글자 색을 제안합니다.

자주 묻는 질문

명암비는 어떻게 계산하나요?

각 색을 WCAG 2의 sRGB 공식으로 상대 휘도로 바꾼 뒤 (L1 + 0.05) ÷ (L2 + 0.05)를 계산합니다. L1은 더 밝은 색입니다. 흰 바탕에 검은 글자는 최대값인 21:1, 같은 두 색은 1:1입니다.

어느 정도가 "큰 글자"인가요?

WCAG는 보통 굵기로 18포인트(CSS 24px) 이상, 또는 굵게 14포인트(CSS 약 18.66px) 이상을 큰 글자로 정의합니다. 글자가 클수록 읽기 쉬우므로 AA는 3:1, AAA는 4.5:1이면 충분합니다.

AA를 통과하면 접근성이 확보된 디자인인가요?

명암비는 여러 요구 사항 중 하나일 뿐입니다. 얇은 글꼴, 사진 위의 글자, 너무 작은 글자, 색만으로 정보를 전달하는 방식도 문제가 될 수 있으니 실제 화면에서 확인하고 다른 접근성 점검과 함께 진행하세요.

제안되는 수정 색은 어떻게 정해지나요?

글자 색의 색상은 그대로 두고 더 밝거나 어두운 버전을 찾아 목표 명암비에 도달하게 합니다. 현재 배경에서 어떤 명도로도 도달할 수 없으면 그렇다고 알려 주므로 배경색을 바꿔야 합니다.

아이콘과 버튼에도 명암비 기준이 적용되나요?

네. WCAG 2.1은 아이콘, 입력란 테두리, 포커스 표시처럼 의미가 있는 비텍스트 요소에 3:1 이상을 요구합니다. 순수한 장식 그래픽과 비활성화된 컨트롤은 예외입니다.

색상 대비 검사기 (WCAG)

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구