색상 변환기와 대비 검사기
HEX, rgb(), hsl() 또는 CSS 색 이름 — 네 가지 모두 인식합니다.
색조
같은 색상의 열한 단계 명도. 클릭하면 현재 색이 됩니다.
명도 대비
두 색 사이의 비율을 WCAG가 정의한 방식대로 계산합니다.
| 조합 | 비율 | AA (4.5:1) | AAA (7:1) |
|---|
이 도구가 하는 일
색을 표기법 사이에서 바꾸는 일은 다섯 줄짜리 산술입니다. 더 어려운 질문은 그 색의 글씨를 실제로 읽을 수 있느냐이고, 그 답에는 대부분의 도구가 건너뛰는 단계가 필요합니다. 이 페이지에는 둘 다 있으며, 여러분이 입력한 그 색을 그대로 씁니다.
사용 방법
- 1 어떤 표기법으로든 색을 입력하거나 색상 선택기를 쓰세요.
- 2 필요한 표기를 복사하거나, 색조를 눌러 그 색으로 옮기세요.
- 3 대비 표를 읽으세요. 미달로 표시된 조합은 누군가에게는 읽기 어렵다는 뜻입니다.
같은 색상이 HSL에서 달라 보이는 이유
HSL은 정수 도수와 정수 퍼센트로 반올림하기 때문에, HSL로 바꿨다가 되돌리면 처음의 바이트 값이 항상 돌아오지는 않습니다. 그래서 여기 표시되는 HEX는 언제나 입력한 값에서 나오며 HSL을 거친 왕복 결과를 쓰지 않습니다. 그러지 않으면 클릭할 때마다 한 칸씩 밀립니다.
대비 숫자가 뜻하는 것
비율은 같은 색 둘의 1:1부터 순백 위 순흑의 21:1까지 나옵니다. 아래 기준값이 이 도구가 판정에 쓰는 값입니다.
| 4.5:1 | 일반 본문, WCAG AA |
| 3:1 | 큰 글씨나 굵은 글씨, WCAG AA |
| 7:1 | 일반 본문, WCAG AAA |
| 21:1 | 가능한 최고 비율: 흰 바탕에 검은 글씨 |
대부분의 도구가 건너뛰는 단계
상대 휘도는 채널 값들의 평균이 아닙니다. 각 채널을 먼저 선형화해야 합니다. HEX 코드의 숫자는 감마로 부호화되어 있고 빛의 양에 비례하지 않기 때문입니다. 이 단계를 건너뛰어도 비율은 그럴듯한 숫자로 나오지만 틀린 값이며, 오차는 인터페이스 색이 대부분 놓여 있는 중간 톤에서 가장 큽니다.
대비는 필요조건이지 충분조건이 아닙니다
어떤 조합이 4.5:1을 통과하고도 나쁜 선택일 수 있습니다. 색각 이상은 비율이 높아도 어떤 조합을 구별할 수 없게 만들고, 의미를 색 하나에만 실어서는 안 됩니다. 여기서의 통과는 최소선을 넘었다는 뜻이지 디자인에 대한 판정이 아닙니다.