담당자를 위한 사용하기 쉬운 '대비 체크리스트' 5선

2024/07/29

대비 체크기이는 웹사이트나 이미지에서 전경색(텍스트나 그래픽 요소)과 배경색의 대비 비율, 즉 밝음 차이를 계산하고,그 비율이 WCAG나 JIS와 같은 웹 접근성 가이드라인에 준수하는지를평가하기 위한 도구입니다.입니다. 대비 비율 체크기 또는 색상 대비 체크기라고도 표기됩니다.

본 기사에서는 대표적인 대비 체크기로 아래의 5가지 도구를 소개합니다.

① 웹AIM
컬러 테스터
AdobeColor
④ WCAG 색상 대비 체크기
콘트라스트 그리드

이러한 도구의 소개와 함께, 대비 비율을 검증할 때의 포인트 등에 대해서도 자세히 설명할 것입니다.웹 접근성에 대응하는 담당자 분들은 꼭 본 기사를 참고하시기 바랍니다.

접근성 담당자를 위한 사용하기 쉬운 대비 체크기 5선

디자이너나 접근성 담당자가 자사의 웹사이트나 웹 콘텐츠의 대비를 검증하기 위해 필수적인 대비 체크기에는 다양한 종류가 있습니다.

그래서 여기에서는,대표적이고 사용하기 쉬운 대비 체크기를5가지를 소개하겠습니다. 웹사이트(브라우저)에서 이용할 수 있는 도구나 설치하여 사용할 수 있는 도구 등이 있지만,모두 무료로 이용할 수 있는 도구를 소개하므로, 먼저 가볍게 사용해 보시기 바랍니다.

도구 이름	특징	이용 환경
① 웹AIM	사이트에 접근하자마자 사용할 수 있는 도구입니다. 영어 사이트이지만 UI가 간단하고 이해하기 쉬워 사용하기 좋습니다.	브라우저
컬러 테스터	이미지를 드래그 & 드롭하여 대비를 체크하는 것이 가능합니다. 설치형이기 때문에, 직장에서의 사용은 제한될 수 있습니다.	설치 (Windows / Mac)
AdobeColor	대비 체크 기능 외에도 색상에 관한 다양한 기능을 갖추고 있습니다. Photoshop, Illustrator, inDesign 등의 Adobe 제품과의 연계도 가능합니다.	브라우저
④ WCAG 색상 대비 체크기	Google Chrome에 설치하여 확장 기능으로 사용할 수 있습니다. 웹사이트의 대비를 검증할 경우 특히 유용한 도구입니다.	브라우저 (Chrome 확장 기능)
콘트라스트 그리드	설정된 색상의 대비를 목록으로 확인할 수 있는 도구입니다. 여러 색상 코드를 설정할 수 있어 색상 조합에 서툰 사람에게도 알기 쉽고, 사용할 색상을 결정하기 쉽습니다.	브라우저

① 웹AIM

문자 색상(전경)과 배경색(후경)을 설정하여 대비 비율을 계산하고,WCAG 기준을 충족하는지 확인할 수 있습니다. 색상은 색상 코드, 색상 선택기로 지정할 수 있으며, 밝기 조절도 가능합니다. 색상을 설정하면 실시간으로 대비 비율이 계산되고, 프리뷰도 일반 텍스트, 굵은 텍스트 및 체크 마크 등의 그래픽 오브젝트로 확인할 수 있습니다.

각 결과가 적합 수준을 충족하고 있는지 여부는 '통과' 또는 '실패'로 한눈에 알 수 있도록 되어 있습니다.내비게이션은 영어지만, 간단하고 이해하기 쉬운때문에 일반적인 사용법에 고민할 필요는 없을 것입니다.

공식 페이지:WebAIM

컬러 테스터

2색 대비 비율을 계산하고, JIS X 8341-3:2010 (WCAG 2.0)의 기준에 따라 평가합니다.이미지 파일을 창에 드래그 & 드롭함으로써 이미지의 전경색과 배경색을 자동으로 추측하고 평가하는 것이 가능합니다.입니다.

일본 제조의 도구로, OS도 Windows와 Mac 모두에 대응하고 있지만,도구의 설치가 필요합니다.지원되는 OS는 다음과 같다. 각 OS의 지원 버전은 Windows 8.1 이상 및 Mac OS X 10.10 이상이다. 영어 버전도 있습니다.

공식 페이지:컬러 테스터

③ 어도비 색상

크리에이터를 위한 도구의 개발 및 판매를 하는 Adobe가 제공하는 도구입니다. 도구 자체는 색상 도구로서 창의적인 활동에 도움이 되는 다양한 기능이 갖춰져 있지만, 기능 중 하나로 접근성 체크용 대비 체크기가 포함되어 있습니다.

다른 대비 체크기와 유사한 사용감을 가지지만,설정된 색상에 대해 최적의 대비 색상도 제안해 줍니다.Adobe 제품의 도구이지만, 설치나 로그인이 필요하지 않고, 로그인을 하면다른 어도비 제품과 연계할 수 있어, 평소 어도비 애플리케이션을 사용하는 디자이너에게는 사용하기 쉬운 도구입니다.칩니다.

공식 페이지:Adobe 색상

④ WCAG 색상 대비 체크기

Google Chrome의 애드온 (확장 기능)로 사용할 수 있는 도구입니다. 웹사이트 페이지 내에서 사용되고 있는 색상을 즉시 추출하고, 각 색상의 대비를 평가합니다. 한 페이지씩 점검할 수 있기 때문에, 테스트 업 단계의 웹사이트 점검이나 이미 운영 중인 웹사이트의 유지 관리에 활용하기 쉬운 도구입니다.

측면의 컨트롤 패널에 표시된 임의의 색상을 클릭하면 페이지 내에서 사용된 위치를 확대해 주므로,포털 사이트와 같이 정보가 많은 사이트의 점검도 쉽게 수행할 수 있습니다.。

공식 페이지:WCAG 색상 대비 체크기

⑤ 대비 그리드

대비 체크기는 색상을 지정하여 매번 대비를 확인하는 방식의 도구가 많은데, 이 도구는색상 팔레트(목록)가 표시되어 사용하고 싶은 대비 조합을 선택하는 형태로여서, 디자인 초보자나 색상 조합에 서툰 분들에게는 이 방식이 추천됩니다.

공식 사이트에 접속하면 위 그림과 같이 이미 기본 색상 조합이 표시되어 있습니다. 왼쪽 상자에 색상 코드를 추가하면 팔레트의 다른 색상과의 조합을 나열할 수 있습니다. 각 색상 조합에「AA」나「AAA」와 같은 준수 수준이 레이블로 표시되어 있으며, 레이블의 색상 차이로 준수 여부를 알 수 있도록 되어 있습니다.때문에 사용할 수 있는 조합도 한눈에 알 수 있습니다.

공식 페이지:대비 그리드

앞서 5가지 유용한 콘트라스트 검사기를 소개했는데, 왜 콘트라스트 검증이 필요한 것일까요? 지금부터 그 이유를 설명하겠습니다.

왜 대비 체크가 필요한가?

2024년 4월에 시행된 개정 장애인 차별 해소법에 따라 합리적인 배려 제공의 의무화가 이뤄지면서,웹 접근성 대응도 필수 정책되었습니다. 이 대응에 있어, 먼저 자사 사이트의 접근성 달성도를 확인하기 위해 다양한 각도에서 웹사이트를 검증해야 합니다.

특히, 웹사이트는 시각을 통해 얻는 정보가 많기 때문에 시각이 문제가 없는 사람뿐만 아니라저시력이나 노인 사용자, 혹은 색각 특성을 가진 사용자에게도 글자나 이미지를 인식할 수 있는 사이트가 되어 있는지웹 접근성이 제대로 확보되어 있는지 확인하고, 적절히 개선해 나가야 합니다.

그리고 그 검증에 필요한 지표 중 하나가「색의 대비 비율」입니다. 대비 비율은 화면상의 두 가지 색(보통 전경색과 배경색) 간의 밝기 차이를 나타내는 지표입니다. 이 비율은 두 가지 색의 상대적 밝기를 수치로 표현한 것으로, 높은 대비 비율일수록 색을 구별하기 쉬워집니다. 일반적으로,대비 비율은 1:1에서 21:1의 범위로 표시되며, 수치가 높을수록 대비가 강해지며 인식하기 쉬움을 의미합니다.。

그렇다면 실제로 콘트라스트 비율의 차이에 의해 얼마나 시각이 달라지는지 아래를 확인해 보세요.

◆대비 비율에 따른 가독성 차이

또한, 시력이 낮은 경우처럼 문자에 흐림이 있는 경우의 이미지를 위해 위 이미지에 블러 처리를 했습니다.

◆흐릿하게 보일 경우의 시각 차이

이처럼,콘트라스트 비율이 높은 경우, 배경색과 전체 색상 간의 차이가 크기 때문에 색상의 경계를 인식하기 쉽고, 즉 가독성이 높아집니다.예를 들어, 글자색과 배경색이 1:1인 경우는 둘 다 동일한 색깔로 인식할 수 없고, 21:1인 경우는 흰색과 검정색으로 표시되어 분명히 인식할 수 있다고 생각하면 이해하기 쉬울 것입니다.텍스트와 이미지 등 다양한 요소가 혼합된 웹사이트에서 웹 접근성을 확보하기 위해, 세부 사항까지 콘트라스트 비율에 주의를 기울여 디자인해야 합니다.。

따라서, 자사의 사이트 디자인의 콘트라스트가「웹 접근성 확보의 요건을 충족하고 있는지」를 판단하기 위해 콘트라스트 체크는 필수 작업이 되지만, 그것을정량적으로 판단하기 위해서는 '콘트라스트 체커'가 필수 도구가 됩니다. 그럼 웹 접근성의 요건에 대해 다음 항목에서 설명하겠습니다.

대비 체크의 3가지 포인트

콘트라스트 체커를 활용하여 웹사이트나 콘텐츠의 콘트라스트 비율을 검증할 때에는 자신의 감각으로 수용 여부를 결정해서는 안 됩니다.정해진 웹 접근성 기준에 따라 검증해야 합니다.여기에서는 콘트라스트 체크 시 주의해야 할 세 가지 포인트를 설명합니다.

포인트① JIS 규격의 기준을 충족하는 대비 비율을 이해하기

앞서 언급한 바와 같이, 개정된 장애인 차별 해소법에 의해 합리적인 배려의 제공이 의무화됨에 따라, 모든 사업자에게 웹 접근성 확보가 필수가 되었습니다.

웹사이트를 구성하는 요소는 여러 가지가 있지만, 각각에 대해 접근성 기준이 정해져 있으며, 모든 달성 기준은 WCAG 2.0(웹 콘텐츠 접근성 지침 2.0)이라는 국제 규격에 의해 정해져 있습니다. 일본에서는JIS 규격 (JIS X 8341-3:2016)가 이에 해당합니다.

또한, 이 규격에서의 달성도에는 A~AAA의 적합 수준이 정해져 있으며, 총무성에 따르면,웹 접근성을 확보하려면 AA 또는 AAA(권장)에 준수해야 한다고 합니다.라고 합니다.

참고:공공 기관에 요구되는 홈페이지 등의 접근성 대응(총무성)

그리고 대비 비율에 대해서도 기준이 정해져 있습니다.

◆적합 레벨 AA, AAA에 준수하기 위한 콘트라스트 비율

적합 레벨	필요한 대비 비율
AA	4.5:1 이상
AAA	7:1 이상

즉, 웹 접근성에 대응하는 웹사이트로서는,콘트라스트 비율에 있어 최소한 4.5:1의 비율이 요구됩니다.많은 콘트라스트 체커에서는 콘트라스트 비율이 자동으로 계산되므로, 이 비율에 주의하여 검증해 봅시다.

또한, AAA의 콘트라스트 비율 7:1은 시력이 20/80 정도로 감소한 사용자를 기준으로 하며, W3C는 20/80을 초과하여 시력이 낮아진 사용자는 일반적으로 콘텐츠에 접근하기 위해 보조 기술을 사용하고 있다고 가정하고 있습니다.

AAA는 달성 필수가 아니며, 어디까지나 권장 사항이지만,보조 기술을 갖고 있지 않은 저시력 또는 색각 특성을 가진 사용자의 사이트 사용을 고려하고 있다면, 7:1의 콘트라스트 비율을 염두에 두고 디자인해야 합니다.칩니다.

참고:달성 기준 1.4.6 이해하기 | WCAG 2.0 설명서 (W3C)

포인트② 글자 크기에도 주의

포인트 ①에서 '콘트라스트 비율은 최소한 4.5:1 이상 필요하다'고 언급했지만, 실제로 이것에는 예외가 있습니다.아래와 같은 경우에는 반드시 4.5:1을 충족할 필요는 없습니다.

◆콘트라스트 비율의 규격 준수 예외

・예외 ① 큰 글자와 굵은 텍스트
큰 글자나 굵은 글자(18포인트 이상의 일반 텍스트 또는 14포인트의 굵은 글자)에 대해서는,콘트라스트 비율이 3:1이라면 기준을 충족합니다. 이는 큰 글자는 인식성이 높기 때문에 콘트라스트가 다소 낮아도 문제가 적다고 여겨지기 때문입니다.

・예외 ② 장식 목적의 텍스트나 로고
장식 목적의 부수적인 텍스트나 기업 로고 등은 이 대비 비율의 요건에서 제외됩니다. 이들은 디자인이나 브랜드 인식을 위해 사용되는 것이며, 정보 전달의 수단으로는 간주되지 않기 때문입니다.

・예외 ③ 이미지 내의 텍스트
사진이나 이미지 내의 텍스트도 예외에 포함됩니다. 단,정보 제공을 위한 중요한 텍스트에 대해서는 이미지 내에서 적절한 콘트라스트 비율을 가질 것을권장됩니다.

포인트③ 색각 특성을 가진 사용자에 대한 배려도 필요합니다.

지금까지 대비 비율에만 집중하여 설명해왔지만, 컬러 접근성을 고려할 때 실제로는 대비 비율만으로는 부족합니다. 그 이유는,색각 특성을 가진 사용자에 대한 배려도 고려해야 하기 때문입니다.

예를 들어, 아래는 웹사이트의 이메일 양식 등에서 자주 볼 수 있는 버튼 배열인데, 두 버튼 모두 배경색과 글자색의 콘트라스트 비율은 AA에 준수한 색상 조합이 되어 있습니다.

◆콘트라스트 비율 AA 준수 버튼

「콘트라스트 비율은 기준을 통과하고 있으므로 접근성이 확보됐다」고 생각하기 쉽지만, 성급한 판단입니다. 이 버튼에D형 색각(2형 2색각)의 필터를 통과하면 다음과 같은 모습을 볼 수 있습니다.

◆D형 색각 버튼의 시각

이처럼,두 버튼의 색상이 비슷해서 언뜻 보면 구분하기 어렵습니다.입니다. 명암비가 기준치를 충족한다고 해서 사용성이 좋다고 할 수는 없습니다. 즉, 배색 시 명암비뿐만 아니라 색각 특성도 함께 고려해야 합니다.

또한, 색각 특성을 가진 사용자에 대한 배려 측면에서,「색의 차이만으로 정보를 전달하지 않도록 하다」라는 것도 함께 중요한 포인트가 됩니다.

유니웹에서는 사용자 측에서 대비 변경이 가능합니다.

자사 사이트의 콘트라스트 체크 리소스가 없다면, 당사의접근성 도구 '유니웹'은도입을 권장합니다. 유니웹은 웹사이트의 소스에 코드를 1줄 추가하는 것만으로 다양한 접근성 기능을즉시 구현가능한 플러그인형 도구입니다.

유니웹의 큰 특징은,사용자가 웹사이트를 보면서 다양한 접근성 기능을 이용할 수 있도록 하는 것입니다.입니다. 구현되는 접근성 기능 중에는 대비 조정 기능도 있으며, 클릭만으로 '반전 색상', '어두운 대비', '밝은 대비'로 전환하여 가독성을 높일 수 있습니다.

◆유니웹의 콘트라스트 변경 기능

또한, 관리 화면에서는사이트의 웹 접근성 대응에 관한 진단 보고서확인할 수 있습니다. 보고서에서는 항목별로 적합 수준(A, AA, AAA)이 표시되며, 수정이 필요한 부분에 대해서는 코드의 구체적인 수정 방법도 표시되므로,일일이 각종 검증 도구 등으로 수정할 부분을 찾을 필요가 없고 효율적인 운영이 가능해집니다.。

◆유니웹의 관리 화면