무드칩모든 프로젝트

대청에 앉으면 서까래가 줄을 긋는 오후

한옥 마루 그늘

내 화면에 적용해 보기

색을 바꾸면 같은 색 조합이 본문과 버튼에서 어떻게 읽히는지 확인할 수 있어요.

무드칩 · 작업 카드 예시

한옥 마루 그늘

짧은 본문을 읽어 보세요. 색이 예쁜 것과 작은 글자가 잘 읽히는 것은 따로 확인해야 합니다.

주요 버튼 예시

본문 대비 15.50:1 · 일반 본문 AA 기준 충족

기준은 일반 글자 4.5:1입니다. 버튼 글자는 흰색과 짙은색 중 대비가 높은 쪽을 사용합니다. 수치만으로 전체 페이지 접근성을 보장하지는 않습니다.

이 배경에서 읽히는 본문색

같은 색 조합과 흰색·짙은색 중 일반 본문 대비 4.5:1을 충족하는 대안입니다. 눌러 적용한 뒤 CSS를 복사하세요.

현재 조합의 CSS
.preview {
  background: #F7F1E8;
  color: #1a1a1a;
}
.preview button {
  background: #6B7F6A;
  color: #ffffff;
}

글자를 올렸을 때

각 색을 배경으로 쓸 때 어떤 글자색이 더 잘 읽히는지, 그 대비가 본문에 쓸 만한 수준인지 계산했습니다. 숫자는 WCAG 2.2 명도 대비 비율이고, 일반 본문은 4.5:1, 18pt 이상 또는 14pt 이상 굵은 글자는 3:1이 기준선입니다.

배경색권장 글자색대비판정
#5C4033흰 글자9.39:1AAA
#A67C52먹 글자4.66:1AA
#E6D3B3먹 글자11.88:1AAA
#F7F1E8먹 글자15.50:1AAA
#6B7F6A흰 글자4.31:1AA Large

다른 칩

목록으로·팔레트 쓰는 법

이 색 조합, 함께 쓰고 싶은 사람에게

이어서 하나 더