🚦 상태 색 대비 점검 | 성공·경고·오류 보일까?

라이트 모드 배경 색 (HEX)

다크 모드 배경 색 (HEX)

아래 초기값은 동작 확인용 예시이며 권장 색이 아닙니다. 쓰고 있는 색으로 바꿔 넣으세요. 안 쓰는 칸은 비워 두면 집계에서 빠집니다.

성공 상태 색 (라이트)

성공 상태 색 (다크)

경고 상태 색 (라이트)

경고 상태 색 (다크)

오류 상태 색 (라이트)

오류 상태 색 (다크)

상태	라이트 색	라이트 배경 대비	3:1	다크 색	다크 배경 대비	3:1

여기서의 3:1 은 모두 "상태 색 대 배경" 명암비입니다. 상태 색끼리 비교한 값이 아닙니다. 어떤 색을 어느 상태에 쓸지는 관행이고 공인 기준이 없어 이 도구는 색을 지정하지 않습니다.

상태 색은 두 배경에서 각각 재야 한다

성공·경고·오류 색을 정할 때 라이트 모드에서만 확인하고 넘어가면, 다크 모드에서 같은 색이 배경에 묻히는 일이 자주 생깁니다. 특히 어두운 배경에서는 짙은 초록이나 짙은 빨강이 거의 보이지 않습니다. 이 도구는 상태마다 라이트·다크 색을 따로 받아 각 배경과의 명암비를 함께 계산합니다.

계산 방식

명암비는 W3C WCAG 의 상대휘도 식(임계값 0.04045)으로 구하고, 3:1 합불은 비텍스트 요소 기준입니다. 여기서의 3:1 은 모두 상태 색과 배경 사이의 값이며 상태 색끼리 비교한 값이 아닙니다. 어떤 색이 어떤 상태를 뜻하는지는 관행이라 이 도구는 색을 지정하지 않고, 입력칸의 초기값도 권장 색이 아닌 예시입니다. 2026년 10월 기준입니다.

한계

색 팔레트를 만들어 주거나 다크 모드용 색을 자동 변환하지 않습니다. 텍스트용 4.5:1 판정과 색각 이상 시뮬레이션도 지원하지 않습니다. 색만으로 상태를 전달하지 말고 아이콘·문구를 함께 쓰라는 WCAG 1.4.1 의 취지는 계산으로 확인할 수 없으니 직접 점검하세요.

자주 묻는 질문

성공은 초록, 오류는 빨강이 맞나요?

널리 쓰이는 관행이지만 공인 기준은 아닙니다. 문화권과 제품 성격에 따라 다르고 색각 이상이 있으면 초록과 빨강이 비슷하게 보입니다. 그래서 이 도구는 색을 지정하지 않고, 쓰고 있는 색의 배경 대비만 점검합니다.

다크 모드에 라이트 색을 그대로 쓰면 안 되나요?

어두운 배경에서는 같은 색의 명암비가 크게 떨어지는 경우가 많습니다. 결과 표에서 두 배경에 대한 값을 각각 확인하고, 둘 다 기준을 넘지 못하면 모드별로 다른 색을 두세요.

텍스트 색이면 4.5:1 이 아닌가요?

맞습니다. 3:1 은 아이콘·테두리·배지 같은 비텍스트 요소 기준입니다. 상태 색을 본문 글자색으로 쓸 경우에는 더 높은 기준을 따로 확인하세요.

🚦UI 시맨틱 상태 색상(성공·경고·오류) 가이드

관련된 도구

다크모드 배경색 적정 밝기 계산기

WCAG 명암비(Contrast Ratio) 판정기

상태 색은 두 배경에서 각각 재야 한다

계산 방식

한계

자주 묻는 질문

관련된 도구

다크모드 배경색 적정 밝기 계산기

WCAG 명암비(Contrast Ratio) 판정기

상태 색은 두 배경에서 각각 재야 한다

계산 방식

한계

자주 묻는 질문

같은 카테고리 도구