🌙 다크모드 배경색 밝기 계산기

텍스트 색상

#FFFFFF

목표 대비 비율

다크모드 배경, 무작정 어둡게 하면 안 되는 이유

다크모드 UI를 설계할 때 배경을 무조건 순수 검정으로 설정하면 텍스트와의 대비가 지나치게 강해져 눈의 피로를 유발할 수 있습니다. 반대로 배경이 너무 밝으면 텍스트 가독성 기준(WCAG)을 충족하지 못합니다. 이 도구는 사용할 텍스트 색상과 목표 대비 비율을 기준으로, 다크모드 배경으로 쓸 수 있는 최대 밝기 값을 계산해줍니다.

계산 원리 — WCAG 상대 휘도 공식

웹 접근성 표준(WCAG 2.1)은 sRGB 색상을 선형화한 뒤 가중합(R×0.2126 + G×0.7152 + B×0.0722)으로 상대 휘도를 계산하고, 두 휘도값에 0.05를 더해 비율을 구하는 공식을 사용합니다. 이 계산기는 이 공식을 역으로 풀어, 목표 대비 비율을 만족하는 배경의 최대 휘도와 그에 해당하는 그레이 HEX 코드를 도출합니다.

활용 팁

계산된 HEX 값은 순수한 회색(R=G=B)이므로, 실제 디자인에서는 이 밝기 값을 기준으로 브랜드 색조를 살짝 섞은 배경색을 만들어도 무방합니다. 단, 최종 배경색의 밝기가 계산값보다 어둡거나 같아야 목표 대비를 유지할 수 있습니다.

자주 묻는 질문

Q. WCAG 대비 비율이 무엇인가요?

A. 웹 접근성 국제 표준(WCAG)에서 정한 텍스트와 배경 간 명도 대비 기준입니다. 일반 텍스트는 4.5:1, 큰 텍스트는 3:1, 강화 기준(AAA)은 7:1 이상을 권장합니다.

Q. 계산된 배경색보다 더 밝게 써도 되나요?

A. 계산된 값은 최대 밝기(가장 밝은 허용값) 기준이므로, 이보다 더 밝은 배경을 쓰면 대비가 기준보다 낮아져 가독성이 떨어질 수 있습니다. 계산값과 같거나 더 어두운 배경을 사용하세요.

Q. 순수 검정(#000000)을 다크모드 배경으로 쓰면 안 되나요?

A. 순수 검정은 대비는 충분하지만 눈의 피로도를 높이고 명암 대비가 과할 수 있어, 실무에서는 짙은 회색(#121212 등)을 더 권장합니다.

다크모드 배경, 무작정 어둡게 하면 안 되는 이유

계산 원리 — WCAG 상대 휘도 공식

활용 팁

자주 묻는 질문

같은 카테고리 도구