돌계단, 낮은 종소리, 솔잎 그림자

절 마당 종

솔잎 초록
#3D5A3D
돌계단 회색
#C4B7A6
산화된 종
#8C3A2F
창호지 마당
#F4EFE6
먹색
#2C2A26

내 화면에 적용해 보기

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

배경색본문색버튼색

무드칩 · 작업 카드 예시

절 마당 종

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

주요 버튼 예시

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

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

이 배경에서 읽히는 본문색

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

현재 조합의 CSS

.preview {
  background: #F4EFE6;
  color: #1a1a1a;
}
.preview button {
  background: #2C2A26;
  color: #ffffff;
}

글자를 올렸을 때

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

배경색	권장 글자색	대비	판정
#3D5A3D	흰 글자	7.70:1	AAA
#C4B7A6	먹 글자	8.84:1	AAA
#8C3A2F	흰 글자	7.60:1	AAA
#F4EFE6	먹 글자	15.20:1	AAA
#2C2A26	흰 글자	14.32:1	AAA

이 장면의 색

단청을 그대로 옮기면 관광 포스터가 됩니다. 솔 초록과 돌 회색, 종 근처의 산화된 붉은만 남기면 소리가 들어갑니다. 배경은 창호지처럼 밝게, 본문은 먹색에 가깝게. 금색을 넣지 않는 것이 이 팔레트의 절제입니다.

왜 이 다섯 색인가

절을 색으로 옮길 때 단청을 쓰면 관광 포스터가 됩니다. 실제로 마당에 서면 보이는 것은 대부분 돌과 나무와 흙이고, 단청은 처마 아래 좁은 띠에만 있습니다. 이 배색은 그 실제 비율을 따랐습니다. 초록과 회색과 밝은 흙색이 넓은 면을 맡고, 붉은 기운은 종의 산화된 표면에서 한 점만 가져왔습니다. 금색을 넣지 않은 것이 이 팔레트의 유일한 규칙이자 절제입니다. 소리가 들어갈 자리를 비워 두는 셈입니다.

화면에 앉히는 순서

창호지 마당 색을 배경으로 넓게 깔고 먹색으로 본문을 씁니다. 솔잎 초록은 제목과 구획에, 돌계단 회색은 카드 배경이나 구분선에 쓰세요. 산화된 종 색은 화면에 한 번, 가장 중요한 행동에만 씁니다. 이 배색은 요소 사이 여백이 넓을수록 좋아집니다. 카드를 촘촘히 붙이면 마당이 사라집니다.

대비와 가독성

창호지 마당(#F4EFE6) 배경에 솔잎 초록(#3D5A3D) 본문을 놓으면 대비는 6.72:1입니다. 일반 본문 AA 기준 4.5:1을 충족합니다. 먹색(#2C2A26)를 버튼 배경으로 쓰면 흰색 글자가 두 후보 중 대비가 더 높고 14.32:1입니다. 일반 본문 AA 기준을 충족합니다. 위 미리보기에서 실제 사용할 조합을 바꿔 검사할 수 있습니다.

이렇게 쓰면 무너집니다

금색이나 금박 효과를 넣는 순간 이 배색의 목적이 사라집니다. 단청의 원색 조합도 마찬가지입니다. 그리고 초록과 붉은색을 비슷한 면적으로 쓰면 명절 장식이 됩니다. 붉은색은 반드시 점으로만 존재해야 합니다.

글꼴과 질감

본문용 명조가 가장 잘 맞습니다. 자간과 줄 간격을 평소보다 넓게 잡고, 제목도 굵기보다 크기와 여백으로 위계를 만드세요. 장식 요소는 거의 쓰지 않는 편이 좋고, 선을 쓴다면 아주 얇게 한 종류만 씁니다. 그림자는 쓰지 마세요.

이런 곳에 쓰면

명상 타이머
답사 기록
차 브랜드

다른 칩

목록으로·팔레트 쓰는 법

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

이어서 하나 더

다른 색 조합 찾기마음에 드는 장면을 골라 색을 가져가세요.30만원으로 연애 고르기같은 예산, 다른 취향. 친구와 네 칸을 비교해 보세요.