색상 피커·대비 체크
글자색·배경색을 고르고 WCAG 대비율과 AA/AAA 통과 여부를 바로 봅니다. 미리보기와 CSS 조각을 복사할 수 있으며, 계산은 이 기기에서만 이뤄집니다.
- 브라우저에서 처리
- 가입 없음
- 설치 없음
글자 색 (전경)
배경 색
가독성 미리보기
본문처럼 작은 글씨도 읽기 쉬운지 확인해 보세요.
18.11: 1
AA 본문
통과
AA 큰글씨
통과
AAA 본문
통과
AAA 큰글씨
통과
WCAG 2.x 대비율 기준입니다. 색맹·환경·폰트까지 보장하지는 않으니 참고용으로만 쓰세요.
CSS 조각
color: #14161a; background-color: #ffffff;
사용법
- 글자색과 배경색을 피커·HEX·RGB로 맞춥니다.
- 미리보기와 대비율·AA/AAA 결과를 확인합니다.
- 미달이면 후보 색을 적용하거나 CSS 조각을 복사합니다.
알아둘 점 · 더보기
버튼·본문 글씨가 배경과 잘 구분되는지 숫자로 확인할 때 씁니다. 색을 고르면 대비율과 통과 여부가 바로 나옵니다.
이런 때 웹·포스터에서 글씨 가독성을 빠르게 점검할 때 · 브랜드 색이 본문 대비에 부족한지 볼 때
- — WCAG 2.x 대비율 참고용입니다. 색맹·조명·폰트까지 보장하지 않습니다.
- — 큰 글씨 기준은 대략 18pt 이상 또는 14pt bold입니다.
- — 디자인 시안과 실제 렌더링은 다를 수 있으니 최종 화면에서도 한 번 더 보세요.
궁금한 점
AA와 AAA 차이가 뭔가요?
본문 기준 AA는 대비율 4.5:1 이상, AAA는 7:1 이상입니다. 큰 글씨는 기준이 조금 낮습니다.
후보 색은 어떻게 고르나요?
지금 색의 밝기만 조금씩 바꿔 AA 본문(4.5:1)에 닿는 가까운 값을 찾습니다. 완벽한 브랜드 매칭은 아닙니다.
색맹 시뮬레이션도 되나요?
아니요. 대비율 계산과 미리보기만 제공합니다.