HEX RGB 색상 변환기·대비비 검사 사용 안내
계산 과정
기본 입력값으로 계산하면 HEX은(는) #3366CC입니다. 항목별 내역은 위 표에서 확인할 수 있습니다.
결과가 실제와 달라지는 경우
- 대비비는 입력색과 #FFFFFF 또는 #000000의 조합만 계산합니다. 실제 배경이 #F5F5F5이거나 반투명 이미지라면 디자인 도구에서 두 최종 합성색을 다시 비교해야 합니다.
- 8자리 HEX의 알파 채널인 #3366CC80과 rgba()의 투명도는 지원하지 않습니다. 50% 투명색은 배경과 합성된 뒤 RGB가 달라지므로 6자리 불투명 결과와 대비비가 같지 않습니다.
- WCAG AA의 3:1 완화 기준은 18pt 이상 일반 글자 또는 14pt 이상 굵은 글자에만 해당합니다. CSS px는 브라우저 기본 16px에서 18pt가 약 24px이므로 작은 본문에는 4.5:1을 적용해야 합니다.
- 모니터 색상 프로필, 야간 모드, 밝기 설정은 눈에 보이는 색을 바꿀 수 있지만 수학적 상대 휘도는 sRGB 코드 기준입니다. 측정 장비의 실제 휘도비와 일치하지 않을 수 있습니다.
- 입력한 HSL을 역으로 읽는 기능은 없습니다. hsl(220,60%,50%)을 붙여 넣으면 오류가 나며 HEX나 RGB로 먼저 바꿔야 합니다.
알아두면 좋은 기준
- HEX #3366CC는 각 두 자리 33, 66, CC를 16진수로 읽어 RGB 51, 102, 204가 됩니다. 3자리 #36C는 각 문자를 반복해 #3366CC로 확장합니다.
- WCAG 텍스트 기준은 일반 크기 AA 4.5:1, 큰 글자 AA 3:1, 일반 크기 AAA 7:1입니다. 4.49:1은 반올림해 4.5처럼 보여도 원 계산값 기준으로는 통과하지 못할 수 있습니다.
- 상대 휘도는 단순 RGB 평균이 아닙니다. 사람 눈이 녹색에 더 민감하므로 선형화한 채널에 빨강 0.2126, 녹색 0.7152, 파랑 0.0722 가중치를 적용합니다.
- 대비비의 이론적 범위는 같은 색끼리 1:1부터 검정과 흰색의 21:1까지입니다. 색조가 달라도 상대 휘도가 비슷하면 대비는 낮습니다.
자주 묻는 질문
#777777은 흰 배경의 본문 색으로 쓸 수 있나요?
흰색과의 대비는 약 4.48:1이라 일반 본문 AA 기준 4.5:1에 아주 조금 못 미칩니다. #767676처럼 한 단계 어둡게 하면 약 4.54:1로 기준을 넘습니다.
결과의 권장 글자색은 무엇을 뜻하나요?
입력색 자체를 배경처럼 두고 흰색과 검은색 중 대비가 큰 쪽을 고르는 참고값입니다. 버튼 배경이 #3366CC라면 흰 글자와 검은 글자의 대비를 비교하는 방식으로 활용할 수 있습니다.
브랜드 색이 AA를 통과하지 못하면 색을 반드시 바꿔야 하나요?
로고나 장식 요소에는 텍스트 기준이 그대로 적용되지 않을 수 있습니다. 다만 버튼 라벨, 링크, 안내 문구처럼 정보를 전달하는 글자는 4.5:1 또는 큰 글자 3:1을 맞추고 브랜드 색은 배경·테두리로 분리하는 방법이 안전합니다.