무드칩모든 프로젝트

해안 도로, 소금 낀 난간, 너무 파란 낮

바다 버스 창

내 화면에 적용해 보기

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

무드칩 · 작업 카드 예시

바다 버스 창

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

주요 버튼 예시

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

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

이 배경에서 읽히는 본문색

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

현재 조합의 CSS
.preview {
  background: #1A252F;
  color: #ffffff;
}
.preview button {
  background: #E74C3C;
  color: #1a1a1a;
}

글자를 올렸을 때

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

배경색권장 글자색대비판정
#1B4F72흰 글자8.72:1AAA
#5DADE2먹 글자7.08:1AAA
#FDEBD0먹 글자14.89:1AAA
#1A252F흰 글자15.56:1AAA
#E74C3C먹 글자4.56:1AA

다른 칩

목록으로·팔레트 쓰는 법

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

이어서 하나 더