⚡전체 도구 💻개발자 및 코딩 📝텍스트 및 콘텐츠 🎨디자인 및 색상 🖼️이미지 및 멀티미디어 🔢데이터 및 계산 🔒보안 및 비밀번호 📄PDF 도구 📐단위 변환

컬러 대비 분석 및 색맹 시뮬레이터

텍스트와 배경의 색상 대비율을 WCAG 2.1 기준으로 계산하고 접근성에 맞게 색상을 자동 보정하며, 이미지 색상 추출과 4가지 색맹 필터링 시뮬레이션을 지원합니다。

⚖️ 색상 명도 대비 분석 (WCAG 2.1)

텍스트 색상

배경 색상

명도 대비율

12.3:1

WCAG 2.1 AA

PASS

WCAG 2.1 AAA

PASS

컴포넌트 실시간 미리보기

이것은 가독성을 테스트하기 위한 샘플 텍스트입니다. 올바른 색상 대비는 모든 사용자가 웹 콘텐츠를 쉽게 읽을 수 있도록 돕습니다.

✨ 스마트 명도 대비 수정

클릭 한번으로 텍스트 명도를 자동 조절하여 AA (4.5:1) 등급 기준에 합격시킵니다

👁️ 이미지 색맹 시뮬레이터

📤 여기에 이미지를 드래그 앤 드롭하거나 클릭하여 업로드 PNG, JPG, WebP 지원. 브라우저에서 로컬로 안전하게 처리됩니다.

시뮬레이션 유형

📚 웹 콘텐츠 색상 접근성 가이드 (WCAG 2.1)

AA 등급: 일반 텍스트는 4.5:1 이상, 큰 텍스트(18pt 이상)는 3:1 이상이어야 합니다.
AAA 등급: 일반 텍스트는 7.0:1 이상, 큰 텍스트는 4.5:1 이상이어야 합니다.
상대 휘도(Luminance)는 색의 시각적 밝기로, 0(가장 어두운 검정)부터 1(가장 밝은 흰색)까지입니다.

사용 방법

1 컬러 대비 분석 및 색맹 시뮬레이터를 열고 처리할 내용을 입력·붙여넣기·선택하세요.
2 필요에 맞게 옵션과 출력 형식을 조정하세요.
3 결과를 확인한 뒤 복사하거나 다운로드하세요.

주요 사용 사례

텍스트와 배경의 색상 대비율을 WCAG 2.1 기준으로 계산하고 접근성에 맞게 색상을 자동 보정하며, 이미지 색상 추출과 4가지 색맹 필터링 시뮬레이션을 지원합니다。 일상 업무, 개발, 학습, 빠른 확인에 활용할 수 있습니다.

개인정보와 데이터 처리

이 도구는 브라우저에서 작동합니다. 민감한 자료를 처리하기 전에 기기와 브라우저 환경을 확인하세요.

색상 대비 검사기: WCAG AA·AAA 기준과 색각 이상 시뮬레이션

이 색상 대비 검사기는 WCAG 2.1 공식으로 글자색과 배경색의 명암비를 계산합니다. RGB를 상대 휘도로 바꾼 뒤 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 1:1부터 21:1 사이의 값을 구합니다. 흰 바탕의 검은 글자가 최대치인 21:1이고 같은 색끼리는 1:1입니다. 색상 선택기나 HEX 코드로 색을 지정하면 미리보기의 글자와 버튼에 바로 반영됩니다.

WCAG AA 등급은 일반 텍스트에 4.5:1 이상, AAA 등급은 7:1 이상을 요구하며, 큰 텍스트(18pt 이상 또는 14pt 굵게)는 각각 3:1과 4.5:1로 완화됩니다. 화면의 AA/AAA 배지는 일반 텍스트 기준으로 판정합니다. 명암비는 반올림할 수 없습니다. 흰 바탕의 #777777은 4.47:1로 거의 근접해 보여도 불합격이고, #767676은 4.54:1로 AA를 통과합니다. #595959는 약 7.00:1로 AAA를 충족합니다.

기준에 못 미치면 "스마트 보정"을 눌러 보세요. 색조 방향은 유지한 채 어두운 배경에서는 글자색을 밝게, 밝은 배경에서는 어둡게 조금씩 바꿔 AA 기준인 4.5:1에 도달하게 합니다. 끝내 도달하지 못하면 검정이나 흰색으로 바꿉니다. 쓸 수 있는 색을 빠르게 찾는 방법이지만 브랜드 색상은 디자이너가 최종 조정하는 것이 좋습니다.

오른쪽 색각 이상 시뮬레이터는 이미지를 업로드하거나 예시 이미지를 사용해 적색맹(Protanopia), 녹색맹(Deuteranopia), 청색맹(Tritanopia), 전색맹(Achromatopsia)의 보이는 모습을 색상 행렬로 재현합니다. 차트나 지도, 상태 색상이 색만으로 구분되는지 점검할 때 유용합니다. 이미지는 800×600 이내로 줄여 브라우저 Canvas에서 처리하며 업로드하지 않습니다. 시뮬레이션은 근사치이며 실제 색각은 사람마다 다릅니다.