무드칩모든 프로젝트

줄전구, 기름 냄새, 사람 어깨

야시장 전구

내 화면에 적용해 보기

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

무드칩 · 작업 카드 예시

야시장 전구

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

주요 버튼 예시

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

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

이 배경에서 읽히는 본문색

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

현재 조합의 CSS
.preview {
  background: #8ECAE6;
  color: #1a1a1a;
}
.preview button {
  background: #FFF8E7;
  color: #1a1a1a;
}

글자를 올렸을 때

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

배경색권장 글자색대비판정
#2B1D14흰 글자16.30:1AAA
#FFB703먹 글자9.97:1AAA
#FB8500먹 글자7.01:1AAA
#8ECAE6먹 글자9.73:1AAA
#FFF8E7먹 글자16.44:1AAA

다른 칩

목록으로·팔레트 쓰는 법

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

이어서 하나 더