그냥 개발

색 변환 · 명암비

색 표기를 서로 바꾸고, 글자색과 배경색의 명암비를 냅니다. 변환만으로는 반쪽입니다 — 실제로 자주 막히는 것은 「이 배경에 이 글자를 얹어도 되나」이고, 접근성 심사에서 가장 흔히 걸리는 항목도 그것입니다.

#ffffff
rgb(255 255 255)
hsl(0 0% 100%)
#1b41d8
rgb(27 65 216)
hsl(228 78% 48%)

본문 글씨는 이렇게 보입니다

큰 글씨는 이렇게

7.52 : 1

  • 통과 · AA 본문 (4.5:1)
  • 통과 · AA 큰 글씨 (3:1)
  • 통과 · AAA 본문 (7:1)

WCAG 기준입니다. 큰 글씨는 굵은 18.66px 또는 24px 이상을 말합니다. 접근성 심사에서 가장 흔히 걸리는 항목이라, 회색 글자를 쓸 때는 한 번 넣어 보는 편이 좋습니다 — 흔히 쓰는 #777은 흰 배경에서 4.48:1이라 아슬하게 미달입니다.

자주 묻는 질문

명암비 기준이 어떻게 되나요?

WCAG 기준으로 본문 글씨는 4.5:1, 큰 글씨(굵은 18.66px 또는 24px 이상)는 3:1을 넘어야 AA입니다. 더 엄격한 AAA는 본문 7:1입니다. 흔히 쓰는 회색 #777은 흰 배경에서 4.48:1이라 아슬하게 미달입니다.

붙여넣은 코드가 서버로 가나요?

가지 않습니다. 브라우저 안에서만 처리하고 어디에도 보내거나 저장하지 않습니다. 사내 설정 파일이나 운영 쿼리처럼 밖으로 내보내기 곤란한 것도 그래서 쓸 수 있습니다. 인터넷을 끊고도 동작합니다.