생성기색상 대비 검사

색상 대비 검사기WCAG 명도 대비 접근성 체크

글자색과 배경색의 명도 대비율을 계산해 WCAG AA·AAA 기준 통과 여부를 알려주는 온라인 접근성 검사기입니다. 통과하는 색도 제안합니다.

색상 대비 검사 사용법

글자색과 배경색의 명도 대비를 계산해 웹 접근성 기준(WCAG)에 맞는지 알려줍니다.

  1. 두 색을 넣습니다

    글자색과 배경색을 각각 고릅니다. #hex 말고도 rgb()·hsl()·black 같은 색 이름을 그대로 붙여 넣어도 됩니다.

  2. 대비를 확인합니다

    실제로 그 색 조합에서 글이 어떻게 보이는지 미리보기로 확인할 수 있습니다.

  3. 통과 여부를 봅니다

    본문 크기와 큰 글씨 각각에 대해 AA·AAA 기준 통과 여부가 나옵니다.

  4. 추천 색을 씁니다

    기준에 못 미치면 어둡게·밝게 두 방향을 모두 따져 가장 덜 바꾸고도 통과하는 색을 제안합니다. 눌러서 바로 적용할 수 있습니다.

자주 묻는 질문

4.5:1 이 무슨 뜻인가요?
본문 크기 글씨가 통과하려면 필요한 최소 대비입니다. 큰 글씨(굵은 18.66px 이상 또는 24px 이상)는 3:1 이면 됩니다.
AA 와 AAA 는 뭐가 다른가요?
AAA 가 더 엄격합니다. 본문 기준으로 AA 는 4.5:1, AAA 는 7:1 을 요구합니다. 일반적으로 AA 를 목표로 잡습니다.
반투명한 색은 어떻게 재나요?
#00000080 이나 rgba(0, 0, 0, 0.5) 처럼 투명도가 있으면 배경은 흰 바탕 위에, 글자는 그 배경 위에 겹쳐 실제로 보이는 색으로 잽니다. 불투명한 색으로 재면 대비가 실제보다 좋게 나오기 때문입니다.

생성기 다른 도구