디지털 색상 체계(HEX, RGB, HSL, OKLCH)와 WCAG 웹 접근성 대비율

디지털 디스플레이 장치는 빛의 3원색인 빨강(Red), 초록(Green), 파랑(Blue) 서브픽셀을 가산 혼합하여 모든 색상을 합성합니다. 표준 트루컬러 시스템은 각 채널에 8비트(1바이트, 0~255)를 할당하여 총 24비트 색 심도를 구성하며, 이를 통해 16,777,216가지(256^3)의 고유한 색상을 표현할 수 있습니다.

웹에서 가장 널리 쓰이는 HEX 코드는 각 채널의 0255 값을 2자리의 16진수(00FF)로 축약한 표기법("#RRGGBB")입니다. 여기에 추가로 8비트 알파 투명도 채널을 덧붙인 8자리 HEX("#RRGGBBAA") 표기법도 최신 웹 표준에서 널리 지원됩니다.

RGB는 하드웨어 픽셀의 물리적 특성을 그대로 반영하지만, 사람이 머릿속으로 직관적인 색상을 조작하기에는 매우 어렵습니다. 예를 들어 버튼의 배경색 rgb(52, 152, 219)가 있을 때, 마우스 오버 시 살짝 어두운 톤을 만들려면 3개 채널 값을 일일이 복잡하게 재계산해야 합니다.

이를 해결한 HSL(Hue, Saturation, Lightness) 모델은 원통형 좌표계를 사용하여 인간의 인지 체계에 맞게 색을 재분류합니다:

• 색상(Hue, 0°~360°): 색상환에서의 각도 (0° 빨강, 120° 초록, 240° 파랑)
• 채도(Saturation, 0%~100%): 색상의 선명도 (0%는 무채색 회색, 100%는 순색)
• 명도(Lightness, 0%~100%): 밝기 (0%는 완전한 검정, 100%는 완전한 흰색)

HSL을 사용하면 단순히 명도(Lightness) 수치만 조정하여(hsl(204 70% 53%) -> hsl(204 70% 43%)) 호버/액티브 상태의 체계적인 디자인 시스템 팔레트를 손쉽게 구축할 수 있습니다.

널리 쓰이는 sRGB 기반 HSL에도 치명적인 결함이 있습니다. 바로 인간의 눈에 지각적으로 균일하지 않다(Not perceptually uniform)는 점입니다. HSL에서 순수 노란색(hsl(60, 100%, 50%))과 순수 파란색(hsl(240, 100%, 50%))은 명도가 둘 다 똑같이 50%이지만, 인간의 망막 세포 구조상 노란색이 파란색보다 압도적으로 밝게 느껴집니다.

이를 교정한 최신 표준이 OKLCH(Lightness, Chroma, Hue)입니다. OKLCH는 명도 값이 같으면 색상(Hue)이 달라도 사람 눈에 거의 같은 밝기로 느껴지도록 설계되어, 접근성이 보장된 동적 컬러 테마를 설계할 때 핵심적인 기술로 자리 잡았습니다. 또한 최신 OLED 화면의 광색역(Display P3) 색상까지 온전히 표현할 수 있습니다.

/* 차세대 CSS Color Level 4 표준 문법 */
:root {
  /* 지각적으로 완벽하게 균일한 밝기 제어 */
  --brand-primary: oklch(0.65 0.22 260);
  --brand-hover:   oklch(0.55 0.22 260); /* 색 왜곡 없이 정확한 10% 명도 감소 */
  --text-readable: oklch(0.98 0.01 260);
}

웹 콘텐츠 접근성 지침(WCAG 2.1)은 저시력자 및 색각 이상 사용자를 위해 텍스트와 배경 간의 최소 명도 대비율을 강제하고 있습니다:

• AA 등급 (최소 기준): 일반 텍스트 기준 4.5:1 이상, 큰 텍스트(18pt 이상 또는 14pt 볼드) 기준 3.0:1 이상을 만족해야 합니다.
• AAA 등급 (향상된 기준): 일반 텍스트 기준 7.0:1 이상, 큰 텍스트 기준 4.5:1 이상을 만족해야 합니다.

대비율 공식은 상대 휘도 L(검은색 0 ~ 흰색 1)을 기준으로 (L1 + 0.05) / (L2 + 0.05)로 계산됩니다.

디자인 시스템이나 CI/CD 린터에서 컴포넌트의 접근성을 자동 검증하기 위해 상대 휘도와 명도 대비율을 직접 산출하는 공식 함수입니다. DevUtils Color Picker 도구를 이용하면 HEX/RGB/HSL 변환과 동시에 실시간 WCAG 대비율 적합 여부를 즉각 확인할 수 있습니다.

// sRGB 채널 값을 선형화하여 상대 휘도(Luminance) 계산
function getLuminance(r, g, b) {
    const [lr, lg, lb] = [r, g, b].map(c => {
        const v = c / 255;
        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
}

// 두 RGB 색상 간의 WCAG 명도 대비율 산출
export function calculateContrastRatio(rgb1, rgb2) {
    const l1 = getLuminance(...rgb1);
    const l2 = getLuminance(...rgb2);
    const bright = Math.max(l1, l2);
    const dark = Math.min(l1, l2);
    return ((bright + 0.05) / (dark + 0.05)).toFixed(2);
}