명도 대비 검사
명도 대비 검사는 전경색(글자색)과 배경색을 지정해 그 **명도 대비(콘트라스트 비율)**를 실시간으로 계산하고, WCAG(Web Content Accessibility Guidelines) 2.1 / 2.2 의 접근성 기준을 만족하는지 판정하는 도구입니다. 콘트라스트 비율 검사 결과는 4.5:1 처럼 크게 표시되어, 배색 검사 도구로서 배색의 접근성을 한눈에 확인할 수 있습니다.
미리보기
일반 크기 텍스트가 보이는 방식을 확인할 수 있습니다.
큰 텍스트가 보이는 방식
UI 구성요소 예시WCAG 2.1 / 2.2 판정
| 구분 | AA? | AAA? |
|---|---|---|
| 일반 텍스트 | 통과4.5:1 | 통과7:1 |
| 큰 텍스트(18pt / 14pt 굵게 이상) | 통과3:1 | 통과4.5:1 |
| UI 구성요소·그래픽 | 통과3:1 | 규정 없음 |
색각 이상 시뮬레이션?
보이는 방식은 Brettel 1997 법에 기반한 근사이며, 개개인이 실제로 보는 방식을 보장하지는 않습니다.
계산은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 색이 외부 서버로 전송되는 일은 없습니다.
관련 도구
컬러 피커
이미지에서 색을 추출해 HEX·RGB·HSL 컬러 코드를 얻는 무료 컬러 피커입니다. 돋보기로 확대해 픽셀 단위로 정확히 색을 고르고 팔레트를 내보낼 수 있습니다. 가입 없이 바로 사용할 수 있습니다.
- 디자인 & 색상
- 생산성
색상 팔레트 추출
이미지를 업로드하면 주요 색상(대표 색상)을 자동으로 추출해 팔레트를 만드는 무료 도구. HEX/RGB/HSL 확인, 색상별 비율 표시, 4~12색 조절, CSS 변수·SCSS·Tailwind·JSON 내보내기 지원. 이미지는 서버로 전송되지 않고 브라우저만으로 완결됩니다.
- 추출
- 디자인 & 색상
색상 팔레트 생성기
베이스 컬러를 한 가지만 고르면 보색·유사색·트라이어드 등 색채 이론에 기반한 색상 팔레트를 자동으로 만들어 주는 무료 배색 생성기입니다. CSS 변수·Tailwind·SCSS·JSON 형식으로 내보낼 수 있고 명암 대비의 기준도 확인할 수 있습니다. 웹 브라우저만으로 완결됩니다.
- 생성기
- 디자인 & 색상
컬러 코드 변환
HEX·RGB·HSL·HSV·OKLCH 컬러 코드를 서로 변환하는 무료 도구입니다. 투명도(RGBA·8자리 HEX·HSLA)와 CMYK 참고값도 지원하며, 입력한 색을 모든 형식으로 한 번에 변환해 원클릭 복사할 수 있습니다. 웹 브라우저만으로 완결됩니다.
- 변환
- 디자인 & 색상
CSS 그래디언트 생성기
색·방향·컬러 스톱을 GUI 로 조작해 CSS 그래디언트를 자동 생성하는 무료 도구입니다. 선형·방사형·원뿔형(conic) 그라데이션과 투명도 조정을 지원하고 CSS 변수·Tailwind·SCSS 형식 내보내기와 공유 URL 도 제공합니다. 복사해서 바로 쓸 수 있고 웹 브라우저만으로 완결됩니다.
- 생성기
- 개발
- 디자인 & 색상
CSS 그림자 생성기
box-shadow 생성기로 CSS 그림자(box-shadow·drop-shadow)를 슬라이더 조작만으로 실시간 생성합니다. 다중 레이어와 inset(안쪽), 뉴모피즘·롱 섀도우·글로우 프리셋을 지원하고 CSS·CSS 변수·Tailwind·SCSS 코드로 출력하며 공유 URL도 제공합니다. 웹 브라우저만으로 완결됩니다.
- 생성기
- 디자인 & 색상
명도 대비 검사 도구란?
명도 대비 검사는 전경색(글자색)과 배경색을 지정해 그 **명도 대비(콘트라스트 비율)**를 실시간으로 계산하고, WCAG(Web Content Accessibility Guidelines) 2.1 / 2.2 의 접근성 기준을 만족하는지 판정하는 도구입니다. 콘트라스트 비율 검사 결과는 4.5:1 처럼 크게 표시되어, 배색 검사 도구로서 배색의 접근성을 한눈에 확인할 수 있습니다.
색은 HEX 코드 텍스트 입력은 물론, 컬러 피커나 지원 브라우저에서는 스포이트(EyeDropper API)로 화면 위의 색을 직접 가져와 지정할 수 있습니다. 판정은 "일반 텍스트", "큰 텍스트(18pt / 14pt 굵게 이상)", "UI 구성요소·그래픽"의 3 가지 구분에 대해 AA·AAA 각각의 통과 여부를 표시합니다. 일반 텍스트의 AA 는 4.5, AAA 는 7, 큰 텍스트의 AA 는 3, UI 구성요소는 3 이 기준(aa 콘트라스트 비율 / wcag 콘트라스트 비율)입니다.
또한 기준에 미치지 못할 경우에는 명도를 조정해 기준을 만족하는 가장 가까운 색을 자동으로 제안하며, 클릭 한 번으로 적용할 수 있습니다. 색각 이상 시뮬레이션에서는 P형·D형·T형에서 보이는 방식을 나란히 확인할 수 있고, APCA(WCAG 3.0 에서 채택이 예상되는 지각 기반 지표)의 Lc 값도 참고용으로 함께 표시합니다. 지정한 배색에서 실제로 보이는 방식을 보여 주는 미리보기도 갖추고 있습니다.
계산은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 색이 외부 서버로 전송되는 일은 없습니다. 회원가입이 필요 없이 바로 사용할 수 있습니다.
사용 방법
- 전경색(글자색)과 배경색을 HEX 입력·컬러 피커·스포이트 중 하나로 지정합니다.
- 콘트라스트 비율이 자동으로 계산되어 크게 표시됩니다.
- WCAG 의 3 가지 구분(일반 텍스트·큰 텍스트·UI 구성요소)에 대해 AA·AAA 의 통과 여부를 확인합니다.
- 기준에 미치지 못할 경우 제안된 통과 색을 클릭해 전경색·배경색에 적용할 수 있습니다.
- 미리보기에서 실제로 보이는 방식을 확인하고, 색각 이상 시뮬레이션으로 P형·D형·T형에서 보이는 방식도 비교합니다.
- 필요에 따라 교체 버튼으로 전경색과 배경색을 서로 바꿀 수 있습니다.
활용 사례
- 웹 사이트나 앱의 글자색·배경색이 WCAG 접근성 기준을 만족하는지 확인하고 싶은 제작자.
- 디자인 시안의 배색이 콘트라스트 비율 4.5 이상인지 공개 전에 확인하고 싶은 디자이너.
- 버튼이나 아이콘 같은 UI 구성요소가 3:1 을 만족하는지 확인하고 싶은 프런트엔드 엔지니어.
- 색각 이상이 있는 사용자도 구별하기 쉬운 배색인지 시뮬레이션으로 확인하고 싶은 사용자.
- 기준에 미달한 배색을 비슷한 색감을 유지한 채 기준을 만족하는 색으로 빠르게 조정하고 싶은 사용자.
- APCA 같은 새로운 지표도 참고하면서 배색의 접근성을 검토하고 싶은 사용자.
주의사항
- 콘트라스트 비율은 WCAG 2.x 의 정의(상대 휘도로부터 (L1+0.05)/(L2+0.05) 로 산출)에 기반합니다. 판정 기준은 일반 텍스트 AA 4.5 / AAA 7, 큰 텍스트 AA 3 / AAA 4.5, UI 구성요소·그래픽 3 입니다.
- "큰 텍스트"는 18pt(약 24px) 이상, 또는 14pt(약 18.66px) 이상의 굵은 글씨를 가리킵니다.
- UI 구성요소·그래픽은 WCAG 1.4.11 에서 3:1 만 규정되어 있으며 AAA 기준은 없습니다(표에서는 "규정 없음"으로 표시합니다).
- APCA(Advanced Perceptual Contrast Algorithm)는 WCAG 3.0 초안에서 참조되는 지표로, 이 도구에서는 참고값(Lc)으로 함께 표시합니다. 정식 통과 여부 판정은 WCAG 2.x 의 비율로 진행하시기 바랍니다.
- 색각 이상 시뮬레이션은 Brettel 1997 법에 기반한 근사이며, 중증도는 최대(2색각)로 계산합니다. 실제로 보이는 방식은 개인차가 있으며, 이를 보장하지는 않습니다.
- 계산은 모두 브라우저 안에서 완결되며, 입력한 색은 외부로 전송되지 않습니다.