색 대비 비율 계산기 (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 이상이 본문 기준.

외부 사이트에 임베드 (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"로 페이지 속도 영향 최소

태그로 묶인 다른 콘텐츠

계산기·도표·가이드·부업 모두 포함 — 태그 공유도 높은 순

#개발 전체 →

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

아래 코드를 블로그·뉴스·기업 사이트의 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>

임베드 가이드 전체 보기 →

← 전체 계산기 목록

입력

결과

관련 계산기

태그로 묶인 다른 콘텐츠