색상 대비 검사기
큰 텍스트 샘플
이 대비에서 일반 본문 텍스트가 어떻게 보이는지 확인하세요.
대비 비율
4.48:1
AA · 일반 텍스트✕
AAA · 일반 텍스트✕
AA · 큰 텍스트✓
AAA · 큰 텍스트✕
제안하는 텍스트 색상:#717171
관련 외부 도구
일부 링크는 제휴 링크입니다.
관련 도구
색상 변환HEX·RGB·HSL·HSV·RGBA를 한 화면에서 상호 변환. 값 하나만 바꿔도 전부 연동, 원클릭 복사, 투명도·WCAG 대비 지원.배색 생성기기준 HEX에서 보색·유사색·트라이어드 등 조화로운 컬러 팔레트를 자동 생성. 색상을 잠그고 나머지를 재생성하며 CSS 변수·Tailwind·JSON으로 내보내기.그라데이션 생성기여러 색상 정지점으로 선형·방사형·원뿔형 CSS 그라데이션을 만드세요. 각도·형태·중심을 조정하고 background CSS 또는 Tailwind 값을 원클릭으로 복사.이미지 색상 추출기이미지를 업로드하지 않고 브라우저에서 주요 색상 팔레트를 추출합니다. 각 색상의 HEX, RGB와 비율(%)을 확인하고 CSS/JSON으로 내보내세요.
텍스트가 배경에 대해 읽기 쉬운지 확인합니다. 텍스트 색상과 배경 색상을 입력하면 WCAG 대비 비율과 일반 텍스트 및 큰 텍스트에 대한 AA, AAA 레벨 통과 여부를 실시간 미리보기와 함께 확인할 수 있습니다. 불합격 시 도구가 비슷하지만 통과하는 색상을 제안합니다. 모든 것이 브라우저에서 실행됩니다.
사용 방법
- 텍스트 색상을 선택합니다.
- 배경 색상을 선택합니다.
- 대비 비율과 AA / AAA 결과를 확인합니다.
- 불합격이면 통과하는 제안 색상을 적용합니다.
WCAG 레벨의 의미
대비 비율은 1:1(대비 없음)에서 21:1(흰 배경에 검정)까지 범위가 있습니다. 일반 텍스트의 경우 AA는 최소 4.5:1, AAA는 7:1을 요구합니다. 큰 텍스트의 경우 AA는 3:1, AAA는 4.5:1을 요구합니다. 최소한 AA를 충족하면 저시력 사용자가 콘텐츠를 편안하게 읽는 데 도움이 됩니다.
주요 기능
정확한 대비 비율
두 색상 간의 정확한 WCAG 비율을 확인합니다.
AA & AAA 결과
일반 텍스트와 큰 텍스트 모두에 대한 합격/불합격을 한 번에 확인합니다.
실시간 미리보기
선택한 색상으로 실제 텍스트를 보여주어 가독성을 직접 판단할 수 있습니다.
합격 색상 제안
대비가 너무 낮으면 AA를 충족하는 근접 색상을 제안합니다.
개인정보 보호 설계
모든 것이 브라우저에서 계산됩니다. 아무것도 업로드되지 않습니다.
주요 활용 사례
접근성 UI
인터페이스 텍스트가 접근성 요건을 충족하는지 확인합니다.
브랜드 색상
브랜드 색상 조합이 텍스트로서 읽기 쉬운지 확인합니다.
버튼 및 링크
색상 버튼과 링크의 레이블이 읽기 쉬운지 검증합니다.
문서 및 슬라이드
색상 배경에서 텍스트가 충분히 눈에 띄는지 확인합니다.
참고사항 및 팁
- 큰 텍스트는 약 18pt 이상이거나 14pt 굵게 이상을 의미하며 대비 요건이 더 낮습니다.
- 의미 전달을 색상에만 의존하지 마세요. 텍스트나 아이콘과 함께 사용하세요.
- 대비는 가독성의 한 요소이며 글꼴 크기와 간격도 중요합니다.
- 모든 처리는 기기에서 실행됩니다. 서버로 아무것도 전송되지 않습니다.
자주 묻는 질문
- 대비 비율이란 무엇인가요?
- 두 색상의 밝기 차이를 1:1(동일)에서 21:1(흰 배경에 검정)까지 측정한 값입니다. 값이 높을수록 읽기 쉽습니다.
- AA와 AAA의 차이는 무엇인가요?
- AA는 표준 접근성 레벨(일반 텍스트 4.5:1)이고, AAA는 더 엄격한 레벨(7:1)로 가독성이 향상됩니다.
- 큰 텍스트의 기준은 무엇인가요?
- 대략 18pt 보통 또는 14pt 굵게 이상입니다. 큰 텍스트는 대비 요건이 더 낮습니다(AA의 경우 3:1).
- 제안 색상이란 무엇인가요?
- 텍스트 색상이 AA를 통과하지 못하면 도구가 배경에 대해 4.5:1을 충족할 때까지 색상을 밝히거나 어둡게 조정하여 그 색상을 제안합니다.
- 무언가가 업로드되나요?
- 아니요. 검사는 완전히 브라우저에서 실행됩니다. 서버로 아무것도 전송되지 않습니다.