WCAG AA·AAA 대비 검사기

WCAG 2.2 AA·AAA 기준에 따라 색상 대비를 확인하고, 글자 크기를 미리 보며 접근성을 고려한 대체 색상을 찾습니다.

입력란에 포인터를 올리거나 선택하면 도움말이 표시됩니다. Escape로 닫을 수 있습니다.

전경색배경불투명 캔버스

HEX, RGB, RGBA, HSL을 사용하세요. 투명 색상은 불투명 캔버스 위에 합성합니다.

5.84:1

기준 판정에는 반올림된 표시값이 아닌 전체 정밀도의 비율을 사용합니다.

WCAG 2.2
수준	적용	SC	최솟값	결과
AA	일반 텍스트	1.4.3	4.5:1	충족
AA	큰 텍스트	1.4.3	3:1	충족
AAA	일반 텍스트	1.4.6	7:1	미달
AAA	큰 텍스트	1.4.6	4.5:1	충족
AA	인터페이스 구성 요소와 그래픽	1.4.11	3:1	충족

미리보기 텍스트글꼴 크기(CSS px)굵게

Aa — fiokit.

일반 텍스트: AA ✓ · AAA ✗

큰 텍스트: 24 CSS px 이상 또는 굵게 표시한 18.67 CSS px(14 pt) 이상.

추천 전경색 목표보고서

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA 일반 텍스트 (SC 1.4.3): PASS — 4.5:1
AA 큰 텍스트 (SC 1.4.3): PASS — 3:1
AAA 일반 텍스트 (SC 1.4.6): FAIL — 7:1
AAA 큰 텍스트 (SC 1.4.6): PASS — 4.5:1
AA 인터페이스 구성 요소와 그래픽 (SC 1.4.11): PASS — 3:1

색상 쌍만 검사하며 전체 WCAG 적합성을 확인하지 않습니다. 인접 색상, 상호작용 상태, 실제 콘텐츠는 별도로 평가하세요.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

사용 방법

전경색, 배경색, 불투명 캔버스를 설정하세요. AA·AAA 결과가 즉시 갱신됩니다. 글꼴 크기와 굵기를 시험하고 추천 색상을 적용하거나 보고서를 다운로드하세요.

사용 예제

색상

#155bdf

자주 묻는 질문

입력 내용이 서버로 전송되나요?

아니요. 내용은 이 브라우저에서 처리되며 서버로 전송되거나 저장되지 않습니다.

WCAG AA·AAA 대비 검사기 사용 시 알아둘 점은 무엇인가요?

텍스트와 비텍스트 요소의 기준을 따로 표시합니다. 이 색상 검사만으로 전체 WCAG 적합성을 인증하지는 않습니다.