브라우저 안에서만 계산

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

반올림 전 대비율로 일반 텍스트, 큰 텍스트, UI 구성요소의 WCAG 2.2 경계값을 각각 확인합니다.

무엇을 결정할 수 있나요?

웹 접근성 표준(WCAG 2.2)에서 색상 대비(Color Contrast)는 시각적 정보를 텍스트나 그래픽으로 전달할 때 모든 사용자가 명확하게 인지할 수 있도록 보장하는 가장 기초적이면서도 중요한 성공 기준입니다. 본 계산기는 사용자가 입력한 전경색과 배경색의 sRGB 8비트 채널값을 정규화하고 선형화(Linearization)하여 상대 휘도(Relative Luminance)를 산출한 뒤, W3C 공식 명암비 공식 ((L1 + 0.05) / (L2 + 0.05))을 통해 정확한 명암비를 실시간으로 계산합니다.

시중에 존재하는 일반적인 브라우저 명암비 검사기들은 화면 UI 편의를 위해 소수점 둘째 자리 이하를 임의로 반올림하여 '4.5:1'로 단순 표기하는 경우가 많습니다. 그러나 #777777과 #FFFFFF의 조합처럼 내부 수학 연산 시 4.478:1에 불과하여 엄격한 WCAG AA 기준(4.50:1)에 미달함에도 불구하고, 반올림 표기만 보고 합격으로 오판하는 실무 오류가 빈번합니다. 본 도구는 화면 표시용 반올림 수치와 별개로, 내부 원값(Floating-point Precision)을 직접 비교하여 통과와 실패를 엄격하게 판정합니다.

또한 본 계산기는 일반 텍스트(4.5:1 이상)와 큰 텍스트(3:1 이상), 그리고 WCAG 2.2에서 강조되는 비텍스트 UI 구성요소 및 그래픽 객체(1.4.11, 3:1 이상)의 판정 기준을 한 화면에서 명확히 분리하여 제공합니다. 같은 색상 조합이라도 요소의 폰트 크기, 굵기, 인터랙티브 역할에 따라 요구되는 법적 기준이 완전히 달라지기 때문입니다.

실무 디자이너와 프론트엔드 개발자는 본 도구를 통해 디자인 시스템 팔레트를 사전에 검증할 수 있으며, 모니터 캘리브레이션 오차와 브라우저 서브픽셀 앤티에일리어싱 렌더링에 대비하여 최소 4.6:1 이상의 안전 마진(Safe Margin)을 확보하는 색상 리팩토링 전략을 수립할 수 있습니다.

이 페이지의 고유 질문: 표시상 4.5:1로 보이는 색 조합이 실제 AA 경계값을 넘는가?

로컬 계산 도구

값을 입력해 검사하기

입력값은 브라우저 상태에서만 처리하며 서버·URL·Analytics로 보내거나 저장하지 않습니다.

자동으로 확인하는 범위

불투명 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 하위검사를 사용하며, 비활성·장식 예외는 자동으로 확정하지 않습니다.

자체 검증 도식

자체 검증 도식: #777777과 #767676은 둘 다 4.5:1로 보일 수 있으나, 선형화 휘도 공식에 따른 원값 판정 시 #777777은 AA 실패(4.478:1), #767676은 AA 통과(4.542:1)입니다.

수정 전·후 예제

반올림 경계의 회색 본문

실패: 표시값만 보고 결정

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

통과 후보: 원값으로 재검사

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

두 결과 모두 4.5로 표시될 수 있지만 원값을 사용하면 첫 조합은 AA 실패, 둘째 조합은 AA 통과입니다.

옅은 아이콘 경계

3:1 미만

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

대비를 높인 후보

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

아이콘이 기능이나 상태를 전달한다면 텍스트가 아니라 비텍스트 대비 하위검사를 따로 확인합니다.

실무 판단 가이드

4.5:1만 확인하면 끝일까?

먼저 바로잡을 통념

대비율이 화면에서 4.5:1로 보이면 모든 요소가 WCAG AA를 통과한다.

일반 텍스트, 큰 텍스트, 사용자 인터페이스의 시각 정보에는 서로 다른 하위검사가 적용됩니다. 먼저 요소 역할과 기준 수준을 선택해야 합니다.

표시값은 설명을 위한 반올림 결과입니다. 판정은 sRGB 선형화부터 계산한 원 대비율을 임계값과 직접 비교해야 합니다.

판단 순서

최종 계산된 전경·배경 단색을 확인한다.
텍스트인지 UI·그래픽인지 구분한다.
큰 텍스트라면 실제 크기와 굵기를 대조한다.
원 대비율로 선택 기준을 판정한다.
사진·그라디언트·예외는 수동 검토로 남긴다.

실패했을 때 복구

실패한 전경 또는 배경 한쪽을 단계적으로 밝거나 어둡게 조정합니다.
후보색을 같은 공식으로 다시 계산합니다.
실제 컴포넌트 상태와 hover·focus·disabled 조합을 다시 검사합니다.

회귀 테스트와 검수 증거

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

텍스트·UI 색상 대비 계산기 회귀 입력과 기대 결과
Fixture ID	입력	기대 결과
`contrast-black-white`	#000000 / #FFFFFF	21:1, 모든 표시 프로필 통과
`contrast-rounding-fail`	#777777 / #FFFFFF	약 4.478:1, 일반 텍스트 AA 실패
`contrast-rounding-pass`	#767676 / #FFFFFF	약 4.542:1, 일반 텍스트 AA 통과

대표 fixture 검증 기록

검사 환경: 브라우저 및 테스트 환경: 대표 fixture 기반 자동 테스트 및 DOM 파서 검증; 실제 화면낭독기 수동 검사는 미검사
예상 결과: #777777은 원값 약 4.478로 fail, #767676은 약 4.542로 pass
자동 결과: #777777은 약 4.478로 기준 미달(Fail), #767676은 약 4.542로 기준 충족(Pass) 결과를 반환하도록 설계되었습니다. (화면낭독기 음성 출력은 수동 검토 필요)
재검사 방법: 두 입력의 표시값이 같아질 수 있어도 status가 서로 다른지 단위 테스트로 비교합니다.

자동 결과 뒤에 남는 검사

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

자동 판정의 한계

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

반드시 남는 수동 확인

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

공식 상세 근거

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

이번 공개 검수 범위

WCAG 2.2 대비 공식·경계값 대조, Chromium 입력 흐름 및 산출 HTML 표본 검수

테스트 증거: contrast 단위 테스트와 #777777/#767676 Playwright 경계 회귀
콘텐츠 검토: 가이드의 통념·판단 순서와 fixture 결과를 도구 본문에서 중복 없이 대조
미검사·한계: 사진·그라디언트 실제 픽셀 표본 미검사
미검사·한계: 화면낭독기와 무관한 색상 계산 도구

자주 묻는 질문

화면에는 4.5:1로 표시되는데 왜 WCAG 2.2 AA 불합격인가요?

일반적인 검사 도구들은 가독성을 위해 소수점 둘째 자리를 반올림하여 한 자리로 보여줍니다. 예를 들어 실제 계산된 정밀 수치가 4.478:1인 경우 화면에는 4.5:1로 반올림되어 보이지만, W3C 공식 성공 기준 1.4.3은 '4.50:1 이상'을 명시하므로 4.478은 엄격한 기준 미달 실패입니다. 본 도구는 반올림 전 내부 원값을 임계값과 직접 비교하여 오판정을 원천 방지합니다.

큰 텍스트(Large Text)의 명확한 정의는 무엇인가요?

W3C WCAG 규격에 따르면 큰 텍스트는 최소 18pt(24px) 이상이거나, 굵은 폰트(Bold, Font Weight 700 이상)일 경우 최소 14pt(약 18.66px) 이상인 경우를 의미합니다. 본문에서 글씨가 조금 커 보인다고 해서 무조건 큰 텍스트 기준(3:1)을 적용해서는 안 되며, CSS 계산 스타일의 실제 px 치수와 font-weight를 엄밀히 대조해야 합니다.

버튼의 테두리나 아이콘은 몇 대 몇의 명암비를 만족해야 하나요?

WCAG 2.2 성공 기준 1.4.11(Non-text Contrast)에 따라, 사용자가 인터페이스를 조작하는 데 필수적인 버튼 외곽선, 입력창 테두리, 상태 인디케이터, 의미를 전달하는 아이콘은 인접한 배경과 최소 3.0:1 이상의 명암비를 유지해야 합니다. 단, 비활성화(disabled)된 컨트롤이나 순수 장식용 그래픽은 예외로 인정됩니다.

반투명 알파(Alpha) 채널이 적용된 색상은 어떻게 계산하나요?

rgba() 색상과 같이 불투명도가 1 미만인 색상은 단독으로 명암비를 계산할 수 없습니다. 해당 반투명 레이어가 실제로 렌더링되는 하위 배경 단색과 알파 블렌딩(Alpha Compositing) 공식에 따라 합성된 최종 불투명 결과 색상을 도출한 뒤 상대 휘도를 계산해야 정확한 결과를 얻을 수 있습니다.