색상 대비 검사 방법

명암비를 계산하는 것은 복잡합니다. 다행히 수학을 처리하는 대비 계산기가 있습니다. 몇 가지 잠재적인 위험이 있는 올바른 색상 코드만 제공하면 됩니다.

색상 대비 분석기

두 색상 간 대비를 계산하는데 사용할 수 있는 많은 도구가 있습니다. Windows 및 macOS 사용자의 경우 Colour Contrast Analyser (CCA)를 추천합니다.

명암비를 계산할 경우, "올바른" 색상 코드를 사용하는 것이 매우 중요합니다. 웹 어플리케이션의 맥락에서 이것들은 CSS에서 정의된 값입니다. 그런데 이 값들을 얻는 가장 좋은 방법이 무엇일까요?

가장 신뢰할 수 있는 소스는 소크 코드에 정의된 값에 직접 접근을 제공하는 브라우저의 DOM 검사기입니다.

DOM 검사기에서 엘리먼트를 보기 위해 엘리먼트에 우클릭하고 검사(용어는 브라우저에 따라 다를 수 있습니다)를 선택합니다. 이제 Styles 탭에서 엘리먼트의 색상 값을 찾을 수 있습니다.

DOM 검사기에서 엘리먼트의 색상 정의 표기

때로는 소스 코드에 색상 값이 정의 되어 있지 않거나 (예를 들어, 픽셀 이미지로 작업 시) DOM 검사기의 값이 전체 스토리를 전달하지 못합니다 (예를 들어, 투명도 작업 시).

이에 대해 처리하기 위해, 많은 대비 검사기가 색상 선택기를 제공합니다. 매우 편리하지만, 잠재적인 위험성을 열어 줍니다.

대부분의 최신 브라우저는 렌더링 된 엘리먼트의 가장자리를 부드럽게 만들기 위해 안티 앨리어싱을 적용합니다. (spacial anti-aliasing (Wikipedia.org) 참고)

안티 앨리어싱 된 텍스트

그러한 엘리먼트로부터 색상을 선택하는 경우, 이는 결과에 큰 영향을 미치기 때문에 안티 앨리어싱 된 영역을 피해야 합니다.

화면에 표시되는 색상은 코드에 정의 된 것과 약간 다를 수 있습니다. 이는 모니터, 운영 체제, 브라우저에서 사용되는 다양한 색상 프로필 때문입니다. 따라서 색상 선택기를 사용하는 경우, 코드에 정의 된 것과 다른 값을 표시 할 수 있습니다.

일반적인 권장 사항: 색상 선택기를 사용하고 시간을 절약하세요. 하지만 결과가 필요한 대비 임계 값에 근접한 경우, DOM 검사기의 실제 색상 정의를 검사하여 (가능한 경우) 확인하는 것을 권장합니다.