# 엘리먼트는 반드시 충분한 명도 대비를 가져야 합니다

<https://www.fixreports.com/ko/issues/color-contrast>

WCAG 1.4.3 명도 대비(최소) · 레벨 AA

일부 텍스트가 배경과 충분히 구분되지 않아 저시력인 사람이 읽기 어렵습니다.

## 이 규칙이 확인하는 내용
전경색과 배경색 사이의 대비가 WCAG 2 AA 명암비 기준치를 충족하는지 확인하세요.

## 중요한 이유
WCAG 1.4.3은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1의 대비율을 요구합니다. 흐릿한 가격, 배지, 배너는 저시력인 사람은 물론, 밝은 빛 아래에서는 누구에게나 읽기 어렵습니다.

## 수정 방법
### 모든 웹사이트에서
1. 대비가 낮은 텍스트를 찾아 텍스트 색상과 배경색을 기록하십시오. 대비 검사 도구나 브라우저의 개발자 도구에서 두 색상을 모두 확인할 수 있습니다.
2. 테마 CSS에서 텍스트 색상이나 배경색을 바꿔 대비율을 4.5:1 이상으로 만드십시오(24px 이상 텍스트 또는 18.66px 이상 굵은 텍스트는 3:1).
3. 세일 배지, 플레이스홀더 텍스트, 푸터 링크, 이미지 위의 버튼에 특히 주의하십시오.

### Shopify에서
1. 대비가 낮은 텍스트를 찾아 텍스트 색상과 배경색을 기록하십시오. 대비 검사 도구나 브라우저의 개발자 도구에서 두 색상을 모두 확인할 수 있습니다.
2. 온라인 스토어 > 테마 > 사용자 지정 > 테마 설정 > 색상에서 해당 색 구성표의 텍스트 색상을 어둡게 하거나 배경을 밝게 해 대비율을 4.5:1 이상으로 만드십시오.
3. 세일 배지, 플레이스홀더 텍스트, 푸터 링크, 이미지 위의 버튼에 특히 주의하십시오.

### WooCommerce와 WordPress에서
1. 대비가 낮은 텍스트를 찾아 텍스트 색상과 배경색을 기록하십시오. 대비 검사 도구나 브라우저의 개발자 도구에서 두 색상을 모두 확인할 수 있습니다.
2. 테마 CSS에서 텍스트 색상이나 배경색을 바꿔 대비율을 4.5:1 이상으로 만드십시오(24px 이상 텍스트 또는 18.66px 이상 굵은 텍스트는 3:1).
3. 세일 배지, 플레이스홀더 텍스트, 푸터 링크, 이미지 위의 버튼에 특히 주의하십시오.

## 수정 확인 방법
- 스캔을 다시 실행해 color-contrast 항목이 더 이상 나타나지 않는지 확인하십시오.
- 정확한 색상 값을 대비 검사 도구에 넣어 직접 확인해 보십시오.

## 출처
- axe-core 규칙 문서(Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- WCAG 1.4.3 이해하기(W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum