명암비
- AA 일반 텍스트 4.5:1
- AA 큰 텍스트 3:1
- AAA 일반 텍스트 7:1
- AAA 큰 텍스트 4.5:1
- UI 구성요소 및 그래픽 3:1
통과하는 가장 가까운 색
저장한 색
색상 대비 검사기
디자인을 공개하기 전에 텍스트가 배경 위에서 잘 읽히는지 확인하세요. 텍스트 색과 배경색을 고르거나 입력하면 검사기가 WCAG 2.x 명암비와 함께 일반 텍스트, 큰 텍스트, UI 구성요소에 대한 AA 및 AAA 통과 여부를 보여 줍니다. 실시간 미리보기, 색각 이상 시뮬레이션, 수정 제안이 잘 맞는 조합을 찾도록 돕습니다. 텍스트 색과 배경색을 HEX, RGB 또는 HSL로 고르세요. WCAG 명암비, AA 및 AAA 결과와 미리보기가 입력하는 대로 바뀌고, 기준을 통과하는 가장 가까운 색이 제안됩니다. 모든 내용은 이 브라우저에 저장됩니다.
작동 원리
- 텍스트 색과 배경색을 고르거나 HEX, RGB, HSL로 입력하세요. 텍스트가 반투명하면 텍스트 불투명도를 설정하세요.
- 명암비와 일반 텍스트, 큰 텍스트, UI 구성요소의 AA 및 AAA 배지를 확인하고 실시간 미리보기를 보세요.
- 조합이 실패하면 제안된 색을 적용하고, 좋은 조합은 팔레트에 저장한 뒤 CSS를 프로젝트에 복사하세요.
점수만이 아니라 해결책까지
조합이 실패하면 검사기가 같은 색조와 채도에서 AA와 AAA에 도달하는 가장 가까운 텍스트 색과 배경색을 찾아 주며, 클릭 한 번으로 적용됩니다. 반투명 텍스트는 브라우저가 그리는 방식 그대로 먼저 배경과 합성됩니다.
안전하고 옮기기 쉽게
색과 팔레트는 이 브라우저에만 저장됩니다. 모두 JSON으로 저장해 백업하거나 다른 기기로 옮길 수 있고, 결과를 PDF나 이미지로 저장할 수도 있습니다. 실행 취소와 다시 실행은 모든 변경에 적용됩니다.
자주 묻는 질문
색상 대비 검사기는 무료인가요?
네. 무료이며 계정이 필요 없고 모든 최신 브라우저에서 작동합니다.
어느 정도의 명암비가 필요한가요?
WCAG AA 수준은 일반 텍스트에 최소 4.5:1, 큰 텍스트와 입력란 테두리나 아이콘 같은 UI 구성요소에 3:1을 요구합니다. AAA 수준은 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다.
4.48은 반올림하면 4.5인데 왜 실패하나요?
WCAG 기준값은 정확합니다. 4.48:1은 4.5:1보다 낮으므로 일반 텍스트의 AA를 통과하지 못합니다. 검사기는 반올림하지 않은 값으로 비교하므로 배지는 항상 엄격합니다.
관련 도구
색상 대비 검사기 이야기
WCAG 대비 값의 유래: 4.5:1과 7:1, sRGB에서 구하는 상대 휘도, WCAG 2.1의 UI 구성 요소 3:1 규칙, 색각 이상, 그리고 WCAG 3를 위한 APCA.
색상 팔레트 생성기
브라우저에서 색상 팔레트를 구축하고 잠그고 섞으세요. HEX, CSS 변수 또는 JSON을 복사하고, PNG 또는 SVG를 내보내고, 사진에서 색상을 추출합니다.
컬러 휠
대화형 휠에서 색상을 선택하고, 보색, 유사, 삼중 및 기타 팔레트를 생성하고 HEX, RGB, HSL, HSV 또는 CMYK를 복사합니다.
그라디언트 편집기
브라우저에서 선형 및 방사형 CSS 그래디언트를 구축하세요. 색상 정지점을 드래그하고, 각도를 설정하고, CSS, HEX, RGB, HSL, HSV 또는 CMYK를 복사하세요.
색상에 대한 추가 정보
화면과 인쇄에서 색상이 작동하는 방식: RGB, CMYK, HSL, 16진수, 색상환, 그라디언트, 대비 및 PictorX 도구.
시도해 볼 준비가 되셨나요?
브라우저에서 PictorX를 엽니다. 설치가 필요 없고 시작하는 데 신용 카드가 필요하지 않습니다.
편집자로 이동