색 대비 확인기

WCAG 대비 임계값

“대형 텍스트”란 18pt 이상의 정규체(CSS에서는 약 24px) 또는 14pt 이상의 굵은체(약 19px)를 의미합니다.

예시 대비

일반적인 접근성 문제점

• #999 이상의 색상에서 흰색 배경 위에 사용하는 본문 글꼴은 AA 기준을 충족하지 않습니다. 흰색 배경의 본문에는 #767676 또는 그보다 어두운 색상을 사용하십시오.
• 회색 위의 파란 링크: 두 색상 모두 중간 밝기 수준이기 때문에 종종 실패합니다.
• 브랜드 색상 위에 흰색 글자를 표시할 경우, 어두운 색조(≥ 4.5:1)를 사용하면 적합하지만 중간 색조의 브랜드 색상은 불합격합니다. 대신 더 큰 글자 크기 또는 더 어두운 브랜드 색상을 사용하시기 바랍니다.
• 플레이스홀더 텍스트는 일반적으로 ‘힌트’ 용도로 대비가 낮게 사용됩니다. 사용자가 플레이스홀더를 읽어야 할 경우에도 WCAG 규정은 여전히 적용됩니다.
• 비활성 상태: WCAG 2.2는 비활성 텍스트와 제어 요소의 배경 간의 비율이 3:1이어야 한다고 규정하고 있으며, 단 해당 상태 자체가 다른 방식으로 명시된 경우는 예외로 한다.

WCAG가 알려주지 않는 내용

WCAG 2.x는 1988년에 제정된 공식을 사용합니다. 현대의 APCA(고급 지각 대비 알고리즘)는 인지되는 읽기 용이성을 보다 정확하게 반영하지만 아직 법적으로 확립된 기준은 아닙니다. APCA 및 특수한 경우를 처리하기 위해 WCAG의 최소값보다 약간 높은 수치가 적용됩니다. 대비는 접근성의 유일한 측면이 아닙니다. 글꼴 크기가 9px이고 선 높이가 좁거나 의미를 나타내는 색상이 빨간색과 녹색인 경우에는 21:1의 비율이 아무런 의미를 갖지 않습니다.

실패한 쌍을 개선하기

• 어두운 배경 위에 밝은 전경을 사용하거나, 밝은 배경 위에 어두운 전경을 사용할 수 있습니다.
• 글꼴 크기 또는 굵기를 키우세요, 대형 텍스트 기준값이 더 낮습니다.
• 이미지 위의 텍스트 뒤에 배경을 추가하세요(오버레이 또는 그라디언트 사용).
• 여전히 기준을 충족하지 못하는 회색으로 흐릿하게 만들어 대비를 해결하려 하지 마세요, AA에 도달할 때까지 계속 조정하세요.

조정할 때마다 다시 확인하세요. 도구가 비율을 실시간으로 다시 계산하므로 밝기의 작은 변화로도 판정이 빠르게 바뀔 수 있습니다.