edubun
한국어
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
홈›색·디자인›색 이론

디자인에 색 쓰기

남성의 약 8%가 적록 색각 이상이라서, 오류를 빨간색으로만 표시한 입력 양식은 이들에게 수수께끼가 됩니다.

3D 모형을 불러오는 중

끌어서 돌리고, 휠이나 두 손가락으로 확대하세요.

브랜드 색과 그 보색입니다. 아래 칸에서 배경을 보색으로 바꿔 두 색을 글자와 바탕으로 썼을 때 어떻게 읽히는지 보고, 흰색과 검정도 비교해 보세요.

색 하나에 뜻을 다 맡기지 않습니다

WCAG 2.2 성공 기준 1.4.1 「색 사용」은 가장 기본인 A 수준입니다. 정보를 전하거나, 동작을 알리거나, 응답을 요청하거나, 시각 요소를 구별하는 수단이 색 하나뿐이어서는 안 된다는 내용입니다. 오류가 난 입력 칸에 빨간 테두리를 두는 것은 괜찮지만, 무엇이 잘못됐는지 알려 주는 아이콘이나 글 한 줄이 함께 있어야 합니다. 색 선 다섯 개가 있는 선 그래프에도 이름표나 서로 다른 선 모양, 표시 기호가 필요합니다. 문단 안의 링크에는 색 말고도 밑줄 같은 다른 표시가 있어야 합니다.

까닭 가운데 하나는 색각입니다. OpenStax 신경과학 교재는 어떤 사람은 유전적 차이로 원뿔세포가 세 종류가 아니라 두 종류이거나, 색소 하나가 다르게 작동한다고 설명합니다. 색을 아예 못 보는 것이 아니라, 대부분의 사람이 구별하는 색 일부가 똑같아 보이는 것입니다. 가장 흔한 것은 적록 색각 이상으로, 남성의 약 8%에게 있습니다. 다른 까닭도 있습니다. 햇빛이 센 곳의 휴대폰, 값싼 영사기, 흑백 인쇄물이 그렇습니다. 회색조로 바꿔도 통하는 디자인은 이런 경우에도 모두 통합니다.

무게는 밝기가 집니다

그래서 경험 많은 디자이너는 팔레트를 두 번에 나눠 정합니다. 먼저 밝기 단계를 정합니다. 아주 밝은 배경, 테두리에 쓸 중간 톤, 글자에 쓸 어두운 톤입니다. 그다음에 색상을 고릅니다. 글자와 배경의 짝마다 6단원의 대비율로 확인하면 단계가 충분히 떨어졌는지 가장 빨리 알 수 있습니다. 보색이라고 대비가 보장되는 것은 아닙니다. 모형의 브랜드 주황과 그 보색인 파랑은 HSL 채도와 명도가 같고, 둘 사이의 대비율은 1.06:1밖에 되지 않습니다. 색상으로는 가장 멀리 떨어진 두 색도 서로의 위에서는 읽기 어려울 수 있습니다.

이 과정의 내용을 모으면 간단한 작업 순서가 됩니다. 주제에 맞는 색상 하나로 시작합니다. 4단원의 배색으로 보조 색상 한두 개를 고릅니다. 델라웨어 대학 안내서의 경험칙처럼 주된 색에 면적의 약 60%, 보조 색에 30%, 강조 색에 10%를 줍니다. 글자와 배경의 짝마다 대비율이 4.5:1 이상, 큰 제목과 아이콘은 3:1 이상이 될 때까지 명도를 고릅니다. 마지막으로 색 하나에만 기대는 곳이 없는지 확인합니다. 오류에는 글이, 링크에는 밑줄이, 그래프에는 이름표가 있어야 합니다.

그래프는 색을 한꺼번에 많이 쓰는 일이 잦아서 따로 신경 써야 합니다. 델라웨어 대학 안내서는 지도와 그래프 팔레트를 위해 만든 도구인 ColorBrewer를 소개합니다. 낮은 값에서 높은 값으로 이어지는 자료에는 한 색상을 밝은 쪽에서 어두운 쪽으로 단계별로 바꾼 순차 팔레트를 쓰면 회색조에서도 통합니다. 범주를 나눌 때는 색을 되도록 적게 쓰고, 범례에만 두지 말고 선이나 막대 옆에 이름을 바로 붙이고, 이웃한 두 색이 비슷해 보이지 않도록 밝기 차이를 충분히 둡니다.

이 사이트도 같은 규칙을 따릅니다. 강조 색 #a8581b는 흰 바탕과의 대비율이 5.15:1이고, 본문 글자 색 #1c1a17은 17.36:1입니다.
확인할 것규칙출처
본문 글자4.5:1 이상WCAG 2.2, 1.4.3
큰 글자3:1 이상WCAG 2.2, 1.4.3
아이콘, 입력 칸 테두리, 초점 표시3:1 이상WCAG 2.2, 1.4.11
오류, 링크, 그래프 선색 하나로만 표시하지 않기WCAG 2.2, 1.4.1
면적 비율약 60 / 30 / 10델라웨어 대학 안내서
핵심 정리
  • WCAG 1.4.1에 따라 색만으로 정보를 전해서는 안 됩니다.
  • 적록 색각 이상은 남성의 약 8%에게 있습니다.
  • 밝기 단계를 먼저, 색상을 나중에 정합니다. 보색이라고 대비가 보장되지는 않습니다.
  • 글자와 배경의 짝은 모두 대비율로 확인합니다.
  1. WCAG 1.4.1 「색 사용」이 요구하는 것은?
    • 색이 정보를 전하는 유일한 시각 수단이어서는 안 된다
    • 모든 페이지에 색을 셋 이상 써야 한다
    • 링크는 파랑이어야 한다
    • 글자는 검정이어야 한다
  2. 1.4.1은 어느 수준입니까?
    • A
    • AA
    • AAA
    • 수준 없음
  3. OpenStax에 따르면 남성의 약 몇 %가 적록 색각 이상입니까?
  4. 입력 양식이 잘못된 칸을 빨간 테두리로만 표시합니다. 무엇을 더해야 합니까?
    • 무엇이 잘못됐는지 알리는 아이콘이나 글
    • 더 밝은 빨강
    • 맞는 칸에 초록 테두리
    • 아무것도 필요 없다
  5. 같은 HSL 명도의 보색 두 개의 대비율은...
    • 높다고 보장되지 않는다
    • 언제나 21:1
    • 언제나 4.5:1 이상
    • 언제나 1:1
  6. 이 사이트의 강조 색 #a8581b와 흰 바탕의 대비율을 소수 둘째 자리까지 쓰세요.
  7. 많은 디자이너는 팔레트를 어떤 순서로 정합니까?
    • 밝기 단계 먼저, 그다음 색상
    • 색상만 정하고 밝기는 안 정한다
    • 아무 색이나 고른 뒤 시험
    • 검정과 흰색만
  8. 그래프에 색이 다른 선이 다섯 개 있습니다. 색을 구별하지 못하는 사람을 돕는 것은?
    • 이름표, 선 모양, 표시 기호
    • 더 진한 색
    • 더 어두운 배경
    • 선만 굵게
  9. 60/30/10 팔레트에서 주된 색의 비율은?
  10. 디자인을 회색조로 확인하는 까닭은?
    • 밝기만으로 부분이 구별되는지 보려고
    • WCAG가 회색조를 요구해서
    • 파일이 작아져서
    • 색상 각도가 바뀌어서
이 과정의 출처 (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

확인한 날: 2026-10-17