16진법, RGB 혹은 CSS 컬러 키워드 형태로 된 색의 값을 입력하실 수 있습니다.
보기: #FFFFFF, rgb(255,255,255) 혹은 white

Contrast Finder가 무엇인가요?

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

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

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

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

본문 글자 색

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

컬러 키워드

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

16진법 형태의 컬러 값

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

RGB 형태의 컬러 값

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

배경색

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

최소 비율

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

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

레벨 AA

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

레벨 AAA

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

글자 크기의 이해

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

대비 비율에 관한 자세한 설명

교정하려는 색

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

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

검색 범위 / 알고리듬

“처음 지정한 색과 아주 비슷하면서도 기준에 적합한 대비 색”

이것이 기본으로 쓰이는 알고리듬입니다. 처음 지정한 색과 아주 가까운 색만 골라서 보여줍니다. (색의 편차는 수학적 방식으로 산출되며, 디자이너의 관점과는 다를 수 있습니다.)

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

“확장된 색 범위 속 기준에 적합한 대비 색”

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

사용자 건의

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

Contrast-Finder의 기능 개선 및 제안

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