색 대비 검사
글자색과 배경색의 대비를 재서 읽히는지 확인해요. WCAG 기준 통과 여부를 알려줘요.
색 고르기
검사 결과
AA는 대비 4.5:1, AAA는 7:1이 필요해요. 18pt 이상(굵으면 14pt 이상)인 큰 글자는 각각 3:1과 4.5:1로 기준이 느슨해요.
버튼 테두리나 아이콘처럼 글자가 아닌 요소는 3:1이면 돼요.
색 대비 검사 소개
글자색과 배경색의 명도 대비를 재서 읽히는지 확인해요. 보통 글자 AA·AAA, 큰 글자 AA, 버튼·아이콘 기준을 각각 통과했는지 알려주고, 미달이면 어떤 색으로 바꾸면 통과하는지 제안해 줘요. 실제 글자로 미리 보여주니 눈으로도 확인할 수 있어요.
대비비는 어떻게 읽나요
두 색의 밝기 차이를 비율로 나타낸 값이에요. 완전히 같은 색이면 1대 1이고, 검정과 흰색이 21대 1로 가장 큰 값이에요.
본문 글자는 4.5대 1 이상이면 AA를 통과해요. 더 엄격한 AAA는 7대 1을 요구하고요. 저시력 사용자를 많이 고려하는 서비스라면 AAA를 목표로 삼기도 해요.
큰 글자는 기준이 느슨해요. 18pt 이상이거나 굵으면서 14pt 이상이면 AA에 3대 1, AAA에 4.5대 1이면 돼요. 글자가 크면 형태가 또렷해서 덜 필요하다고 보는 거예요.
글자가 아닌 요소도 봐야 해요
버튼 테두리, 체크박스, 아이콘, 그래프의 선처럼 의미를 전달하는 요소도 대비 기준이 있어요. 3대 1이면 충분해요.
흔히 놓치는 게 입력칸 테두리예요. 연한 회색 테두리는 예뻐 보이지만 배경과 구분되지 않으면 어디를 눌러야 할지 알기 어려워요.
비활성 상태 버튼은 기준에서 빠져요. 다만 사용자가 왜 못 누르는지 알 수 있도록 다른 단서를 함께 주는 편이 좋아요.
색만으로 구분하지 마세요
대비를 통과해도 색만으로 정보를 전달하면 색각 이상이 있는 사람에게는 구분되지 않아요. 남성의 상당수가 적록 색각 이상을 가지고 있어요.
오류를 빨간 글씨로만 표시하지 말고 아이콘이나 문구를 함께 주세요. 그래프도 색만 다르게 하기보다 무늬나 라벨을 더하면 좋아요.
대비 검사는 읽히는지를 보는 것이고, 구분되는지는 별개의 문제라고 생각하면 이해가 쉬워요.
색 대비 검사 사용 방법
- 글자색과 배경색을 넣어요.
- 대비비와 기준별 통과 여부를 확인해요.
- 미달이면 제안된 색을 적용하거나 밝기를 조절해요.
- 미리보기에서 큰 글자와 보통 글자가 실제로 읽히는지 봐요.
자주 묻는 질문
- 대비는 얼마나 되어야 하나요?
- 본문 글자는 4.5대 1 이상이면 AA를 통과해요. 굵거나 큰 글자와 아이콘 같은 요소는 3대 1이면 돼요.
- AA와 AAA는 뭐가 다른가요?
- AAA가 더 엄격해요. 본문 기준으로 7대 1을 요구하고, 저시력 사용자를 많이 고려하는 서비스에서 목표로 삼아요.
- 투명한 색도 잴 수 있나요?
- 실제로 겹쳐 보이는 색을 기준으로 재야 해요. 배경과 합쳐진 뒤의 색을 넣어 주세요.
- 큰 글자는 몇 pt부터인가요?
- 18pt 이상이거나, 굵으면서 14pt 이상이면 큰 글자로 봐요.
- 어떤 색으로 바꿔야 할지 모르겠어요.
- 미달일 때 통과하는 색을 제안해 줘요. 적용을 누르면 바로 반영돼요.
- 대비만 맞추면 충분한가요?
- 색만으로 정보를 구분하게 두면 색각 이상이 있는 사람에게는 전달되지 않아요. 아이콘이나 문구를 함께 주세요.
알아 두면 좋은 점
- 반투명 색은 배경과 합쳐진 뒤의 색으로 재야 정확해요.
- 기준을 통과해도 실제로 읽히는지는 미리보기로 확인해 주세요.