01
구체적인 사용 상황
본문, 버튼, 라벨의 전경색과 배경색 조합을 배포 전에 점검할 때 사용합니다. 두 HEX 색을 지정하면 대비비와 일반 텍스트·큰 글자 기준 통과 여부를 함께 보여줍니다.
색상 대비 검사기
전경색과 배경색을 입력해 일반 텍스트와 큰 글자 기준 통과 여부를 확인합니다.
색상 대비 검사기
브라우저에서 즉시 계산하는 참고용 결과입니다.
작업 전에 확인할 점
02
계산·처리 방식
sRGB 채널을 선형화해 상대휘도를 구하고 (밝은 휘도+0.05)÷(어두운 휘도+0.05)로 대비비를 계산합니다. 결과는 WCAG 텍스트 대비 임계값 3:1, 4.5:1, 7:1과 비교합니다.
03
입력 예시와 결과 활용
전경 #111111과 배경 #FFFFFF를 넣으면 높은 대비비가 나옵니다. 작은 본문은 AA normal이 통과하는지 먼저 보고, 큰 제목 전용 조합이라면 AA large 결과도 함께 해석하세요.
04
적용 범위와 주의사항
대비비 통과만으로 접근성이 완성되지는 않습니다. 글자 굵기, 실제 크기, 상태 변화, 이미지 위 배경, 색만으로 정보를 구분하는지까지 실제 화면에서 확인해야 합니다.
자주 묻는 질문
색상 대비 검사기의 색상 코드를 어떻게 옮기나요?
결과 아래 복사 버튼으로 CSS, HEX 또는 HSL 텍스트를 복사할 수 있습니다. 붙여 넣은 뒤 대상 디자인 도구가 같은 색 형식을 해석하는지 확인하세요.
색상 대비 검사기의 화면 색이 인쇄물과 같은가요?
같다고 볼 수 없습니다. 화면의 RGB 발광색과 종이·잉크의 반사색은 색역과 혼합 방식이 다르므로 인쇄 프로필과 교정쇄가 필요합니다.
색상 대비 검사기 결과를 디자인 토큰으로 바로 확정해도 되나요?
후보로는 쓸 수 있지만 실제 배경, 다크 모드, 상태 변화, 텍스트 대비를 확인한 뒤 이름과 용도를 정해 토큰으로 승인하세요.