#2563EB
⌘ 브라우저 실행
◉ 데이터 비저장
₩ 무료
기준 색상색상 코드 조정
현재 색상
#2563EB
변환 결과바로 쓰는 색상 코드
rgb(37, 99, 235)hsl(221, 83%, 53%)--color-primary: #2563EB;접근성 검사텍스트 명암비
전경색
#2563EB
툴하루 색상 미리보기
본문과 버튼 글자가 충분히 잘 보이는지 확인하세요.
명암비5.17:1
Ctrl + Enter를 누르면 기본 작업을 실행합니다.
COLOR CONVERTER & CONTRAST
같은 색을 여러 코드로 바꾸고 읽기 쉬운 조합인지 확인합니다.
색상 선택기나 HEX·RGB·HSL 채널로 색을 조정하면 모든 코드가 실시간으로 동기화됩니다. 텍스트와 배경색의 상대 휘도를 계산해 일반 글자와 큰 글자 각각의 WCAG AA·AAA 기준을 확인하고 필요한 코드를 바로 복사할 수 있습니다.
01
사용 방법
입력부터 결과 활용까지 네 단계로 진행합니다.
- 1색상 입력
색상 선택기나 HEX 코드로 기준 색을 정합니다.
- 2코드 조정
RGB 또는 HSL 채널을 바꾸며 원하는 색을 찾습니다.
- 3명암비 확인
배경색을 정하고 AA·AAA 통과 여부를 확인합니다.
- 4코드 복사
HEX·RGB·HSL 또는 CSS 변수 형식으로 가져갑니다.
색상과 접근성
색상 표현 방식은 달라도 화면에 표시되는 빛은 같습니다.
HEX와 RGB는 빨강·초록·파랑 채널을, HSL은 색상·채도·명도를 기준으로 같은 색을 표현합니다. 명암비는 두 색의 상대 휘도를 1:1부터 21:1 사이의 값으로 비교하며 값이 높을수록 글자를 구분하기 쉽습니다.
✓
일반 글자 AA본문처럼 일반 크기 글자는 최소 4.5:1을 권장합니다.
✓
큰 글자 AA큰 글자나 굵은 큰 글자는 최소 3:1을 권장합니다.
✓
색만 의존하지 않기상태와 의미는 색 외에도 문구·아이콘·선으로 함께 전달하세요.
디자인 적용 예제
색상 코드 변환과 본문 명암비를 함께 확인하기
같은 색상을 HEX·RGB·HSL로 표시하는 작업과, 두 색 사이에서 글자가 읽히는지 확인하는 작업은 다릅니다. 먼저 전경색의 코드를 맞춘 뒤 실제 배경색을 넣어 명암비를 비교하세요. 아래 예제의 배경색은 모두 흰색입니다.
같은 파란색을 CSS에 옮기는 세 가지 표기
HEX: #2563EB
RGB: rgb(37, 99, 235)
HSL: hsl(221, 83%, 53%)HEX의 25, 63, EB를 10진수로 바꾸면 R=37, G=99, B=235입니다. HSL은 계산 결과를 정수로 반올림해서 표시하므로 이 HSL을 다시 RGB로 옮기면 채널 값이 조금 달라질 수 있습니다. 정확히 같은 8비트 색상을 전달하려면 HEX 또는 RGB 결과를 사용하세요.
회색 한 단계가 일반 본문 판정을 바꿉니다
| 전경색 | 명암비 | 일반 글자 AA | 큰 글자 AA |
|---|---|---|---|
#777777 | 4.48:1 | 미달 | 통과 |
#767676 | 4.54:1 | 통과 | 통과 |
#000000 | 21.00:1 | 통과 | 통과 |
명암비는 sRGB의 상대 휘도를 계산한 뒤 (밝은 휘도 + 0.05) ÷ (어두운 휘도 + 0.05)로 구합니다. 전경·배경을 바꾸어도 비율은 같습니다. 다만 실제 글자 크기와 굵기, 화면에서의 인상까지 같아지는 것은 아닙니다.
판정 기준과 적용 범위
AA 통과는 이 색상 조합에 대한 판정입니다
| 글자 종류 | AA 최소 비율 | AAA 최소 비율 |
|---|---|---|
| 일반 글자 | 4.5:1 | 7:1 |
| 큰 글자 | 3:1 | 4.5:1 |
큰 글자는 WCAG 정의의 18pt 이상 또는 굵은 14pt 이상과 이에 준하는 크기를 기준으로 합니다. 제목처럼 보인다는 이유만으로 큰 글자 기준을 적용하지 말고 실제 크기와 굵기를 확인하세요. 작은 설명 문구에는 일반 글자 기준이 필요합니다.
- 소수점 표시와 판정은 구분합니다. 화면 비율은 소수 둘째 자리까지 반올림하지만 통과 여부는 반올림 전 값으로 계산합니다. 경계값에 가까운 조합은 표시가 4.50이어도 실제 값이 4.5보다 작으면 미달일 수 있습니다.
- 투명도와 배경 이미지는 직접 계산하지 않습니다. 이 도구는 3자리·6자리 HEX와 불투명 sRGB 색상을 받습니다. 8자리 HEX, RGBA 알파, 그라데이션, 이미지, Display P3 색상은 지원 범위 밖입니다. 실제 합성된 전경과 배경을 확인해야 합니다.
- 페이지 전체의 접근성 인증은 아닙니다. 키보드 사용, 대체 텍스트, 포커스 표시, 색상만으로 전달하는 정보는 이 검사에 포함되지 않습니다. 버튼의 아이콘·경계선에도 텍스트 기준을 그대로 적용하지 마세요.
- 입력 형식을 확인하세요. HEX의 16진수 범위는 0~9와 A~F입니다. RGB는 채널별 0~255, HSL은 색상 0~360도와 채도·명도 0~100% 범위로 조정됩니다. 입력이 범위를 벗어나면 표시된 보정 값을 확인하세요.
적용 후에는 실제 페이지의 본문·버튼·비활성 상태와 밝은 테마·어두운 테마를 각각 확인하세요. 이미지 배경을 쓰는 경우 이미지 압축 이후의 실제 결과에서도 글자가 읽히는지 확인하는 것이 좋습니다.
기준 근거: W3C WCAG 2.2 텍스트 명암비 해설.
예제를 실행하면 작업 영역의 입력과 설정이 바뀝니다. 내용·동작 확인: · 툴하루
02
대표적인 사용 사례
실제 작업에서는 이렇게 활용할 수 있습니다.
웹·앱 색상 토큰
디자인 색을 CSS에서 사용할 HEX·RGB·HSL 코드로 변환합니다.
텍스트 접근성 확인
버튼과 본문 글자가 배경에서 충분히 구분되는지 검사합니다.
테마 조합 비교
전경과 배경을 바꾸고 밝은·어두운 테마의 명암비를 비교합니다.
03
자주 묻는 질문
사용 전 알아두면 좋은 기준을 정리했습니다.
HEX와 RGB 값이 다르게 보이는 이유는 무엇인가요?
표기 방식만 다를 뿐 동일한 빨강·초록·파랑 채널을 나타냅니다. 예를 들어 #2563EB와 rgb(37, 99, 235)는 같은 색입니다.
AA를 통과하면 모든 사용자에게 읽기 쉬운가요?
AA는 중요한 최소 기준이지만 글꼴, 굵기, 크기, 주변 밝기와 사용자 환경도 가독성에 영향을 줍니다. 실제 화면에서도 함께 확인하세요.
큰 글자의 기준은 무엇인가요?
WCAG에서는 일반적으로 18pt 이상 또는 굵은 14pt 이상의 텍스트를 큰 글자로 분류합니다. CSS 픽셀과 정확히 일치하지 않을 수 있어 글꼴 설정도 함께 검토해야 합니다.
입력한 색상 정보가 서버로 전송되나요?
아니요. 색상 변환과 명암비 계산은 현재 브라우저에서 실행되며 선택한 색과 결과를 툴하루 서버로 전송하거나 저장하지 않습니다.
접근성 있는 인터페이스 색을 정하는 흐름
1색상 선택브랜드·상태 색 입력
→
2대비 검증AA·AAA 기준 확인
→
3코드 적용CSS 변수로 복사