콘트라스트 확인
텍스트 색과 배경색을 지정해 콘트라스트 비율과 WCAG AA, AAA 기준을 확인합니다. 일반 텍스트와 큰 텍스트의 판정을 실제 두 색으로 구성한 표시 예와 함께 볼 수 있습니다.
가능한 작업
두 색의 비율 확인
문자색과 배경색을 지정하면 대비 비율을 소수점 둘째 자리까지 표시합니다.
AA·AAA 기준 비교
일반 문자와 큰 문자를 나누어 판정하고, 선택한 두 색으로 된 표시 예를 확인할 수 있습니다.
검정·흰색과의 비율 확인
선택 사항인 상세를 열면, 문자색을 검정과 흰색 위에 각각 올렸을 때의 비율을 비교할 수 있습니다.
사용 방법
문자색 입력
HEX·RGB·HSL·HSV·CMYK 중 형식을 선택하고 문자색 값을 입력합니다. 색상 견본에서 고르면 HEX로 전환됩니다.
배경색 지정
배경색은 3자리 또는 6자리 HEX로 입력하거나 색상 선택에서 고릅니다. #은 생략할 수 있습니다.
대비 확인
'대비 확인'을 누르면 비율, 문자 표시 예, AA·AAA 판정을 봅니다. 색을 바꾸면 다시 확인하세요.
이럴 때 유용
본문과 배경의 조합 확인
페이지에서 사용하는 문자색과 배경색을 입력하여 일반 문자가 필요한 비율을 충족하는지 확인합니다.
제목 배색 비교
큰 문자 판정과 표시 예를 보고 제목에 사용할 두 색을 검토합니다.
판정 읽는 법
AA와 AAA의 비율
AA는 일반 문자에서 4.5:1 이상, 큰 문자에서 3:1 이상입니다. AAA는 일반 문자에서 7:1 이상, 큰 문자에서 4.5:1 이상입니다. 판정에는 표시용으로 반올림하기 전의 비율을 사용합니다.
큰 문자의 조건
18pt 이상, 또는 14pt 이상의 볼드체를 말합니다. CSS에서는 24px 이상, 볼드체라면 약 18.7px 이상이 기준입니다. 표시 예는 16px과 24px의 일반 굵기로 보여줍니다.
판정할 수 있는 범위
불투명한 sRGB 두 색을 대상으로 한 문자 대비 확인입니다. 이미지 배경, 투명도 합성, 문자 이외의 요소나 페이지 전체의 적합성은 판정하지 않습니다.
질문과 답변
비율이 기준을 충족하면 페이지 전체도 적합한가요?
이 판정은 선택한 두 색의 문자 대비만을 대상으로 합니다. 페이지 전체의 적합성은 별도로 확인하세요.
검정·흰색 비교는 무엇을 보여주나요?
지정한 문자색과 검정·흰색의 비율입니다. 입력한 배경색 판정과는 별개이며, 비율이 더 높은 쪽을 보여줍니다.
투명한 문자색이나 이미지 위의 문자도 판정할 수 있나요?
투명도나 이미지 배경은 다루지 않습니다. 불투명한 문자색과 배경색을 입력하세요.
입력과 결과
- 문자색
- HEX·RGB·HSL·HSV·CMYK 값 또는 색상 선택. CMYK는 ICC를 사용하지 않는 개산값입니다.
- 배경색
- 3자리 또는 6자리 HEX, 또는 색상 선택. 투명도는 지원하지 않습니다.
- 결과
- 대비 비율, 일반·큰 문자의 AA·AAA 판정, 문자 표시 예. 결과 저장 기능은 없습니다.