색 대비 비율 계산기는 어떤 상황에서 가장 자주 쓰이나요?

복사한 코드나 마크업, 데이터 문자열을 빠르게 정리하거나 확인해야 할 때 가장 자주 쓰입니다. 직접 손보는 것보다 입력값을 한 번에 검토하고 결과를 바로 비교하기 좋습니다.

색 대비 비율 계산기를 쓸 때 먼저 확인할 것은 무엇인가요?

원본 텍스트가 완전한지와 줄바꿈, 인코딩, 따옴표 같은 형식 요소가 유지되는지를 먼저 확인해야 합니다. 특히 일부만 붙여 넣으면 결과가 의도와 다르게 보일 수 있습니다.

색 대비 비율 계산기 입력은 어떻게 넣는 게 좋나요?

가공 전 원본을 최대한 그대로 넣는 편이 좋습니다. 중간에 편집된 문자열보다 실제 사용 중인 HTML, JSON, URL, 토큰 원문을 기준으로 넣어야 문제 원인을 정확하게 찾기 쉽습니다.

색 대비 비율 계산기 결과는 어디에 활용하면 좋나요?

디버깅, 문서 변환, 공유용 정리, 다른 도구로 넘기기 전 전처리에 활용하기 좋습니다. 필요하면 관련 뷰어나 변환기와 이어서 써서 검증 단계를 한 번 더 거치는 편이 안전합니다.

태그

#개발 #WCAG 색 대비 #접근성 색상

색 대비 비율 계산기 (WCAG)

두 색의 대비 비율을 계산해 WCAG AA·AAA 기준 통과 여부를 판정합니다.

마지막 업데이트: 2026-05-10

활용 팁

색 대비 비율 계산기 (WCAG)은(는) 막연한 감을 숫자로 바꿔 보는 첫 단계에 적합합니다. 결과 하나만 확정값처럼 보기보다 조건을 조금씩 바꿔 보면서 현실적인 범위를 잡는 쪽이 더 실용적입니다.

단위와 기준 날짜가 맞는지 먼저 확인하세요.
결과가 애매하면 조건을 두세 가지로 나눠 다시 계산해 보세요.
관련 가이드·도표까지 같이 보면 실제 행동으로 옮기기 쉬워집니다.
결과는 신고·정산·계약 전의 예상치로 보고 공식 자료와 함께 확인하세요.
관련 가이드와 도표를 같이 보면 해석이 훨씬 쉬워집니다.

입력

민감한 입력이 포함될 수 있어 이 도구의 입력값·이력은 자동 저장하지 않습니다.

전경색 (HEX)

배경색 (HEX)

이 도구는 보안을 위해 시나리오 저장을 꺼두었습니다.

결과

대비 비율: 17.85 : 1

상세

WCAG AA (본문): 통과
WCAG AAA (본문): 통과
WCAG AA (대형 텍스트, 18pt 이상): 통과

· 본문은 4.5:1 이상, 대형 텍스트는 3:1 이상이 AA 기준입니다. AAA는 7:1 이상이 본문 기준.

계산 후 바로 할 일

결과 저장 전에 이어서 확인

계산다음 계산

HTML 미리보기·정렬기

계산다음 계산

Markdown 미리보기·HTML 변환

계산다음 계산

JSON 포매터·검증

신뢰 기준

계산 결과는 입력값과 공개 기준을 바탕으로 한 참고값입니다. 실제 청구·신고·계약 전 공식 기관의 최신 기준을 확인하세요.

업데이트: 2026-05-10
비용: 무료·회원가입 없음
저장: 브라우저 내 저장

외부 사이트에 임베드 (iframe 코드 복사)

블로그·기업 사이트에 이 계산기를 그대로 넣으세요. 무료, 회원가입 없음. 광고·헤더·푸터 없는 클린 UI 임베드.

iframe 높이 자동 조절 (권장)

<iframe
  src="https://thorkit.kr/embed/color-contrast/"
  width="100%"
  height="900"
  frameborder="0"
  style="border: 1px solid #e5e7eb; border-radius: 6px;"
  title="색 대비 비율 계산기 (WCAG) — ThorKit"
  loading="lazy"
></iframe>
<script>
  window.addEventListener("message", function(e) {
    if (e.origin !== "https://thorkit.kr") return;
    if (e.data && e.data.type === "thorkit:height") {
      var iframes = document.querySelectorAll('iframe[src*="https://thorkit.kr/embed/"]');
      iframes.forEach(function(f) { f.style.height = e.data.height + "px"; });
    }
  });
</script>

· height 700~1200 권장 (자동 조절 끄면 수동 조절 필요)· loading="lazy"로 페이지 속도 영향 최소

계산 근거

색 대비 비율은 글자색과 배경색이 얼마나 뚜렷이 구분되는지를 숫자로 나타낸 값입니다. 대비가 낮으면 저시력 사용자나 밝은 환경에서 텍스트를 읽기 어려워집니다. 이 도구는 전경색과 배경색 두 HEX 코드를 입력받아 대비 비율을 계산하고 WCAG 접근성 기준 통과 여부를 판정합니다.

계산은 WCAG가 정의한 방식을 따릅니다. 각 색을 상대 휘도(relative luminance)로 변환한 뒤, 밝은 쪽과 어두운 쪽 휘도에 0.05를 더해 비율을 구합니다. 결과는 1:1에서 최대 21:1 사이의 값으로 나오며, 숫자가 클수록 대비가 좋습니다.

판정 기준은 본문 텍스트의 경우 AA가 4.5:1 이상, AAA가 7:1 이상이고, 18pt 이상 또는 굵은 대형 텍스트는 AA가 3:1 이상입니다. 웹사이트나 앱의 색 조합이 접근성 기준을 충족하는지 확인하고, 버튼·링크·본문 색을 정할 때 활용할 수 있습니다.

색 대비 비율 계산기 (WCAG)는 복사한 문자열이나 마크업을 빠르게 확인하고 다음 작업으로 넘기기 전에 한 번 정리할 때 특히 유용합니다. 실제로는 디버깅, 문서 전처리, 공유용 가공처럼 작은 반복 작업에서 시간을 가장 많이 줄여 줍니다.

WCAG 색 대비 결과는 숫자 하나보다 입력 원문이 정확한지가 더 중요합니다. 원본 형식이 깨졌거나 일부만 붙여 넣으면 해석이 달라질 수 있으므로, 결과를 저장하거나 공유하기 전에는 관련 뷰어나 변환기와 함께 한 번 더 확인하는 편이 안전합니다.

결과 해석 포인트

이런 도구는 결정을 대신하는 것이 아니라 판단 재료를 빨리 정리하는 용도에 가깝습니다. 다음 행동이 붙는 주제라면 공식 안내와 연결 콘텐츠를 같이 확인하는 편이 안전합니다.

공식 확인 경로

이 페이지는 빠르게 이해하기 좋게 정리한 요약본입니다. 실제 신청, 신고, 계약, 예약, 제출 단계에서는 아래 원문 안내를 함께 확인하는 편이 안전합니다.

정부24 — 행정 서비스와 민원 안내
국가법령정보센터 — 법령 원문 확인
KOSIS — 공식 통계 확인

자주 묻는 질문

색 대비 비율 계산기는 어떤 상황에서 가장 자주 쓰이나요?: 복사한 코드나 마크업, 데이터 문자열을 빠르게 정리하거나 확인해야 할 때 가장 자주 쓰입니다. 직접 손보는 것보다 입력값을 한 번에 검토하고 결과를 바로 비교하기 좋습니다.
색 대비 비율 계산기를 쓸 때 먼저 확인할 것은 무엇인가요?: 원본 텍스트가 완전한지와 줄바꿈, 인코딩, 따옴표 같은 형식 요소가 유지되는지를 먼저 확인해야 합니다. 특히 일부만 붙여 넣으면 결과가 의도와 다르게 보일 수 있습니다.
색 대비 비율 계산기 입력은 어떻게 넣는 게 좋나요?: 가공 전 원본을 최대한 그대로 넣는 편이 좋습니다. 중간에 편집된 문자열보다 실제 사용 중인 HTML, JSON, URL, 토큰 원문을 기준으로 넣어야 문제 원인을 정확하게 찾기 쉽습니다.
색 대비 비율 계산기 결과는 어디에 활용하면 좋나요?: 디버깅, 문서 변환, 공유용 정리, 다른 도구로 넘기기 전 전처리에 활용하기 좋습니다. 필요하면 관련 뷰어나 변환기와 이어서 써서 검증 단계를 한 번 더 거치는 편이 안전합니다.

다음으로 해볼 것

계산 결과를 해석하거나, 기준표를 확인하거나, 이어서 계산할 수 있는 콘텐츠입니다.

같은 주제 더 보기 →

</> 이 계산기를 다른 사이트에 임베드하기

아래 코드를 블로그·뉴스·기업 사이트의 HTML 영역에 붙여넣으면 이 계산기를 그대로 사용할 수 있습니다. 무료, 별도 신청 X.

<iframe
  src="https://thorkit.kr/embed/color-contrast/"
  width="100%"
  height="900"
  frameborder="0"
  style="border: 1px solid #e5e7eb;"
  title="색 대비 비율 계산기 (WCAG) — ThorKit(토르킷)"
  loading="lazy"
></iframe>

임베드 가이드 전체 보기 →

← 전체 계산기 목록