WCAG 색상 대비 확인하는 법

두 hex 코드를 준비하고 색상 대비 검사기를 여세요. 본문은 4.5:1, 24px 넘는 제목은 3:1, 아이콘이나 테두리는 3:1과 비교하세요. 업로드 없음.

1. 기준값 알기

   WCAG 2 AA: 보통 글자 4.5:1, 큰 글자 3:1. AAA: 7:1과 4.5:1. 큰 글자는 24px 보통 굵기나 약 18.7px 굵은 글자. 아이콘, 테두리, 폼 컨트롤은 3:1.

   

2. cv.cm 색상 대비 검사기를 열기

   크림 바탕에 분홍 예시 쌍이 들어 있습니다. 비율과 통과/실패 행은 글자 견본 아래 오른쪽. 업로드 없음.

   대비 검사기 열기

3. 두 색 넣기

   글자에 #777777, 배경에 #ffffff처럼 hex를 넣거나 색 견본으로 고르세요. #777 같은 세 자리도 됩니다. 견본은 입력에 따라 바뀝니다.

4. 비율과 행 읽기

   #ffffff 위 #777777은 4.48:1: 큰 글자 AA와 UI는 통과, 보통 글자 AA는 실패. 각 행이 기준값에 대해 「통과」나 「실패」를 보여 줍니다.

5. 제안 색 가져가기

   보통 글자가 AA에 떨어지면, 검정이나 흰색 쪽으로 옮겨 4.5:1에 닿는 가장 가까운 글자색을 제안합니다. 흰 바탕 #777777에는 #767676을 제안. 「바꾸기」로 글자와 배경이 바뀝니다.

   

6. 모든 상태 확인하고 복사하기

   링크, 호버, 비활성 색에도 반복하세요. 이미지 위 글자는 이미지의 가장 어두운 부분을 배경으로 삼으세요. 「복사」로 색, 비율, 결과가 클립보드에 들어갑니다.