기타
명도 대비 검사
명도 대비 검사는 전경색(글자색)과 배경색을 지정해 그 **명도 대비(콘트라스트 비율)**를 실시간으로 계산하고, 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 법에 기반한 근사이며, 개개인이 실제로 보는 방식을 보장하지는 않습니다.
계산은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 색이 외부 서버로 전송되는 일은 없습니다.
관련 도구
QR 코드 생성
URL / 주소록 / Wi-Fi / 메일 / 이벤트 / 지리 좌표 / SMS / 전화 / 텍스트를 QR 코드 이미지로 변환합니다. 크기, 형식, 색상, 로고를 선택할 수 있습니다. 브라우저만으로 완결됩니다.
추첨 / 제비뽑기
텍스트 목록 또는 숫자 범위에서 무작위로 1~N개를 추첨합니다. 중복 없음, 릴 연출, 추첨 이력 저장에 대응합니다. 브라우저만으로 완결됩니다.
컬러 피커
이미지에서 색을 추출하여 컬러 코드를 얻습니다. 돋보기로 확대하면서 픽셀 단위로 가져올 수 있으며, HEX / RGB / HSL 전환과 팔레트 내보내기를 지원합니다. 브라우저만으로 완결됩니다.
컬러 코드 변환
HEX·RGB·HSL·HSV·OKLCH 컬러 코드를 상호 변환할 수 있는 무료 도구입니다. 투명도가 포함된 RGBA·8자리 HEX·HSLA에도 대응하며, 입력한 색을 모든 형식으로 한 번에 변환하고 원클릭으로 복사할 수 있습니다. CMYK 참고값도 표시합니다. 브라우저만으로 완결됩니다.
뽀모도로 타이머
25분의 집중과 5분의 휴식을 반복하는 무료 온라인 뽀모도로 타이머. 공부, 업무용 집중 타이머로서 원형 진행 표시, 알람음, 전체 화면, 항상 위에 표시되는 팝업 표시를 지원합니다. 브라우저만으로 완결됩니다.
단위 변환
길이·무게·온도·면적·부피·속도 등 다양한 단위를 서로 환산할 수 있는 무료 단위 변환 도구입니다. cm 인치 변환, 섭씨 화씨 온도 변환, 평과 제곱미터 등을 실시간으로 변환할 수 있습니다. 웹 브라우저만으로 완결됩니다.
명도 대비 검사 도구란?
명도 대비 검사는 전경색(글자색)과 배경색을 지정해 그 **명도 대비(콘트라스트 비율)**를 실시간으로 계산하고, 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색각)로 계산합니다. 실제로 보이는 방식은 개인차가 있으며, 이를 보장하지는 않습니다.
- 계산은 모두 브라우저 안에서 완결되며, 입력한 색은 외부로 전송되지 않습니다.