텍스트·UI 색상 대비 계산기

자동으로 확인하는 범위

• 불투명 HEX·RGB 단색의 상대 휘도와 대비율 계산
• WCAG 2.2 일반 텍스트 AA·AAA, 큰 텍스트 AA·AAA, 비텍스트 UI 3:1 기준 분리
• 알파색은 실제 하위 배경이 있을 때 합성 후 계산
• 사진·영상·그라디언트와 실제 글자 크기 판단은 수동 확인으로 분리

입력값과 단위

전경색

#RGB, #RRGGBB, rgb()/rgba() 형식의 글자·아이콘 색

배경색

전경 바로 뒤의 불투명 단색

검사 대상

일반 텍스트, 큰 텍스트, UI·의미 있는 그래픽 중 하나

기준 수준

WCAG 2.2 AA 또는 AAA. 서로 다른 결과를 하나로 합치지 않음

판정할 때 지키는 원칙

• 일반 텍스트 AA는 원 대비율 4.5:1 이상, AAA는 7:1 이상을 사용합니다.
• 큰 텍스트 AA는 3:1 이상, AAA는 4.5:1 이상이지만 실제 큰 텍스트 정의 충족 여부는 글꼴 크기와 굵기를 함께 확인해야 합니다.
• UI 구성요소와 의미 있는 그래픽의 필요한 시각 정보는 3:1 하위검사를 사용하며, 비활성·장식 예외는 자동으로 확정하지 않습니다.

자체 검증 도식

수정 전·후 예제

color: #777777;
background: #ffffff; /* 실제 약 4.478:1 */

color: #767676;
background: #ffffff; /* 실제 약 4.542:1 */

.icon { color: #aaa; background: #fff; }

.icon { color: #767676; background: #fff; }

회귀 테스트와 검수 증거

아래 fixture는 실제 고객 사례가 아니라 판정 로직이 같은 입력에 같은 결과를 내는지 확인하는 공개 회귀 자료입니다. 현장 사용 경험으로 과장하지 않습니다.

대표 fixture 검증 기록

검사 환경

브라우저 및 테스트 환경: 대표 fixture 기반 자동 테스트 및 DOM 파서 검증; 실제 화면낭독기 수동 검사는 미검사

예상 결과

#777777은 원값 약 4.478로 fail, #767676은 약 4.542로 pass

자동 결과

#777777은 약 4.478로 기준 미달(Fail), #767676은 약 4.542로 기준 충족(Pass) 결과를 반환하도록 설계되었습니다. (화면낭독기 음성 출력은 수동 검토 필요)

재검사 방법

두 입력의 표시값이 같아질 수 있어도 status가 서로 다른지 단위 테스트로 비교합니다.

자동 결과 뒤에 남는 검사

• 실제 CSS 계산색 대조
• 글자 크기·굵기 프로필
• 사진·그라디언트 여부

자동 판정의 한계

• 사진·영상·그라디언트의 가장 불리한 배경 영역을 자동 선택하지 않습니다.
• 글꼴 렌더링, 안티앨리어싱, 실제 큰 텍스트 해당 여부를 확정하지 않습니다.
• 여러 단계의 반투명 레이어와 blend-mode 합성은 지원하지 않습니다.
• 색상만으로 정보나 상태가 전달되는지는 사람이 직접 확인해야 합니다.

반드시 남는 수동 확인

• 실제 CSS에서 최종 계산된 전경·배경색이 입력값과 같은가?
• 텍스트가 큰 텍스트 정의의 크기와 굵기를 실제로 만족하는가?
• 사진이나 그라디언트 위라면 모든 위치에서 필요한 대비가 유지되는가?
• 로고·장식·비활성 예외를 잘못 적용하지 않았는가?

공식 상세 근거

• WCAG 2.2 Success Criterion 1.4.3 — Contrast (Minimum)
• WCAG 2.2 Success Criterion 1.4.6 — Contrast (Enhanced)
• WCAG 2.2 Success Criterion 1.4.11 — Non-text Contrast

로직 버전 contrast-1.0.0 · 공개 검수일 2026-08-04 · 검수 책임 서호영 (운영·콘텐츠 검토 책임)

자주 묻는 질문