이미지
색상 변환 · 대비 검사
색상 코드 변환기로 HEX·RGB·HSL을 서로 바꾸고, 글자색과 배경색의 명도 대비를 WCAG AA·AAA 기준으로 검사합니다. 보색·유사색 조합과 50~900 톤 팔레트를 CSS 변수로 복사할 수 있습니다.
명도 대비 (WCAG 2.1)
-큰 글자 미리보기 24px
본문 글자 미리보기입니다. 봇몽 무료 웹 도구로 색 대비를 확인하세요. 16px
톤 팔레트 (50~900)
색 조합 추천
모든 도구는 내 브라우저 안에서만 동작합니다. 파일이 서버로 전송되지 않아 개인정보 걱정 없이 쓸 수 있습니다. 가입 · 설치 · 사용 횟수 제한 없음.
사용 방법
- 색 선택기로 고르거나 HEX·RGB·HSL 값을 입력합니다. rgb()나 hsl() 코드를 그대로 붙여 넣어도 됩니다.
- 아래 명도 대비 검사에 글자색과 배경색을 넣으면 대비율과 WCAG AA·AAA 통과 여부, 기준을 맞추는 추천 색을 보여줍니다.
- 톤 팔레트와 색 조합 칩을 눌러 HEX 값을 복사하고, "CSS 변수 복사"로 :root 변수를 한 번에 가져갑니다.
자주 묻는 질문
아니요. 모든 색상 계산은 사용 중인 브라우저 안에서만 이루어지며 입력한 값은 어떤 서버에도 전송되거나 저장되지 않습니다.
WCAG 2.1 기준으로 본문 글자는 AA 4.5:1, AAA 7:1 이상이어야 하고, 18pt(약 24px) 이상이거나 14pt 굵은 큰 글자는 AA 3:1, AAA 4.5:1 이상이면 됩니다. 버튼 테두리·아이콘 같은 UI 요소는 3:1 이상을 권장합니다. 검정(#000)과 흰색(#fff)의 대비는 최대값인 21:1입니다.
이 도구는 색 코드 변환과 대비 검사에 집중합니다. 사진이나 로고에서 대표 색을 뽑으려면 같은 사이트의 "색상 팔레트 추출" 도구를 함께 사용해 보세요.
이런 작업을 자동으로 반복해야 하나요?
웹사이트 · 웹앱: 랜딩페이지, 관리자 대시보드, 예약/주문 시스템 등 빠르고 반응형인 웹 서비스 제작.