Contrast Finder가 무엇인가요?

Contrast-Finder는 두 가지 색(배경 색, 본문 글자 색)의 명암비를 계산해서 명암비가 기준에 적합한지 알려주는 도구입니다. 명암비가 충분하지 않다면, 충분한 명암비를 가진 색의 조합을 제안해 드리는 것이 주요 목적입니다.

Contrast-Finder는 웹디자이너, 웹 개발자 혹은 웹 접근성 전문가가 HTML 페이지와 웹사이트의 가독성을 개선하는 데 사용할 수 있도록 디자인되었습니다.

도움말 / 이 도구는 어떻게 사용하나요?

Contrast-Finder 인터페이스 양식에는 다섯 개의 필수 입력 항목이 있습니다.

본문에 쓰인 글자에 칠하는 색입니다. 이 항목에는 CSS 컬러 키워드, 16진법 형태의 컬러 값, 혹은 RGB 컬러 값을 입력하실 수 있습니다. 입련된 값은 항목 오른쪽에서 실제 변환된 색으로 확인하실 수 있습니다.

예시: Black, Silver, YellowGreen, MediumPurple.
여기에 사용할 수 있는 값은 CSS 컬러 키워드 문서에 나열되어 있습니다. (CSS level 1부터 CSS level 4까지).

예시: #AABBCC. 참고로 #ABC처럼 간략한 형태로 입력하셔도 되고, 해당 항목은 자동으로 #AABBCC로 변환됩니다. 또한, 여기엔 # 글자를 생략하고 입력하셔도 돼며, FFF 혹은 FFFFFF 모두 혼용해서 입력하실 수 있습니다.

예시: rgb(255,255,255).
마찮가지로 255,255,255처럼 짧은 용법으로 입력하실 수 있으며, 그러면 rgb(255,255,255)로 해석됩니다.

배경에 칠해지는 색입니다.
이 항목은 본문 글자색 항목과 같은 원리로 작동합니다.

세 가지 선택 가능한 값으로 3, 4.5 그리고 7이 있습니다.

명암비는 어떻게 정할까요? 다음의 요소에 따라 결정됩니다:

두 가지 요소(크기와 볼드체 유무)에 따라 다음과 같은 네 가지 조합을 도출할 수 있습니다:

레벨 AAA의 원리는 같으나, 명암비만 다음과 같이 증가합니다:

글자 크기를 해석하는 방식에 관해서 더 깊고 자세히 알고 싶으시면, WCAG에 기술된 large-scale text의 정의를 읽어보십시오.

본문 글자색 또는 배경색을 선택하실 수 있습니다. 기본은 본문 글자색.

선택하신 색은 나중에 기준에 적합한 색을 찾을 때까지 수정됩니다. 하지만 나머지 색은 바뀌지 않습니다.

이것이 기본으로 쓰이는 알고리듬입니다. 처음 지정한 색에 아주 가까운 색의 옵션을 제공합니다. (색의 편차는 수학적 기준으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.)

몇몇 색 조합에 따라선, 알고리듬이 아무런 결과도 추출하지 못할 수도 있습니다 ; 이 경우엔, 다른 알고리듬을 사용해 보십시오.

차선책으로 쓰이는 알고리듬으로, 첫 번째 것이 아무런 결과도 보여주지 않을 때 사용합니다. 하지만, 산출된 색의 옵션은 최초 지정 색과 (많이) 다를 수 있습니다.

Contrast-Finder를 사용하시면서 문제가 있거나 다른 문의 사항이 있으시면, 아래에 있는 통로로 연락해주시기 바랍니다:

어떠한 제안이든 언제나 환영합니다! 번역, 문제 수정, 오류 보고, 새로운 기능…
부담없이 소스 코드를 가지고 실험해 보시고, 포럼에서 상의해 보세요.