왜 순수한 검정 대신 진한 같은 계열 색을 추천하나요?

배경과 같은 계열의 아주 진한 색은 대비는 충분하면서 색끼리 부딪치지 않아요. 순수 검정보다 부드럽고 정돈돼 보여서 디자인에서 자주 쓰는 방법이에요.

몇 px부터 본문으로 써도 되나요?

명도 대비가 4.5:1 이상이면 일반 본문으로 쓸 수 있어요. 3:1 이상이면 24px 이상(굵게 쓰면 19px 이상)의 큰 제목에만 쓰는 게 좋아요. 한글은 획이 많아 영어보다 1–2px 크게 쓰면 더 편하게 읽혀요.

채도가 높은 두 색이 밝기가 비슷하면 경계가 떨려 보여요. 빨강 위 초록, 파랑 위 빨강 같은 조합이에요. 한쪽을 훨씬 진하거나 연하게 바꾸면 사라져요.

검정 계열이 가장 잘 읽히고, 보라나 남색 같은 보색 계열은 제목에 쓰면 또렷하게 살아나요. 같은 노랑 계열을 아주 진하게 낮춘 갈색빛 글자도 차분하게 어울려요.

배경색을 고르면 어울리는 글자색을 실제로 얹어 보고, 어떤 크기부터 본문이나 제목으로 쓸 수 있는지 알려 드려요. 잘 읽히는지는 명도 대비로, 예쁜지는 배색으로 함께 봐요.

하늘색#4FBADE

배경색 HEX색상환가장 가까운 색이름 하늘색 · 같은 색

색이름으로 고르기

글자는 이렇게우리 색이름에는 사물이 숨어 있어요. 병아리, 개나리, 쪽처럼요.

가장 세련된≈ 인디고블루 #0B242D배경과 같은 계열의 아주 진한 색이에요. 순수 검정보다 부드럽고 정돈돼 보여요.대비 7.2:1본문 12px부터

글자는 이렇게우리 색이름에는 사물이 숨어 있어요. 병아리, 개나리, 쪽처럼요.

가장 안전한먹색에 가까운 검정 #17191E대비가 가장 높아서 작은 글씨에도 무난해요.대비 7.8:1본문 12px부터

제목은 이렇게우리 색이름에는 사물이 숨어 있어요. 병아리, 개나리, 쪽처럼요.

포인트와인레드 #620E25배경의 보색 계열이라 제목이 또렷하게 살아나요대비 5.8:1본문 14px부터

사전의 색 중에서 이 배경 위에 얹어도 읽히는 글자색만 골랐어요. 마음에 드는 조합을 누르면 아래 크기 표와 미리보기에 포인트 색으로 들어가요.

이런 조합은 피하세요

주색가나다 Aa 123글자가 떨려 보여요#DC4300 · 대비 1.9:1

해바라기색가나다 Aa 123글자가 떨려 보여요#FCBF00 · 대비 1.3:1

딸기색가나다 Aa 123글자가 떨려 보여요#BC1A33 · 대비 2.8:1

칸마다 실제 크기로 얹었어요. 한글은 획이 많아서 같은 크기라도 영어보다 작게 느껴지니, 컬러바다는 한글을 2px 작게 쳐서 판단해요.

글꼴굵기예시 글

글자 크기와 글자색별 판정
크기	가장 세련된#0B242D · 7.2:1	가장 안전한#17191E · 7.8:1	포인트#620E25 · 5.8:1	비교: 반대쪽#FFFFFF · 2.2:1
12px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기	가나다 색이름 피하기
14px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기
16px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기
20px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기
24px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기
32px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기
48px	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 본문 OK	가나다 색이름 피하기

본문 OK 대비 4.5:1 이상제목만 3:1 이상, 큰 글자(24px, 굵게 19px 이상)피하기 그보다 낮거나 눈이 떨리는 조합

본문에는 세련된 글자색을, 큰 제목에는 포인트 글자색을 썼어요.

버튼

지금 시작하기버튼 글자는 16px 굵게

카드

이번 주 팔레트김장날절인 배추와 무, 붉은 고춧가루 양념, 쪽파, 마당의 장독.

포스터 제목

가을 장터토요일 오전 10시

메뉴판

오늘의 차

background: #4FBADE;
color: #0B242D;
font-size: 16px;

h1, h2 {
  color: #620E25;
  font-size: 32px;
  font-weight: 700;
}

왜 순수한 검정 대신 진한 같은 계열 색을 추천하나요?: 배경과 같은 계열의 아주 진한 색은 대비는 충분하면서 색끼리 부딪치지 않아요. 순수 검정보다 부드럽고 정돈돼 보여서 디자인에서 자주 쓰는 방법이에요.
몇 px부터 본문으로 써도 되나요?: 명도 대비가 4.5:1 이상이면 일반 본문으로 쓸 수 있어요. 3:1 이상이면 24px 이상(굵게 쓰면 19px 이상)의 큰 제목에만 쓰는 게 좋아요. 한글은 획이 많아 영어보다 1–2px 크게 쓰면 더 편하게 읽혀요.
대비가 충분한데도 글자가 떨려 보여요.: 채도가 높은 두 색이 밝기가 비슷하면 경계가 떨려 보여요. 빨강 위 초록, 파랑 위 빨강 같은 조합이에요. 한쪽을 훨씬 진하거나 연하게 바꾸면 사라져요.
노란 배경에는 어떤 글자색이 어울리나요?: 검정 계열이 가장 잘 읽히고, 보라나 남색 같은 보색 계열은 제목에 쓰면 또렷하게 살아나요. 같은 노랑 계열을 아주 진하게 낮춘 갈색빛 글자도 차분하게 어울려요.

대비 기준이 더 궁금하다면 명도 대비 가이드를, 색 코드를 바꾸려면 색상 코드 변환기를 써 보세요.