색상과 대비 강좌는 17단계 인터랙티브 튜토리얼로, 디자인 시안과 CSS에 나오는 모든 색 표기법을 읽는 법과 「이 두 색이 붙었을 때 읽히는가」를 측정 가능한 기준으로 판단하는 법을 알려 줍니다. 단계마다 색 선택기가 하나에서 셋까지 주어지고 목표가 하나씩 있습니다. 밝기를 특정 값으로 맞추기, 대비를 4.5:1 이상으로 만들기, 색상이 120° 떨어진 세 색 찾기, 색맹이 구분하기 어려워하는 한 쌍을 구분 가능하게 바꾸기 같은 목표입니다. 슬라이더를 끌거나 색 값을 입력하면 수치 표시, 대비 배지, 배색 휠, 색맹 시뮬레이션 표가 실시간으로 갱신되고 판정기가 어디가 어긋났는지 알려 줍니다.

강좌는 네 구간입니다. 색 모델(RGB, HEX, HSL, HSV, OKLCH의 성분이 각각 무엇을 제어하는지, 왜 HSL의 「밝기」가 눈이 느끼는 밝기와 다른지), 대비와 WCAG(상대 휘도 공식, 4.5:1 / 3:1 / 7:1 세 기준이 각각 무엇을 담당하는지), 배색(보색, 삼각, 유사 세 가지 색상환 관계), 접근성과 실무(적록 색맹이 보는 세계, 색맹에 안전한 배색 고르기, 로고 한 장에서 주 색 뽑기)입니다. 마지막 단계에서는 앞에서 배운 것을 종합해 세 가지 색을 내고 모든 검사를 통과해야 합니다.

45분 정도면 끝납니다. 프런트엔드 개발자, 디자이너, 그리고 슬라이드·차트·포스터에 쓸 색을 골라야 하는 모든 사람에게 맞습니다. 미술 기초는 필요 없습니다.

1. 01목표와 색 선택기 확인연습 영역 위쪽에 이번 단계의 목표가 있습니다. 아래에는 색 선택기가 하나에서 셋 있으며 「고정」이라고 표시된 것은 바꿀 수 없고(지정된 배경색 등), 나머지는 색 상자를 눌러 고르거나 #RRGGBB / rgb() / hsl()을 직접 입력합니다.
2. 02색 조절색 선택기를 고르면 슬라이더 패널이 나타납니다. RGB 세 개, HSL 세 개, 또는 둘 다입니다. 「수치 읽기」 패널은 같은 색을 HEX, RGB, HSL, HSV, OKLCH 다섯 가지 표기로 함께 보여 줍니다.
3. 03피드백 보기대비 단계는 비율과 AA / AAA 배지를 보여 주고 실제 글자로 미리보기합니다. 배색 단계는 색상환에 지금 색의 보색 / 삼각 / 유사 위치를 표시합니다. 색맹 단계는 네 가지 색각 결함에서의 시뮬레이션 색과 색차 ΔE를 나열합니다.
4. 04판정과 통과목표를 채우면 결과 표시줄이 초록으로 바뀌고 목차에서 그 단계에 체크가 붙습니다. 일부 단계는 숫자나 선택지를 적는 방식이고 답 칸은 상호작용 영역 아래에 있습니다.
5. 05힌트, 정답, 진행 상황「힌트」는 실마리를, 「정답 보기」는 참고 색 값을 보여 주고 한 번에 채울 수 있습니다. 진행 상황은 이 기기에 저장되어 새로 고쳐도 남고, 「이 단계 공유」는 ?lesson=n이 붙은 링크를 복사합니다.

8단계 「WCAG AA: 본문 최소 4.5:1」은 배경을 흰색으로 고정하고 글자 색을 대비 4.5 이상이면서 순수 검정은 아니게 맞추라고 합니다. 시도 기록 하나를 옮기면 다음과 같습니다.

배경(고정)   #FFFFFF   상대 휘도 L = 1.000
시도 1        #3B82F6   L = 0.228   대비 = 1.05 / 0.278 = 3.68:1
  판정        ✓ AA 큰 글자(≥ 3)   ✕ AA 본문(≥ 4.5)
시도 2        #2563EB   L = 0.153   대비 = 1.05 / 0.203 = 5.17:1
  판정        ✓ AA 큰 글자   ✓ AA 본문   ✕ AAA 본문(≥ 7)   → 통과

15단계 「색맹 안전」은 주황 #E76F51을 기준으로 삼고 두 번째 색은 처음에 초록 #8AB17D입니다. 정상 시야에서는 ΔE ≈ 0.20이라 한눈에 구분되지만 적록 색맹 시뮬레이션에서는 0.056까지 떨어져 거의 겹칩니다. 두 번째 색을 중간 밝기 파랑(예: #2563EB)으로 바꾸면 시뮬레이션에서 ΔE가 다시 0.15 이상이 되고 두 색 모두 흰 배경 대비 ≥ 3:1을 만족해 통과합니다.

1–2단계: RGB와 HEX — 화면은 어떻게 빛을 내는가

화면의 모든 픽셀은 빨강, 초록, 파랑 세 서브픽셀로 이뤄지고 rgb(37 99 235)는 세 빛의 세기를 나타냅니다. 0은 꺼짐, 255는 최대 밝기입니다. 셋 다 0이면 검정, 셋 다 255면 흰색, 서로 같으면 회색입니다. HEX는 같은 값을 16진수로 줄여 쓴 것입니다. #2563EB에서 25 = 37, 63 = 99, EB = 235이고 두 자리가 한 채널입니다. #FFF 같은 세 자리 표기는 각 자리를 한 번 더 반복한 축약형입니다. 이 표현을 sRGB라고 하며 웹과 대부분의 디스플레이에서 기본 색 공간입니다. 수치와 실제 빛의 세기 사이에는 감마 곡선이 하나 더 있고, 뒤에서 대비를 계산할 때 이것을 씁니다.

3–4단계: HSL — 사람이 이해하는 세 값으로 색을 기술

RGB는 기계에는 편하지만 사람에게는 직관적이지 않습니다. 파랑을 「조금 연하게」 만들려면 채널 셋을 동시에 고쳐야 합니다. HSL은 좌표를 바꿉니다. 색상 H는 색상환의 각도(0° 빨강, 120° 초록, 240° 파랑, 360°는 다시 빨강), 채도 S는 색이 얼마나 「순한지」(0% 회색, 100% 최대로 선명), 밝기 L은 얼마나 밝은지(0% 검정, 50% 순색, 100% 흰색)입니다. 연하게 만들려면 L을 올리고, 파스텔 톤은 S를 낮추고 L을 올리면 됩니다. 강좌 4단계에서 직접 하나를 만들어 봅니다. CSS에 hsl(221 83% 53%)라고 쓰면 #2563EB와 같은 색입니다.

5단계: HSV와 HSL의 차이

HSV(HSB라고도 함)의 V는 「세 채널 중 최댓값」입니다. V = 100%일 때 색이 가장 선명하거나 밝고, S를 0으로 내리면 회색이 아니라 흰색이 됩니다. HSL은 L = 100%가 언제나 흰색입니다. 디자인 소프트웨어의 색 선택기는 HSV(사각형과 색상 막대)를 많이 쓰고 CSS는 HSL만 지원합니다. 둘은 손실 없이 서로 변환되지만 성분의 의미가 다르니 HSV 숫자를 hsl()에 그대로 넣으면 안 됩니다.

6단계: OKLCH — HSL의 「밝기」가 왜 사람을 속이는가

HSL에서 hsl(60 100% 50%)는 순수한 노랑이고 hsl(240 100% 50%)는 순수한 파랑인데, 둘의 L은 모두 50%지만 노랑이 눈에 훨씬 밝게 보입니다. HSL은 RGB 수치를 기하학적으로 재배열한 것일 뿐 사람의 지각과 무관하기 때문입니다. OKLab / OKLCH(Ottosson, 2020)는 사람 눈 실험 데이터에 맞춰 적합시킨 공간이라 L이 같으면 똑같이 밝게 보이고, C(채도)와 h(색상)의 변화도 더 고르게 느껴집니다. CSS Color 4는 oklch()를 표준에 넣었고 주요 브라우저가 모두 지원합니다. 6단계에서는 OKLCH 수치만 보고 어떤 색을 명도 L 0.68–0.72, 색상은 주황 구간으로 맞추라고 합니다. HSL의 L 값이 그것과 맞아떨어지지 않는다는 것을 알게 됩니다. 그라데이션을 만들거나 같은 색상의 밝고 어두운 단계를 만들거나 색상이 달라도 「같은 밝기」를 유지할 때 OKLCH가 훨씬 안정적입니다.

7단계: 대비 공식

WCAG가 정의하는 대비는 아무 두 수의 차이가 아니라 상대 휘도의 비율입니다.

여기서 $L_1 \ge L_2$이고 0.05는 주변광의 반사를 모사합니다. 상대 휘도 $L$은 sRGB 세 채널을 먼저 감마 디코딩한 뒤 가중 합해 구합니다.

초록의 가중치가 가장 크므로(0.7152) 같은 수치의 초록이 파랑보다 훨씬 밝게 보입니다. 흑백 대비는 21:1이 상한입니다. 7단계에서 수치를 보며 직접 한 번 계산해 보고, 이후 단계는 페이지가 대신 계산합니다.

8–10단계: 4.5, 3, 7 세 기준

WCAG 2.2의 1.4.3(AA)은 본문 대비 ≥ 4.5:1, 큰 글자(약 24px 보통 굵기 또는 18.5px 굵게) ≥ 3:1을 요구합니다. 1.4.11은 아이콘, 테두리, 차트 같은 「비텍스트 콘텐츠」도 ≥ 3:1이어야 한다고 정합니다. 1.4.6(AAA)은 본문을 ≥ 7:1로 올립니다. 이것은 미적 기준이 아니라 중등도 저시력 사용자도 읽을 수 있게 하는 경험적 임계값이며 여러 나라 규제의 근거이기도 합니다.

9단계는 일부러 「7:1을 넘되 순수 검정은 아닌」 색을 요구합니다. #000에 #FFF는 21:1이라 문제가 없지만 넓은 면적의 순수 흑백은 눈부심을 부르기 쉬워 디자인에서는 보통 #1A1A1A, #24292F 같은 짙은 회색을 골라도 7:1을 쉽게 넘습니다. 반대로 연한 회색 자리 표시자 텍스트 #9CA3AF는 흰 배경에서 2.5:1밖에 되지 않아 많은 웹사이트가 이 지점에서 기준을 어깁니다.

11–13단계: 색상환의 세 가지 관계

배색 이론의 가장 기초는 색상 사이의 각도 관계입니다.

• 보색(180° 차이): 대비가 가장 강해 강조와 버튼에 맞습니다. 큰 면적으로 나란히 두면 서로 「싸우므로」 보통 하나를 주, 하나를 부로 씁니다.
• 삼각(120° 간격): 세 색이 균형 있고 활기차며 브랜드와 일러스트에 자주 보입니다. 쓸 때는 둘의 채도를 낮춥니다.
• 유사(20–40° 이웃): 조화롭고 조용해 배경과 층위에 맞습니다. 대신 대비가 부족해 명도로 차이를 만들어야 합니다.

강좌의 배색 휠은 현재 색의 이 세 위치를 표시합니다. 판정은 색상 각도 차이만 보고(작은 오차 허용), 채도와 밝기는 자유롭게 바꿀 수 있습니다. 실제 배색에서는 그 둘이 색상보다 더 중요할 때가 많습니다.

14–15단계: 색각 결함

남성의 약 8%, 여성의 약 0.5%가 어떤 형태든 색각 결함을 갖고 있습니다. 가장 흔한 것은 적록 색맹(protanopia는 빨강, deuteranopia는 초록이 빠짐)이고, 청황 색맹(tritanopia)은 드물며 전색맹은 아주 드뭅니다. 강좌는 Machado 등이 2009년에 낸 생리학 모델로 시뮬레이션합니다. 색을 결함이 있는 사람의 원추세포 반응에 투영한 뒤 sRGB로 되돌리는 방식입니다. 동시에 OKLab 공간의 유클리드 거리 ΔE로 두 색이 「얼마나 다른지」를 수치화합니다. ≈ 0.02 이내면 거의 구분되지 않고, ≥ 0.15면 한눈에 구분됩니다.

14단계에서는 세 쌍 중 적록 색맹이 가장 구분하기 어려운 쌍을 찾아야 합니다. 주황 #E76F51과 초록 #8AB17D는 시뮬레이션 후 ΔE가 0.056까지 떨어지지만, 빨강과 청록, 짙은 파랑과 노랑은 명도 차가 커서 여전히 또렷합니다. 15단계는 그것을 고치는 단계입니다. 방법은 두 가지입니다. 명도 차를 벌리기(색맹은 주로 색상 정보를 잃고 명도 차는 늘 보임) 또는 색상 바꾸기(빨강/초록을 파랑/주황으로)입니다. 차트라면 모양, 질감, 숫자 표시를 더해 색만으로 정보를 전하지 않는 편이 좋습니다. WCAG 1.4.1의 요구입니다.

16단계: 브랜드 색 추출

이미지에서 「주 색을 뽑는」 소박한 방법은 픽셀을 세는 것입니다. 픽셀마다 RGB 각 채널을 16단계로 양자화해(4096개 버킷) 세고, 정렬한 뒤 상위 몇 개 버킷의 평균 색을 씁니다. 강좌는 canvas에 예시 로고를 그리고 통계를 내 점유율 순으로 팔레트를 보여 주며, 색 상자를 클릭하거나 이미지에서 직접 색을 집습니다. 실제 도구(Vibrant.js, Material You의 동적 색 추출 등)는 여기에 군집화, 거의 흰색·검정 제거, 채도 가중치를 더하지만 원리는 같습니다.

17단계: 쓸 만한 세 색 한 조합

마지막 단계는 전부를 종합합니다. 색 세 개를 내되 각각 흰 배경 대비 ≥ 4.5:1(본문이나 버튼 글자로 바로 쓸 수 있는 수준), 임의의 두 색 사이 색상 차 ≥ 60°(구분 가능)를 만족해야 하고, 셋의 OKLCH 명도를 비슷하게 맞추길 권합니다(통일). 실제 프로젝트의 배색 결정은 대략 「읽히고, 구분되고, 통일된」 세 제약의 교집합입니다.

색 공간

sRGB와 그 파생(HSL, HSV), OKLCH만 다룹니다. Display P3, Rec.2020 같은 넓은 색역과 CMYK 인쇄, 별색은 다루지 않습니다.

대비 알고리즘

WCAG 2.x의 상대 휘도 공식을 씁니다. WCAG 3 초안의 APCA 지각 대비는 강좌 범위 밖입니다(더 정밀하지만 아직 표준이 아닙니다).

색맹 시뮬레이션

Machado 2009 모델의 완전 결함(severity = 1) 행렬이며, 정도를 조절하는 약한 색각 시뮬레이션은 제공하지 않습니다.

배색 판정

색상 각도 관계만 검사하고(작은 오차 허용) 미적 평가는 하지 않습니다.

브랜드 색 추출

강좌에 내장된 예시 이미지에만 돌아가고 업로드는 받지 않습니다. 본인 이미지를 다루려면 「색상 도구」를 쓰세요.

하지 않는 일

팔레트 안을 만들지 않고, 디자인 토큰을 내보내지 않고, 사이트 전체 규정 준수를 검사하지 않습니다.

• 「HSL의 L이 같으면 밝기도 같다」: 아닙니다. HSL은 지각과 무관해 노랑 L=50%가 파랑 L=50%보다 훨씬 밝습니다. 같은 밝기로 보이게 하려면 OKLCH의 L을 비교하거나 대비를 직접 확인하세요.
• 「색이 더 멀리 떨어질수록 대비가 높다」: 대비는 밝기만 봅니다. 순수 빨강 #F00과 순수 초록 #0F0은 색상이 120° 떨어져 있지만 대비는 2.9:1에 불과하고 적록 색맹은 거의 구분하지 못합니다.
• 「4.5:1은 디자이너의 취향」: WCAG 2.2 AA의 측정 가능한 기준이며 여러 나라 접근성 법규의 근거입니다.
• 「투명도는 대비에 영향이 없다」: 반투명 글자가 배경 위에 얹혀 만들어진 합성 색이 실제로 계산에 들어가는 색입니다. 도구는 불투명 색을 계산하므로 먼저 합성 결과를 구해야 합니다.
• 「색맹은 빨강과 초록을 못 가리는 것」: 청황 색맹과 전색맹도 있습니다. 또 적록 색맹도 명도 차는 구분하므로 명도 차를 벌리는 방법은 언제나 유효합니다.

강좌 전부가 브라우저 로컬에서 돕니다. 색 변환, 대비, 색맹 시뮬레이션, 픽셀 통계가 모두 페이지 안 순수 계산이라 서버를 부르지 않습니다. 예시 로고는 페이지가 canvas로 그 자리에서 그리며 외부 이미지를 불러오지 않습니다. 진행 상황은 이 기기의 localStorage에 저장됩니다.

• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast, 그리고 용어집의 relative luminance과 contrast ratio 정의: https://www.w3.org/TR/WCAG22/#contrast-minimum(열람일: 2026-09-09)
• W3C, CSS Color Module Level 4 — sRGB 감마 곡선과 hsl(), oklch()의 규범 정의 및 상호 변환: https://www.w3.org/TR/css-color-4/(열람일: 2026-09-09)
• Björn Ottosson, A perceptual color space for image processing(2020) — OKLab의 설계 목표와 변환 행렬: https://bottosson.github.io/posts/oklab/(열람일: 2026-09-09)
• G. M. Machado, M. M. Oliveira, L. A. F. Fernandes, A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE TVCG 15(6), 2009 — 강좌 색맹 시뮬레이션에 쓰는 행렬의 출처: https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html(열람일: 2026-09-09)
• MDN Web Docs, Color contrast(접근성 가이드) — 기준의 실무 해설과 도구 목록: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast(열람일: 2026-09-09)