색상 대비 검사기 무료 온라인: 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에 불과합니다. 항상 당사의 합격/불합격 표시기로 확인하세요.

A 네, 확실히 다릅니다. AA는 18px 미만 일반 텍스트에 4.5:1을 요구하지만, 큰 텍스트(18px 굵게 또는 24px 일반)에는 3:1만 필요합니다. AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 32px 제목이 4.0:1이면 AA는 통과하지만 AAA는 실패합니다. 이 도구는 두 기준을 즉시 보여줍니다. 실용 팁: 본문은 AA, 제목은 AAA를 목표로 하세요. 제목이 클수록 더 높은 비율을 달성하기 쉽습니다.

A 모니터 캘리브레이션과 패널 종류가 색상 표시에 영향을 주지만, 대비 비율은 순수한 수학입니다. 4.5:1 통과는 휘도 차이가 실제로 존재한다는 뜻입니다. 바래 보인다면 대비 문제가 아니라 밝기 설정 때문일 가능성이 높아요. 다른 기기에서 테스트하거나 OS의 색상 프로필을 조정해 보세요. 실용 팁: 시스템 설정에서 sRGB 프로필로 전환하세요. 웹 디자인의 표준 타겟이라 일반 사용자에게 보이는 모습에 훨씬 가깝습니다.