CSS 색상을 변환하고 글자 대비 검증하기

문제 상황

색상 하나도 디자인 파일, CSS, 반투명 레이어를 합성한 화면에서 서로 다르게 보일 수 있습니다. 기계적 변환만으로는 반올림한 8비트 값의 정밀도가 충분한지, 넓은 색역 원본을 보존해야 하는지, 인쇄소의 종이와 ICC 프로파일이 잉크를 어떻게 분리할지 결정할 수 없습니다. 신뢰할 수 있는 절차는 CSS용 sRGB 출력과 디자인 참고 데이터를 구분하고, 글자 뒤에 실제 표시되는 불투명 배경을 측정하며, 변환된 색상칩 하나가 아니라 제품의 실제 상태에서 결과를 검증합니다.

이럴 때 사용하세요

• 디자인 토큰을 알파 채널을 유지한 채 HEX, rgb(), hsl() 사이에서 옮겨야 할 때
• 단색 또는 반투명 인터페이스 표면에서 흰색·검은색 글자의 WCAG 대비를 1차 검사할 때
• 서로 다른 CSS 색상 표기를 하나의 문서화된 토큰 형식으로 통합할 때
• 디자인 도구의 HSV 값을 CSS 구현용 sRGB 참고값으로 명확히 표시해 전달할 때
• 웹 색상이 인쇄 핸드오프로 넘어가며 프로파일 없는 CMYK 근사값의 한계를 기록해야 할 때

단계

1. 1단계

   토큰, 상태, 바탕을 목록화

   원본 색상과 hover, focus, disabled, selected, error, dark mode 변형을 모읍니다. 반투명 레이어 아래 실제 배경을 모두 기록하고, 하나의 단색으로 나타낼 수 없는 이미지와 그라데이션도 표시합니다.

2. 2단계

   원본 구문과 색공간 분류

   각 값이 HEX, CSS RGB, CSS HSL, 이름색, 넓은 색역 함수, 디자인 전용 데이터 중 무엇인지 확인합니다. 미지원 값과 넓은 색역 원본을 sRGB 전용 절차로 조용히 강제 변환하지 말고 보존합니다.

3. 3단계

   표준 sRGB 검토값 생성

   지원하는 값을 변환하고 HEX, RGB, HSL 출력을 비교합니다. 알파를 명시적으로 유지하고 색역 잘림이나 바이트 반올림을 기록하며, HSV와 CMYK 문자열은 CSS가 아닌 참고 데이터로 표시합니다.

4. 4단계

   알파를 실제 배경에 합성

   글자 대비를 평가하기 전에 반투명 색상을 실제 사용할 표면에 합성합니다. 도구는 흰색과 검은색 바탕을 명시적으로 제공하며, 다른 바탕은 애플리케이션이나 별도 접근성 검사에서 재현합니다.

5. 5단계

   올바른 WCAG 기준 적용

   반올림 전 비율을 사용합니다. WCAG 2.2 AA에서 일반 글자는 최소 4.5:1, 큰 글자는 3:1입니다. 큰 글자로 분류하기 전에 실제 글꼴 크기와 굵기를 확인하고 경계값 실패를 반올림해 통과시키지 않습니다.

6. 6단계

   렌더링된 모든 상태 검증

   브라우저에서 기본, hover, focus, active, selected, disabled, validation, 테마 상태를 검사합니다. 포커스 표시, 비텍스트 컨트롤, 그라데이션, 이미지, 색상에만 의존한 정보도 함께 검토합니다.

7. 7단계

   웹 토큰과 인쇄 변환 분리

   원본 값과 표준 sRGB 값을 인쇄 절차에 전달합니다. 인쇄소 ICC 프로파일, 용지, 잉크 한도, 검정 생성, 렌더링 의도, 교정 절차를 사용하고 프로파일 없는 CMYK 근사값을 인쇄 완성 사양으로 올리지 않습니다.

예시

토큰: rgb(37 99 235 / 82%)
바탕: 흰색
후보 글자: 흰색 또는 검은색

표준 HEX: #2563EBD1
합성 배경: #4C7FEF
흰색 글자: 3.76:1, 일반 AA 실패
검은색 글자: 5.59:1, 일반 AA 통과
다음: 브라우저에서 실제 컴포넌트 상태와 글꼴 검증

흔한 실수

자주 묻는 질문