WCAG AAA 색상 생성기

사용 방법

1. 고정 색상 입력

   색상 선택기나 3자리·6자리 HEX로 색상을 지정하고 배경색 또는 글자색 용도를 선택하세요.

2. 글자 크기 선택

   일반 텍스트는 7:1, 큰 텍스트는 4.5:1이 필요합니다. 큰 텍스트는 24 CSS px 이상이며 굵은 글씨는 18⅔ CSS px 이상이어야 합니다.

3. 후보 확인 및 복사

   미리보기 카드에서 배색을 비교한 후 HEX 값을 복사하세요. 실제 출력 HEX 색상으로 계산한 명암비를 반올림하기 전에 판정합니다.

판정 범위

불투명한 sRGB HEX 색상만 지원합니다. 투명도, 이미지, 그라데이션, 광색역 색상은 평가하지 않습니다. 후보는 일정한 색상 간격의 예시이며 모든 색상이나 지각적으로 가장 가까운 색상을 보장하지 않습니다. 명암비 충족만으로 WCAG AAA 전체를 준수하는 것은 아닙니다.

자주 묻는 질문

후보가 없는 이유는 무엇인가요?

중간 밝기의 일부 색상은 검정이나 흰색과 조합해도 7:1에 도달하지 못합니다. 이 색상을 고정하면 일반 텍스트 AAA 기준을 충족할 수 없습니다. 고정 색상을 변경하거나 크기 조건을 충족하는 큰 텍스트를 사용하세요.

어떤 WCAG 기준을 사용하나요?

WCAG 2.2 성공 기준 1.4.6 Contrast (Enhanced)를 사용합니다. 일반 텍스트는 7:1, 큰 텍스트는 4.5:1입니다. 참고: https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html

후보는 어떻게 선택하나요?

고정 색상의 색조에서 시작해 30도 간격으로 색조를 바꾸고 HSL 채도 65%에서 밝기를 탐색합니다. 조건에 맞는 검정·흰색도 포함하며 표시하는 모든 HEX 색상을 선택 기준으로 확인합니다.