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

대비율과 읽히는 글자

흰 바탕 위 회색 #767676은 대비율 4.54:1로 WCAG 본문 기준을 통과하고, 한 단계 밝은 #777777은 4.48:1로 미달입니다.

3D 모형을 불러오는 중

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

표시점은 회색 축 위 #767676에서 시작합니다. 아래 칸에서 배경을 고르고 명도 슬라이더를 움직이면 대비율과 통과·미달 줄이 바로 바뀝니다. 결과는 숫자와 함께 글로도 적힙니다.

상대 휘도

글자가 읽히는지 정할 때 웹 콘텐츠 접근성 지침(WCAG)은 색상이나 HSL 명도를 쓰지 않습니다. 상대 휘도를 씁니다. 검정 0부터 흰색 1까지의 수로, 색이 눈에 빛을 얼마나 보내는지를 따라갑니다. WCAG 2.2는 이것을 두 단계로 정의합니다. 먼저 채널 값을 255로 나눠 0부터 1 사이로 만든 뒤 sRGB 곡선을 되돌립니다. 값이 0.04045 이하이면 12.92로 나누고, 그보다 크면 ((값 + 0.055) / 1.055)의 2.4제곱을 계산합니다. 다음으로 세 결과에 가중치를 곱해 더합니다. L = 0.2126 R + 0.7152 G + 0.0722 B입니다.

가중치를 보면 많은 것이 설명됩니다. 초록이 전체의 70% 넘게 차지하고, 파랑은 7%를 겨우 넘습니다. 그래서 순수한 파랑 #0000ff의 휘도는 0.0722뿐이고, 빨강과 초록을 더한 순수한 노랑은 0.9278입니다. 명세에는 작은 역사도 남아 있습니다. 2021년 5월 전에는 기준값이 옛 문서에서 옮겨 온 0.03928로 적혀 있었습니다. 지금은 0.04045로 바로잡혔고, WCAG는 이 변경이 결과에 실제로 영향을 주지 않는다고 적습니다.

대비율

대비율은 두 휘도를 비교합니다. (L1 + 0.05) / (L2 + 0.05)이고, L1은 밝은 쪽, L2는 어두운 쪽 색의 휘도입니다. 0.05는 눈에 늘 들어오는 약간의 주변 빛을 뜻하고, 검정에서도 비율이 무한대가 되지 않게 해 줍니다. 대비율은 같은 색끼리의 1:1부터 검정과 흰색의 21:1까지입니다. (1 + 0.05) / (0 + 0.05) = 21입니다. 흰 바탕 위 #767676은 휘도가 0.1812이므로 대비율은 1.05 / 0.2312 = 4.54입니다.

2단원의 파랑 #2273c3, 즉 rgb(34 115 195)로 계산 전체를 해 보겠습니다. 255로 나누면 채널은 0.1333, 0.4510, 0.7647입니다. 셋 다 0.04045보다 크므로 거듭제곱 식을 거쳐 0.0160, 0.1714, 0.5457이 됩니다. 가중치를 곱하면 빨강에서 0.0034, 초록에서 0.1226, 파랑에서 0.0394이고, 합한 휘도는 0.1654입니다. 흰색과의 대비율은 1.05 / 0.2154 = 4.87이라 흰 페이지의 본문 글자로 AA를 통과합니다. 검정과는 0.2154 / 0.05 = 4.31로 조금 모자랍니다.

회색 여덟 가지 위의 흰 글자와, 회색마다 흰색과의 대비율입니다. 어두운 회색만 4.5:1에 닿습니다.

기준값

WCAG 2.2는 대비율을 통과와 미달의 선으로 나눕니다. AA 수준인 성공 기준 1.4.3은 보통 글자에 4.5:1 이상, 큰 글자에 3:1 이상을 요구합니다. 큰 글자는 18포인트 이상, 또는 굵게 14포인트 이상입니다. WCAG는 흔한 본문 글꼴에서 이것이 대략 1.5 em, 굵게 1.2 em이라고 적습니다. AAA 수준인 1.4.6은 기준을 7:1과 4.5:1로 올립니다. 1.4.11은 버튼, 입력 칸, 아이콘처럼 사람이 알아봐야 하는 부분에 3:1을 요구합니다. 흰 바탕 위 순수한 빨강 #ff0000은 4.00:1이라 큰 제목에는 괜찮지만 본문에는 미달입니다. 흰 바탕 위 파랑 #0000ff는 8.59:1로 모든 기준을 통과합니다.

공식에서 쓸모 있는 사실이 하나 더 나옵니다. 휘도가 약 0.179인 색은 흰색과의 대비와 검정과의 대비가 똑같이 약 4.58:1입니다. 그보다 어두우면 흰 글자가, 밝으면 검은 글자가 더 잘 읽힙니다. 모형 아래 칸은 두 대비율을 모두 보여 주고 더 나은 쪽을 알려 줍니다.

대비율 = (L1 + 0.05) / (L2 + 0.05). 본문은 4.5:1, 큰 글자는 3:1, AAA 본문은 7:1이 필요합니다.

AA 보통 글자(1.4.3)4.5:1
AA 큰 글자(1.4.3)3:1
AAA 보통 글자(1.4.6)7:1
아이콘·입력 칸 테두리(1.4.11)3:1
큰 글자의 기준18포인트, 또는 굵게 14포인트
흰 바탕 위 검정21:1, 최댓값
핵심 정리
  • 상대 휘도는 채널마다 선형으로 바꾼 뒤 0.2126 R + 0.7152 G + 0.0722 B로 구합니다.
  • 대비율 = (L1 + 0.05) / (L2 + 0.05)이고, 1:1부터 21:1까지입니다.
  • AA는 본문 4.5:1, 큰 글자와 화면 부품 3:1, AAA는 본문 7:1입니다.
  • 흰 바탕 위 #767676은 4.54:1로 통과, #ff0000은 4.00:1로 본문 기준 미달입니다.
  1. 흰 바탕 위 검정의 대비율은?
  2. 가장 낮은 대비율은?
  3. 흰 바탕 위 #767676의 대비율을 소수 둘째 자리까지 쓰세요. (휘도는 0.1812)
  4. WCAG 2.2 AA가 보통 본문 글자에 요구하는 최소 대비율은?
  5. 흰 바탕 위 순수한 빨강 #ff0000의 대비율을 소수 둘째 자리까지 쓰세요. (휘도 0.2126)
  6. 흰 바탕 위 빨강 #ff0000(4.00:1)은 어디에 쓸 수 있습니까?
    • 큰 제목에만
    • AA 본문
    • AAA 본문
    • 아무 데도 못 쓴다
  7. 상대 휘도에서 가중치가 가장 큰 채널은?
    • 초록
    • 빨강
    • 파랑
    • 모두 같다
  8. WCAG에서 큰 글자로 치는 것은?
    • 18포인트, 또는 굵게 14포인트
    • 굵게 12포인트
    • 보통 16 px
    • 모든 제목
  9. 아이콘과 입력 칸 테두리에 WCAG가 요구하는 대비율은(1.4.11)?
  10. 흰 바탕 위 노랑 #ffff00 글자의 대비율은 약 1.07:1입니다. 무슨 뜻입니까?
    • 거의 읽을 수 없다
    • AA 통과
    • AAA 통과
    • 가장 좋은 조합이다
  11. 2021년 5월 전 WCAG 휘도 공식은 0.04045 대신 어떤 기준값을 썼습니까?
    • 0.03928
    • 0.05
    • 12.92
    • 0.055
이 과정의 출처 (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