색상 대비 검사기
WCAG 2.1 준수를 위한 색상 대비 비율 확인. 텍스트 및 UI 요소의 AA 및 AAA 표준을 즉시 검증합니다.
WCAG 대비 비율이란?
WCAG 대비 비율은 전경색과 배경색 간의 휘도 차이를 측정합니다. 1:1에서 21:1 범위입니다.
WCAG AA와 AAA 요구사항은?
WCAG AA는 일반 텍스트 4.5:1 이상, 큰 텍스트 3:1 이상이 필요합니다. AAA는 7:1과 4.5:1입니다.
큰 텍스트란?
큰 텍스트는 18pt(24px) 이상 또는 14pt(18.66px) 굵은체 이상으로 정의됩니다.
색상 대비가 중요한 이유는?
적절한 대비는 시각 장애가 있는 사람들이 텍스트를 읽을 수 있게 하고 모든 사람의 가독성을 향상시킵니다.
대비 비율은 어떻게 계산하나요?
상대 휘도 값을 사용하여 계산합니다. 공식은 (L1 + 0.05) / (L2 + 0.05)입니다.
UI 요소의 최소 대비는?
WCAG는 UI 구성 요소와 그래픽 개체에 3:1 이상의 대비를 요구합니다.
아무 색상 조합이나 사용해도 되나요?
모든 조합이 접근성 기준을 충족하는 것은 아닙니다. 이 검사기로 확인하세요.
상대 휘도란?
색상의 지각 밝기로, 0(검정)에서 1(흰색) 범위입니다. sRGB 색 공간을 사용하여 계산됩니다.
이미지의 대비도 확인해야 하나요?
이미지 내 텍스트는 일반 텍스트와 동일한 요구사항을 충족해야 합니다. 장식용 이미지에는 적용되지 않습니다.
대비에 도움이 되는 도구는?
브라우저 개발자 도구, 디자인 소프트웨어 플러그인 또는 이 같은 온라인 검사기를 사용하세요.
색상 대비 검사기 사용 방법
텍스트와 UI 색 조합이 WCAG 2.1의 AA, AAA 기준을 충족하는지 브라우저에서 즉시 확인합니다. 두 색만 넣으면 비율이 로컬에서 계산되고 데이터는 기기를 떠나지 않습니다.
- Foreground Color 입력란에 글자 색을 입력하거나 붙여 넣습니다. HEX, RGB 등 지원되는 형식이면 무엇이든 됩니다.
- Background Color 입력란에 글자 뒤에 깔리는 배경색을 넣으면 대비 비율이 계산됩니다.
- 계산된 비율과 보통 크기·큰 크기 텍스트에 대한 AA, AAA 합격 표시를 확인합니다.
- 본문은 4.5:1, 큰 텍스트와 UI 구성 요소는 3:1을 넘도록 색을 미세 조정합니다.
- Foreground Color와 Background Color 값을 서로 바꿔 반대 조합, 예컨대 다크 테마의 밝은 글자도 시험합니다.
긴 글 가독성에는 AAA(7:1)가 이상적이지만, 대부분의 접근성 가이드라인이 요구하는 최소선은 4.5:1(AA)입니다.
관련 도구
- 색상 선택기 스포이트로 화면의 모든 색상을 선택하세요. HEX, RGB, HSL 코드를 즉시 복사. 무료 온라인 색상 선택 도구.
- 색상 팔레트 생성기 무료 온라인 생성기로 아름답고 조화로운 색상 팔레트를 즉시 만드세요. 단색, 유사색, 보색, 삼색, 분할 보색, 사색 모드를 지원합니다. HSL 슬라이더로 색상을 조정하고, 즐겨찾기를 잠그고, CSS, Tailwind, JSON 또는 SVG로 내보내세요. 100% 브라우저 기반, 데이터가 기기를 떠나지 않습니다.
- 색각 이상 시뮬레이터 무료 온라인 색각 이상 시뮬레이터. 프로타노피아, 듀테라노피아, 트리타노피아 등 디자인 테스트. 100% 비공개, 브라우저에서 실행.
- GIF 프레임 분할 GIF 애니메이션에서 개별 프레임을 PNG 또는 스프라이트 시트로 추출 및 다운로드. 미리보기 및 ZIP 내보내기 지원 무료 온라인 도구.
- GIF 역재생 GIF 애니메이션 재생 순서를 무료로 온라인에서 역전. 즉시 업로드, 미리보기 및 다운로드.
- GIF 속도 변경기 GIF 애니메이션 속도를 온라인으로 변경하세요. GIF 파일을 즉시 가속 또는 감속합니다.
- 동영상 GIF 변환 동영상을 애니메이션 GIF로 온라인 변환. 품질, 프레임 속도, 해상도를 브라우저에서 직접 조절, 업로드 불필요.
- 밈 메이커 무료 온라인 밈 메이커. 어떤 이미지에든 클래식한 위/아래 캡션을 추가하고 자유롭게 드래그한 뒤 PNG 또는 JPEG로 바로 다운로드하세요.