색상 값을 변환하고 팔레트와 WCAG 대비를 확인하세요.
입력은 이 브라우저에서 처리됩니다.
개발에 가져다 쓸 수 있는 기본 예제입니다. 표시된 환경에서 실행하세요.
Node.js 22+ · ES module (.mjs)
현재 입력 반영은 코드에 사용된 항목에만 적용됩니다. 파일 입력은 예제에 포함하지 않습니다.
필요한 패키지 설치
function luminance(hex) {
if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error("Use #RRGGBB");
const rgb = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255)
.map(v => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
return rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
}
const a = luminance("#ffffff"), b = luminance("#101415");
const ratio = (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
console.log({ ratio, normalTextAA: ratio >= 4.5, largeTextAA: ratio >= 3 });#b6ebbd와 #101415를 비교해 일반 텍스트의 AA·AAA 대비 기준을 확인합니다.
HEX·RGB·HSL을 변환합니다. 대비 계산은 불투명한 sRGB 색상 두 개를 기준으로 합니다.
WCAG AA 일반 텍스트는 4.5:1, 큰 텍스트는 3:1이 필요합니다.
팔레트는 기준색의 명도를 바꾼 시작점입니다. 각 조합의 가독성을 따로 확인하세요.
불투명 HEX·RGB·HSL; WCAG 2.x 대비 공식
입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.