Color 1 on Color 2
대비 샘플 텍스트
Text #0965A6onBG #F1B71F
AA Large3.37:1큰 텍스트 AA 기준만 충족합니다.
팔레트 정보
Blue Mango
추천 분야와 이유
- 여름 과일 주스 병 라벨 — 블루와 옐로, 오렌지 조합은 여름 과일 주스, 망고 주스, 오렌지 에이드 병 라벨에서 시원함과 달콤함을 동시에 전달합니다. 밝은 배경색은 원재료 사진과 영양 정보를 깨끗하게 받쳐 주고, 선명한 포인트 컬러는 편의점 음료 진열대와 온라인 식품몰 썸네일에서 높은 주목도를 만듭니다.
- 해변 리조트 예약 페이지 — 코발트 블루와 스카이 블루는 해변 리조트, 오션뷰 호텔, 여름 휴가 예약 페이지에서 바다와 하늘 이미지를 직관적으로 보여 줍니다. 옐로 포인트는 햇살, 조식, 프로모션 배너를 강조하기 좋고, 오렌지 톤은 가족 여행과 커플 여행의 따뜻한 기대감을 더합니다. 여행 예약 전환에 적합합니다.
- 초등학생 영어 학습 앱 — 밝은 블루와 옐로 계열은 초등학생 영어 학습 앱, 키즈 교육 콘텐츠, 단어 퀴즈 UI에서 친근하고 활기찬 인상을 줍니다. 선명한 색 대비는 버튼, 배지, 정답 피드백을 쉽게 구분하게 해 줍니다. 어린이 학습 앱, 파닉스, 영어 단어 게임 키워드와 잘 맞습니다.
- 수영 강습 홍보 포스터 — 블루 계열은 수영장, 물놀이, 어린이 수영 강습 포스터에서 청량하고 안전한 이미지를 만듭니다. 옐로와 오렌지는 수강 신청 버튼, 여름 특강, 할인 안내를 눈에 띄게 만들어 줍니다. 유아 수영, 초등 수영, 실내 수영장 강습 같은 지역 SEO 키워드에도 활용하기 좋습니다.
- 친환경 세제 리필 파우치 — 연한 민트 화이트와 블루 계열은 친환경 세제, 세탁세제 리필, 주방세제 파우치에서 깨끗한 세정감과 물의 이미지를 전달합니다. 옐로 포인트는 산뜻한 향과 리필 스티커를 돋보이게 하고, 오렌지는 생활용품 패키지에 따뜻한 친근함을 더합니다. 제로웨이스트 세제 키워드에 적합합니다.
비추천 분야와 이유
- 럭셔리 위스키 병 라벨 — 럭셔리 위스키 병 라벨은 짙은 브라운, 블랙, 골드처럼 숙성감과 오크통의 깊이를 보여 주는 색이 효과적입니다. 이 색 조합은 해변, 주스, 교육 콘텐츠처럼 밝고 활동적인 인상이 강해 싱글몰트 위스키, 프리미엄 주류, 바틀 패키지에 필요한 묵직한 고급감을 만들기 어렵습니다.
- 장례식장 안내 브로슈어 — 장례식장 안내 브로슈어는 절제, 차분함, 정중함, 조문 안내의 명확성이 중요합니다. 선명한 블루와 옐로, 오렌지의 대비는 지나치게 밝고 홍보 배너처럼 보일 수 있습니다. 장례 상담, 빈소 안내, 추모 서비스 키워드에는 낮은 채도의 그레이나 네이비 계열이 더 적합합니다.
- 고급 가죽 소파 상세 페이지 — 고급 가죽 소파 상세 페이지는 촉감, 내구성, 거실 인테리어의 안정감, 프리미엄 가구 이미지를 보여 주어야 합니다. 이 팔레트는 여름 음료와 여행 배너처럼 경쾌한 인상이 강해 브라운 가죽, 월넛 거실장, 클래식 인테리어 키워드와 어울리는 묵직한 질감을 약하게 만들 수 있습니다.
- 피부과 레이저 시술 페이지 — 피부과 레이저 시술 페이지는 의료 신뢰감, 피부 진정, 정밀 장비, 안전한 상담 이미지를 전달해야 합니다. 노란색과 오렌지 포인트가 많으면 할인 광고처럼 보이거나 시술 전후 사진의 전문성을 약하게 만들 수 있습니다. 피부과 예약, 색소 레이저, 여드름 치료 페이지에는 다소 산만합니다.
- 수면 명상 앱 다크모드 화면 — 수면 명상 앱 다크모드 화면은 낮은 자극, 깊은 휴식, 숙면 루틴, 마음 안정 키워드가 중요합니다. 이 색상은 밝고 클릭 유도력이 강해 야간 사용 화면에서는 시각적 에너지가 높게 느껴질 수 있습니다. ASMR, 수면 타이머, 명상 앱 UI에는 더 부드러운 블루 그레이가 적합합니다.
팔레트가 주는 느낌
- 선명한 코발트 블루와 스카이 블루가 시원하고 깨끗한 이미지를 만들고, 골든 옐로와 번트 오렌지가 햇빛과 과일 같은 활기를 더하는 팔레트입니다. 연한 민트 화이트가 전체 대비를 부드럽게 정리해 화면과 패키지를 답답하지 않게 만듭니다. 바닷가 카페, 여름 음료, 여행 앱, 어린이 교육 콘텐츠가 떠오르며, 밝고 친근하지만 가볍게만 보이지 않습니다. 클릭을 유도하는 온라인 배너와 매대에서 눈에 잘 띄는 오프라인 상품에 모두 적합합니다.
WCAG 대비
팔레트 색상 간 대비
각 색상을 텍스트 색상으로, 나머지 색상을 배경색으로 보았을 때의 WCAG 대비율입니다. AA는 4.5:1 이상, AAA는 7:1 이상을 의미합니다.
Color 1
#0965A6와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 1 on Color 3
대비 샘플 텍스트
Text #0965A6onBG #E6F1ED
AA5.31:1일반 텍스트 AA 기준을 충족합니다.
Color 1 on Color 4
대비 샘플 텍스트
Text #0965A6onBG #B34C0E
Fail1.16:1텍스트 대비 기준에 미달합니다.
Color 1 on Color 5
대비 샘플 텍스트
Text #0965A6onBG #64ACD9
Fail2.47:1텍스트 대비 기준에 미달합니다.
Color 2
#F1B71F와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 2 on Color 1
대비 샘플 텍스트
Text #F1B71FonBG #0965A6
AA Large3.37:1큰 텍스트 AA 기준만 충족합니다.
Color 2 on Color 3
대비 샘플 텍스트
Text #F1B71FonBG #E6F1ED
Fail1.58:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 4
대비 샘플 텍스트
Text #F1B71FonBG #B34C0E
Fail2.91:1텍스트 대비 기준에 미달합니다.
Color 2 on Color 5
대비 샘플 텍스트
Text #F1B71FonBG #64ACD9
Fail1.37:1텍스트 대비 기준에 미달합니다.
Color 3
#E6F1ED와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 3 on Color 1
대비 샘플 텍스트
Text #E6F1EDonBG #0965A6
AA5.31:1일반 텍스트 AA 기준을 충족합니다.
Color 3 on Color 2
대비 샘플 텍스트
Text #E6F1EDonBG #F1B71F
Fail1.58:1텍스트 대비 기준에 미달합니다.
Color 3 on Color 4
대비 샘플 텍스트
Text #E6F1EDonBG #B34C0E
AA4.59:1일반 텍스트 AA 기준을 충족합니다.
Color 3 on Color 5
대비 샘플 텍스트
Text #E6F1EDonBG #64ACD9
Fail2.15:1텍스트 대비 기준에 미달합니다.
Color 4
#B34C0E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 4 on Color 1
대비 샘플 텍스트
Text #B34C0EonBG #0965A6
Fail1.16:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 2
대비 샘플 텍스트
Text #B34C0EonBG #F1B71F
Fail2.91:1텍스트 대비 기준에 미달합니다.
Color 4 on Color 3
대비 샘플 텍스트
Text #B34C0EonBG #E6F1ED
AA4.59:1일반 텍스트 AA 기준을 충족합니다.
Color 4 on Color 5
대비 샘플 텍스트
Text #B34C0EonBG #64ACD9
Fail2.13:1텍스트 대비 기준에 미달합니다.
Color 5
#64ACD9와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
Color 5 on Color 1
대비 샘플 텍스트
Text #64ACD9onBG #0965A6
Fail2.47:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 2
대비 샘플 텍스트
Text #64ACD9onBG #F1B71F
Fail1.37:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 3
대비 샘플 텍스트
Text #64ACD9onBG #E6F1ED
Fail2.15:1텍스트 대비 기준에 미달합니다.
Color 5 on Color 4
대비 샘플 텍스트
Text #64ACD9onBG #B34C0E
Fail2.13:1텍스트 대비 기준에 미달합니다.
APCA 대비
인지 대비 기반 가독성 분석
APCA(Advanced Perceptual Contrast Algorithm)는 WCAG 2.0의 단순 대비율을 보완해 사람 눈이 느끼는 휘도, 밝은 배경·어두운 배경의 순응 상태, 텍스트 크기별 권장 용도를 함께 해석합니다.
핵심 계산 공식
어두운 글자 + 밝은 배경: Lc = ((Ybg^0.56 - Ytxt^0.57) × 1.14 - 0.027) × 100
밝은 글자 + 어두운 배경: Lc = ((Ybg^0.65 - Ytxt^0.62) × 1.14 + 0.027) × 100
Y 값은 RGB 채널에 2.4 TRC와 시각 가중치를 적용한 휘도이며, 저휘도 구간에는 soft clamp를 적용하고 ±0.1 미만의 낮은 대비는 0으로 클립합니다.
실무 적용 가이드
- |Lc| ≥ 90
- 매우 안정적인 본문/소형 텍스트에 적합합니다. 12px~14px 수준의 작은 텍스트, 얇은 글씨, 긴 본문처럼 오래 읽어야 하는 콘텐츠에 권장됩니다. 도움말, 약관, 설명문, 문서형 콘텐츠처럼 사용자가 정확히 읽어야 하는 텍스트라면 이 구간이 가장 안전합니다.
- |Lc| ≥ 75
- 일반 본문에 권장되는 안정적인 대비입니다. 16px 전후의 본문, 문단 텍스트, 주요 설명 텍스트에 적합합니다. 웹사이트 본문, 상품 설명, 서비스 소개문, 카드 설명문처럼 일반적인 콘텐츠 텍스트는 가능하면 이 기준 이상을 목표로 잡는 것이 좋습니다.
- |Lc| ≥ 60
- 짧은 UI 텍스트의 최소 권장 수준입니다. 버튼 라벨, 탭, 메뉴, 폼 라벨, 짧은 안내 문구처럼 빠르게 읽고 지나가는 텍스트에 사용할 수 있습니다. 다만 긴 본문 전체를 이 수준으로 구성하면 가독성이 부족할 수 있으므로, 본문에는 보수적으로 |Lc| 75 이상을 권장합니다.
- |Lc| ≥ 45
- 큰 글자, 굵은 글자, 아이콘에 제한적으로 사용할 수 있는 수준입니다. 24px 이상 굵은 제목, 36px 이상 일반 제목, 큰 버튼, 정보성 아이콘처럼 크기나 두께가 충분한 요소에 적합합니다. 작은 본문이나 중요한 안내 문구에는 부족할 수 있으므로 제한적으로 사용하는 것이 좋습니다.
- |Lc| ≥ 30
- 보조·비활성·플레이스홀더 수준입니다. placeholder, disabled text, 장식성 보조 텍스트처럼 중요도가 낮은 요소에만 사용하는 것이 좋습니다. 가격, 오류 메시지, 경고문, CTA 버튼처럼 사용자가 반드시 읽어야 하는 정보에는 권장하지 않습니다.
- |Lc| < 30
- 텍스트 용도로는 비추천합니다. 가독성이 낮기 때문에 본문, 버튼, 메뉴, 안내 문구에는 사용하지 않는 것이 좋습니다. 장식 배경, 구분선, 비핵심 그래픽처럼 읽을 필요가 없는 시각 요소에만 사용하는 것이 적절합니다.
Color 1
#0965A6와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0965A6onBG #F1B71F
|Lc| 30++44 LcWCAG 3.37:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0965A6onBG #E6F1ED
|Lc| 60++70 LcWCAG 5.31:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0965A6onBG #B34C0E
|Lc| < 30+0 LcWCAG 1.16:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #0965A6onBG #64ACD9
|Lc| < 30+29 LcWCAG 2.47:1
Color 2
#F1B71F와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F1B71FonBG #0965A6
|Lc| 45+-46 LcWCAG 3.37:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #F1B71FonBG #E6F1ED
|Lc| < 30+24 LcWCAG 1.58:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F1B71FonBG #B34C0E
|Lc| 30+-42 LcWCAG 2.91:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #F1B71FonBG #64ACD9
|Lc| < 30-15 LcWCAG 1.37:1
Color 3
#E6F1ED와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E6F1EDonBG #0965A6
|Lc| 60+-74 LcWCAG 5.31:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E6F1EDonBG #F1B71F
|Lc| < 30-27 LcWCAG 1.58:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E6F1EDonBG #B34C0E
|Lc| 60+-70 LcWCAG 4.59:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #E6F1EDonBG #64ACD9
|Lc| 30+-43 LcWCAG 2.15:1
Color 4
#B34C0E와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #B34C0EonBG #0965A6
|Lc| < 30+0 LcWCAG 1.16:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #B34C0EonBG #F1B71F
|Lc| 30++40 LcWCAG 2.91:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #B34C0EonBG #E6F1ED
|Lc| 60++66 LcWCAG 4.59:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #B34C0EonBG #64ACD9
|Lc| < 30+25 LcWCAG 2.13:1
Color 5
#64ACD9와 다른 색상의 대비
나머지 4개 배경색과 비교합니다.
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #64ACD9onBG #0965A6
|Lc| 30+-31 LcWCAG 2.47:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #64ACD9onBG #F1B71F
|Lc| < 30+13 LcWCAG 1.37:1
APCA sample · 어두운 글자 + 밝은 배경
인지 대비 샘플
Text #64ACD9onBG #E6F1ED
|Lc| 30++39 LcWCAG 2.15:1
APCA sample · 밝은 글자 + 어두운 배경
인지 대비 샘플
Text #64ACD9onBG #B34C0E
|Lc| < 30-26 LcWCAG 2.13:1
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
색상 코드 상세
css
tailwind
More Palettes
다른 색상 팔레트도 둘러보기
현재 보고 있는 팔레트를 제외하고 랜덤으로 고른 4개의 팔레트입니다. 새로운 배색 아이디어가 필요할 때 함께 비교해 보세요.