색상 대비 검사기 무료 온라인: WCAG AA AAA 접근성 확인

A WCAG AA: 일반 4.5:1, 큰 텍스트 3:1. AAA: 7:1과 4.5:1. AA 충족이 최소 권장.

A 웹 콘텐츠 접근성 지침 — 시각 장애인을 위한 국제 웹 접근성 표준.

A 텍스트를 어둡게 하거나 배경을 밝게(또는 반대). 밝은 회색+흰색 같은 조합 피하기.

A 아니요, 이 도구는 단색 조합에만 작동합니다. 이미지의 경우 다른 소프트웨어가 필요합니다. 해당 영역의 스크린샷을 찍고 스포이드 도구로 텍스트 아래에서 가장 밝은 픽셀과 가장 어두운 픽셀을 샘플링하세요. 두 가지를 텍스트 색상과 비교해 테스트합니다. 하나라도 실패하면 텍스트 뒤에 반투명 오버레이를 추가하는 걸 고려해보세요 — 검은색에 불투명도 40%가 자주 효과적입니다.

A 네, HEX, RGB, HSL 모두 지원합니다. 값을 필드에 붙여넣기만 하면 도구가 자동으로 형식을 인식합니다. 예를 들어 'rgb(255, 0, 0)'이나 'hsl(0, 100%, 50%)'를 입력하면 즉시 변환됩니다. CSS 코드에서 색상을 가져올 때 특히 유용합니다.

A 네. 먼저 기본 쌍을 입력한 다음, 호버 색상을 따로 교체해서 테스트하세요. WCAG는 호버 및 포커스 상태도 최소 대비 기준을 충족해야 한다고 요구합니다 — 정적 텍스트만 해당되는 게 아닙니다. 예를 들어 버튼 배경이 #007bff에서 #0056b3으로 바뀌면, 흰색 텍스트에 대해 둘 다 테스트하세요. 흔한 실수: 디자이너가 호버 배경을 너무 밝게 만들어 대비를 망치는 경우입니다.

A 텍스트가 아닌 요소도 대비 기준이 있습니다. WCAG는 UI 구성요소와 아이콘, 버튼, 양식 테두리에 3:1 비율을 요구합니다. 여기서 아이콘 색상을 배경과 함께 테스트해보세요. 3:1 미만이면 AA 수준에 미달합니다. 실용 팁: 아이콘에 텍스트와 동일한 색상을 사용하면 대부분 통과합니다.

A 눈을 믿지 마세요 — 명도 대비 판단에 형편없기 때문입니다. 괜찮아 보이는 두 색상도 실제로는 2.5:1 비율에 그쳐 WCAG AA조차 통과하지 못할 수 있습니다. 이 도구는 인간의 색상 인식과 휘도를 고려해 수학적으로 계산합니다. 예를 들어 밝은 회색 #C0C0C0과 흰색 #FFFFFF은 읽힐 것 같지만 1.6:1에 불과합니다. 항상 당사의 합격/불합격 표시기로 확인하세요.