CSS & 색상

색상 대비 검사기

전경색과 배경색의 대비를 WCAG 2.1 AA 및 AAA 기준으로 검사합니다.

Your data stays on your deviceNo upload, no serverWorks offline

Contrast ratio

17.35:1

Normal text AA

Pass

Normal text AAA

Pass

Large text AA

Pass

Large text AAA

Pass

UI components AA

Pass

이 도구를 사용하는 이유

03

두 가지 색상을 입력하면 WCAG 2.1 대비율과 일반 텍스트, 큰 텍스트, 비텍스트 UI 구성 요소에 대한 합격/불합격 결과를 즉시 표시합니다.

색상 대비 검사기는 전경색과 배경색 간의 정확한 휘도 기반 대비율을 계산합니다.

일반 텍스트(4.5:1, 7:1), 큰 텍스트(3:1, 4.5:1), 비텍스트 UI(3:1)에 대한 WCAG 2.1 AA 및 AAA 기준 준수 여부를 표시합니다.

사용 방법

03
01색상 선택기를 사용하거나 hex/rgb 값을 붙여 넣어 전경색과 배경색을 선택합니다.
02대비율과 AA/AAA 표시기를 확인합니다. 모든 기준이 나란히 표시됩니다.
03'색상 교환' 버튼을 눌러 빠르게 반전하여 재확인합니다.

복사 전 빠른 확인

03

Confirm the input is the format you intended.

Scan the result before using it in a document, URL, config, or message.

Copy only the output you need.

자주 묻는 질문

03
AA와 AAA의 차이점은 무엇입니까?

AA는 대부분의 접근성 규정에서 요구하는 기준 수준이고, AAA는 더 엄격한 강화 수준입니다. 일반 텍스트의 경우 AA는 4.5:1, AAA는 7:1이며, 큰 텍스트는 AA 3:1, AAA 4.5:1입니다.

큰 텍스트는 어떻게 정의됩니까?

WCAG는 큰 텍스트를 최소 18pt(24px) 보통 굵기 또는 14pt(18.66px) 굵은 글씨로 정의합니다.

대비율은 어떻게 계산됩니까?

WCAG 2.1 공식에 따라 각 색상을 sRGB 상대 휘도로 변환한 후 (L1 + 0.05) / (L2 + 0.05)를 계산합니다(L1은 더 밝은 색). 대비율 범위는 1:1에서 21:1입니다.

관련 도구

01

색상 변환기

Hex, RGB, HSL, OKLCH 간에 색상을 변환하며 실시간 스워치와 색상 슬라이더를 제공합니다.