색상

HEX·RGB·HSL 색상 값을 서로 변환하고, 흰 배경·검은 배경에서의 명암 대비(WCAG AA 기준 통과 여부)와 추천 글자색을 보여 줍니다.

사용 방법

1. HEX·RGB·HSL 중 하나를 입력하거나 색상 선택기로 고릅니다.
2. 나머지 형식으로 변환된 값을 확인하고 복사합니다.
3. 대비 결과를 보고 글자색으로 써도 되는지 판단합니다.

실무에서 알아 두면 좋은 점

• 본문 글자는 배경과의 대비가 4.5:1 이상이어야 AA 기준을 통과합니다.
• HSL은 명도(L)만 바꿔 같은 계열의 밝은색·어두운색을 만들기 좋습니다.
• 디자인 토큰을 정할 때 CSS 변수로 한 곳에 모아 두면 관리가 편합니다.

자주 묻는 질문

입력한 내용이 저장되나요?

아니요. 입력한 텍스트는 브라우저 안에서만 처리되며 서버로 전송되지 않습니다. 페이지를 닫으면 사라지니 결과는 복사해 두세요.

AA 기준이 무엇인가요?

웹 접근성 지침(WCAG)의 최소 권장 수준으로, 시력이 약한 사용자도 글자를 읽을 수 있도록 배경과 글자 사이에 필요한 대비를 정한 기준입니다.

관련 글

• 타이포·색·CSS 변수로 디자인 토큰 잡기
• 폼·포커스·접근성 기본

실무에서 이 도구를 어떻게 쓰고 계신가요? 업무에 맞춘 설정값, 다른 도구와 함께 쓰는 순서, 겪었던 문제와 해결 방법처럼 나만의 노하우가 있다면 아래 댓글로 공유해 주세요. 필요한 기능 요청도 환영합니다. 남겨 주신 내용은 도구 개선과 안내 보완에 반영합니다. 댓글 남기기 ↓