컨트라스트 대비 확인기
브라우저 처리컨트라스트 대비 확인기는 글자색과 배경색 두 가지를 입력하면 둘 사이의 명도 대비(contrast ratio)를 계산해 주는 도구입니다. 결과는 4.5:1, 7:1 같은 숫자로 표시되며, 이 값이 웹 접근성 기준(WCAG)의 AA·AAA 등급을 통과하는지 함께 알려 줍니다.
도구 실행입력 후 결과 확인
컨트라스트 대비 확인기 샘플 실행
브라우저 처리
컨트라스트 대비 확인기는 글자색과 배경색 두 가지를 입력하면 둘 사이의 명도 대비(contrast ratio)를 계산해 주는 도구입니다. 결과는 4.5:1, 7:1 같은 숫자로 표시되며, 이 값이 웹 접근성 기준(WCAG)의 AA·AAA 등급을 통과하는지 함께 알려 줍니다.
샘플 결과
컨트라스트 대비 확인기 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
컨트라스트 대비 확인기 사용 안내
컨트라스트 대비 확인기는 글자색과 배경색 두 가지를 입력하면 둘 사이의 명도 대비(contrast ratio)를 계산해 주는 도구입니다. 결과는 4.5:1, 7:1 같은 숫자로 표시되며, 이 값이 웹 접근성 기준(WCAG)의 AA·AAA 등급을 통과하는지 함께 알려 줍니다.
글자가 배경과 충분히 구분되지 않으면 시력이 약한 사용자나 밝은 야외 화면에서는 내용을 읽기 어렵습니다. 디자인 단계에서 색 조합의 대비를 미리 확인하면, 보기에는 예뻐도 실제로는 읽기 힘든 색을 걸러낼 수 있습니다.
사용 방법
- 검사할 글자색(전경색)을 색상 선택기나 HEX 코드 입력으로 지정합니다.
- 글자가 올라갈 배경색을 같은 방식으로 입력합니다.
- 화면에 표시되는 대비 비율 숫자와 AA·AAA 등급 통과 여부를 확인합니다.
- 기준에 미치지 못하면 두 색 중 하나를 더 어둡거나 밝게 조정해 수치가 4.5:1 이상이 되도록 맞춥니다.
이럴 때 사용하세요
- 컨트라스트 대비 확인기: 값을 조정하며 미리보기와 생성 코드를 비교할 때 적합합니다.
- 컨트라스트 대비 확인기 결과를 확인한 뒤 색상 코드 변환 또는 컬러 믹서에서 다음 작업을 이어갈 수 있습니다.
문제가 생겼을 때
컨트라스트 대비 확인기: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
컨트라스트 대비 확인기: 미리보기와 실제 화면이 다름
컨트라스트 대비 확인기에서 부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
활용 팁
- 본문 텍스트는 보통 4.5:1, 큰 글씨(굵은 18.66px 또는 일반 24px 이상)는 3:1을 통과하면 AA 기준을 만족하므로, 글자 크기에 따라 허용되는 색 범위가 달라집니다.
- 버튼이나 배지처럼 색 위에 글자가 올라가는 요소는 디자인을 확정하기 전에 이 도구로 대비를 한 번 확인하면 가독성 문제를 미리 막을 수 있습니다.
- 브랜드 색이 기준을 아슬아슬하게 통과하지 못할 때는 명도만 조금 조정해도 등급을 넘기는 경우가 많으니 색조는 유지한 채 밝기만 미세하게 바꿔 보세요.