세 가지 실험
- 본문: 흰 배경에 #777777을 넣어보세요. 약 4.48:1로 일반 글씨 AA에 조금 못 미칩니다. 추천 색으로 경계를 넘어보세요.
- 어두운 화면: 글자 #FFFFFF, 배경 #000000은 21:1입니다. 색 바꾸기를 해도 비율은 같습니다.
- 큰 제목: 글자 #767676, 배경 #FFFFFF에서 크기 슬라이더를 움직여 보세요. 비율은 유지되고 크기 분류만 달라집니다.
COLOR, WITH CLARITY
좋은 색을 넘어,
잘 읽히는 색으로.
글자와 배경을 한 쌍으로. 대비 수치와 실제 한국어 화면을 함께 확인하세요.
01 색상 고르기
#을 포함하거나 생략한 3자리·6자리 HEX
큰 글씨 기준: 보통 24px 이상 또는 굵게 18.67px 이상.
02 한국어 미리보기 입력한 색이 그대로 반영됩니다
오늘의 작은 발견
읽는 순간,
명료해지는 화면.
아침 햇살처럼 편안하게 읽히는 문장을 만들어요. 길을 안내하는 버튼, 중요한 숫자 123, 그리고 일상의 작은 설명까지.
자세히 보기 →샘플 텍스트
CONTRAST RATIO
— : 1
03 기준과 대조하기
표시는 소수 둘째 자리까지, 판정은 반올림 전 값으로 합니다.
지금 배경에 맞는 AA 글자색
현재 색상을 확인합니다.
FIELD NOTES
화면을 만드는 작은 기준
어떻게 계산하나요?
sRGB 채널을 선형 값으로 변환한 뒤 상대 휘도를 구합니다. 밝은 색의 휘도 + 0.05를 어두운 색의 휘도 + 0.05로 나누면 1~21의 비율이 나옵니다.
개선 제안은 원래 글자색에서 검정·흰색 방향으로 섞은 후보 중 4.5:1을 충족하는 가까운 후보를 찾습니다. 색상 공간 전체의 최적 해를 보장하지는 않습니다.
수치 밖의 읽힘도 살피세요
불투명한 단색 두 개만 계산합니다. 투명도, 그라데이션, 사진 배경, 모니터·조명 차이는 반영하지 않습니다. 가는 글꼴은 수치를 통과해도 읽기 어려울 수 있습니다.
이 도구의 판정은 글자 대비 항목에만 해당하며 웹사이트 전체의 접근성 인증이 아닙니다. 키보드 조작과 대체 텍스트도 별도로 확인하세요.
기준 출처
W3C WCAG 2.1 — Contrast (Minimum) · Contrast (Enhanced)
기준 확인일: 2026년 10월 28일. 색상 값은 브라우저 메모리에서만 처리하며 서버에 전송하거나 저장하지 않습니다. 광고·분석 추적 코드를 사용하지 않습니다. 호스팅 사업자는 서비스 제공·보안을 위한 접속 정보를 처리할 수 있습니다.