Reverzereverze

Color Contrast Ratio Calculator

무료 계산기

텍스트와 배경 색상의 WCAG 대비 비율을 확인해 읽기 쉽고 접근성 있는 디자인을 만드세요.

100% 비공개

브라우저에서 실행됩니다 — 어떤 숫자도 기기를 벗어나지 않습니다.

내 색상 (RGB)

텍스트 색상의 빨강 채널.

텍스트 색상의 초록 채널.

텍스트 색상의 파랑 채널.

배경 색상의 빨강 채널.

배경 색상의 초록 채널.

배경 색상의 파랑 채널.

대비 비율

15.43 : 1

WCAG AA는 4.5:1(큰 텍스트는 3:1), AAA는 7:1이 필요합니다.

작동 방식

1

colorContrast.how.s1.title

colorContrast.how.s1.desc

2

colorContrast.how.s2.title

colorContrast.how.s2.desc

3

colorContrast.how.s3.title

colorContrast.how.s3.desc

4

colorContrast.how.s4.title

colorContrast.how.s4.desc

실제로 읽히는 스크린샷을 디자인하세요

Reverze는 App Store 스크린샷을 더 잘 읽히고 전환율 높은 크리에이티브로 재구성합니다.

색상 대비가 중요한 이유

대비 비율은 텍스트 색상이 배경과 얼마나 다른지를 1:1(동일)부터 21:1(흰 바탕에 검정)까지의 척도로 측정합니다. 웹 콘텐츠 접근성 지침(WCAG)은 저시력이나 색각 이상이 있는 사람도 콘텐츠를 읽을 수 있도록 최소 비율을 정합니다. 일반 텍스트는 AA를 통과하려면 최소 4.5:1이 필요하고, 큰 텍스트(약 18pt 또는 14pt 굵게)는 3:1만 있으면 됩니다.

더 엄격한 AAA 수준은 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 이 계산기는 공식 WCAG 상대 휘도 공식을 RGB 값에 적용하므로, 게시 전에 어떤 텍스트와 배경 조합이든 눈대중 없이 확인할 수 있습니다.

자주 묻는 질문

좋은 대비 비율은 얼마인가요?
WCAG AA를 충족하려면 일반 본문 텍스트는 최소 4.5:1, 큰 텍스트는 3:1을 목표로 하세요. 더 엄격한 AAA 수준에서는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 사용합니다.
큰 텍스트의 기준은 무엇인가요?
WCAG는 큰 텍스트를 일반 굵기로 최소 18pt(약 24px), 또는 굵게 14pt(약 18.66px)로 정의합니다. 큰 형태는 읽기 쉽기 때문에 대비 요건이 더 낮습니다.
대비 비율은 어떻게 계산되나요?
각 색상의 상대 휘도를 RGB 채널에서 계산한 뒤, 비율은 (밝은 쪽 L + 0.05) / (어두운 쪽 L + 0.05)입니다. 결과는 1:1에서 21:1 범위입니다.
대비 비율은 어느 색이 텍스트인지에 따라 달라지나요?
아니요. 비율은 대칭입니다 — 텍스트와 배경을 바꿔도 같은 값이 나옵니다. WCAG는 두 색상 간의 휘도 차이만 고려합니다.