Accessibility 본문

Colour Contrast Analyser (CCA)

개요

웹 접근성 평가에 도움이 되는 CCA 관련 정보를 업로드합니다. CCA는 주로 사람들에게 좋은 컬러​​ 가시성을 제공하는지 여부를 결정하는 전경 및 배경 색상 조합을 확인하기 위한 도구입니다. CCA를 이용하여 웹 접근성 검사 항목 중 "색에 무관한 인식" 과 "명도대비"를 확인할 수 있습니다.

Colour Contrast Analyser 소개 및 사용방법

Colour Contrast Analyser란?

Colour Contrast Analyser 사진

CCA는 컬러 대비 분석을 하는 프리웨어입니다. N–WAX나 파이어폭스 부가기능인 Wcag contrast checker를 통해서도 명도 대비가 가능하지만 가장 큰 차이점은 웹상의 페이지가 아닌 캡쳐 화면등의 명도 대비가 가능하다는 것입니다. 이로 인해 우리는 모바일 앱의 명도대비를 확인할 수 있습니다.

다운로드 및 설치
  1. Colour Contrast Analyser 2.2 for Web Pages 접속
  2. "Download, unzip and place the CCA folder where you like. Use the application by activating the ContrastAnalyser2.exe file." 링크 클릭 Colour Contrast Analyser 2.2 다운로드 및 설치화면1
  3. 파일을 다운받고 원하는 위치에 압축 해제 Colour Contrast Analyser 2.2 다운로드 및 설치화면1
  4. "cca–2–2–zip" 폴더가 만들어 지면서 관련 항목 생김 Colour Contrast Analyser 2.2 다운로드 및 설치화면1
사용방법
  1. "cca–2–2–zip" 파일 항목 중 Colour_Contrast_Analyser.exe 파일 실행 Colour Contrast Analyser 2.2 사용설명 사진1
  2. CCA 화면이 나옴 Colour Contrast Analyser 2.2 사용설명 사진1
색에 무관한 인식 검사 방법
  1. 검사방법 1
    1. Image > Select window(List) 활용 현재 화면에 나타나 있거나 최소화된 화면을 시각의 정도에 어떻게 나타나는지 확인할 수 있으며, 파일로도 저장할 수 있다.
    2. Image > Select window(List)를 선택하거나 Ctrl+L를 실행한다.
    3. Window List 창이 열린다. Select window(List) 활용한 색에 무관한 인식 검사 방법 화면1
    4. 현재 열려 있는 윈도우 목록이 Select window에 나타난다. Select window(List) 활용한 색에 무관한 인식 검사 방법 화면2
    5. 저장하기 위해서는 save를 선택하면 특정 형태로 지정한 것처럼 저장이 된다. Select window(List) 활용한 색에 무관한 인식 검사 방법 화면3
  2. 검사방법 2
    1. Image > Select image file 활용
    2. 이미지 파일을 선택하면 해당 이미지 파일이 Image file convert 창의 오른쪽에 나타난다. Select image file 활용한 색에 무관한 인식 검사 방법 화면1
    3. Simulation의 7개 항목 중에서 한가지를 선택한다.
    4. 저장하기 위해서는 save를 선택하면 특정 형태로 지정한 것처럼 저장이 된다. Select image file 활용한 색에 무관한 인식 검사 방법 화면2
색맹 별 결과 보기
현재 캡쳐한 화면을 시각의 정도에 따라 어떻게 보이는지 확인하기 위해서는 Simulation 항목에서 원하는 형태로 바꾼 후 Preview 버튼을 다시 누르면 된다.

Simulation의 7개 항목은 다음과 같다.

  • Protanopia 제1색맹, 적()색맹
  • Deuteranopia 제2색맹, 녹()색맹.
  • Tritanopia 제3색맹, 청()색맹,
  • Grayscale 그레이스케일
  • Invert 반전
  • Cataracts 백내장
  • Normal 정상

정상으로 물체를 보는 경우와 제1색맹, 적(赤)색맹, 제2색맹, 녹(綠)색맹, 제3색맹, 청(靑)색맹인 경우의 상태를 비교해 보자

정상
정상
색맹별 결과 정상화면
Protanopia
Protanopia 제1색맹, 적(赤)색맹
색맹별 결과 Protanopia 제1색맹, 적(赤)색맹화면
Deuteranopia
Deuteranopia 제2색맹, 녹(綠)색맹
색맹별 결과 Deuteranopia 제2색맹, 녹(綠)색맹화면
Tritanopia
Tritanopia 제3색맹, 청(靑>)색맹
색맹별 결과 Tritanopia 제3색맹, 청(靑)색맹화면
명도 대비 검사 방법

  • 일반 명도 대비 결과 보기
    1. 원하는 웹페이지 또는 캡쳐 화면에 스포이드로 전경색과 배경색 지정 일반 명도 대비 검사 방법 화면
    2. 명도 대비 확인 일반 명도 대비 검사 결과 화면
  • 색맹용 대비 결과 보기
    색맹용 명도 대비 검사 결과 화면

3:1 미만일 경우는 오류, 3:1 이상이 통과

색맹용 대비 결과 보기(Show contrast result for colour blindness)를 선택하면 Normal(정상), Protanopia(제1색맹, 적()색맹), Deuteranopia(제2색맹, 녹()색맹), Tritanopia(제3색맹, 청()색맹)의 비율이 나타난다.

툴의 활용
  • 색깔 선택 (color slider 활용)

    색깔의 contrast를 비교하기 위해서는 color slider를 활용한다. Options > Color Slider를 선택하거나 F7을 누르면 RGB를 증감할 수 있는 slider가 나타난다.

    색깔 선택 (color slider 활용)툴 활용 화면
  • Hex와 rgb 변환

    Foreground의 Hex 값을 RGB 값으로 보려면 Options > displayed color valuem를 Hex에서 RGB로 바꾸면 된다.

    Hex와 rgb 변환 화면