바로 실행
Color Converter / Contrast Checker 실행
HEX, RGB, HSL과 대비 비율을 한 번에 확인해요.
색상 값과 대비 비율을 함께 확인해요
HEX 색상을 넣으면 RGB/HSL 값과 함께 WCAG 대비 비율, 본문 가독성 기준을 함께 보여줘요.
utily contrast preview
전경색
HEX #171614 RGB 23, 22, 20 HSL 40, 7, 8
배경색 및 대비
HEX #f8f4ec RGB 248, 244, 236 대비 비율 16.48 : 1 AA 일반 텍스트 통과 AAA 일반 텍스트 통과
결과
실행 뒤 결과를 확인해요
위 입력 패널에서 실행하면 결과 영역에서 복사, 초기화, 다시 실행으로 이어져요.
입력 후 결과
실제 결과는 위 도구 입력값을 처리한 뒤 확인해요.
도구
Color Converter / Contrast Checker
예상 결과
HEX, RGB, HSL과 대비 비율을 한 번에 확인해요.
활용
디자인 접근성 점검, 디자인 토큰 변환
프론트엔드 유틸리티
3개 사용 상황
실행 뒤 복사·다운로드
Pro
반복해서 쓰는 도구는 저장해요
저장 항목, 최근 기록, 반복 실행이 많아질 때 Pro 필요 지점을 확인해요.
저장반복 실행최근 기록
사용 팁
짧게 보고 바로 실행할 수 있게 구성했어요
이 도구는 별도 결과 URL을 만들지 않고, 입력과 결과를 같은 페이지 안에서 처리해요. 기본적인 복사·다운로드와 초기화 흐름도 함께 제공해요.
AA, AAA 기준도 표시되나요?
네. 일반 텍스트 기준으로 AA와 AAA 통과 여부를 함께 표시해요.
HSL 값도 함께 볼 수 있나요?
네. HEX, RGB, HSL을 동시에 보여주고 각각 복사할 수 있어요.