프론트엔드 / 스타일 도구

Color Converter / Contrast Checker

전경색과 배경색을 입력하면 HEX/RGB/HSL 값과 WCAG 대비 비율, 텍스트 가독성 판단을 함께 보여줍니다.

색상 값과 대비 비율을 함께 확인합니다

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 일반 텍스트 통과

사용 팁

짧게 보고 바로 실행할 수 있게 구성했습니다

이 도구는 별도 결과 URL을 만들지 않고, 입력과 결과를 같은 페이지 안에서 처리합니다. 기본적인 복사·다운로드와 초기화 흐름도 함께 제공합니다.

AA, AAA 기준도 표시되나요?

네. 일반 텍스트 기준으로 AA와 AAA 통과 여부를 함께 표시합니다.

HSL 값도 함께 볼 수 있나요?

네. HEX, RGB, HSL을 동시에 보여주고 각각 복사할 수 있습니다.