Accessibility 본문

ColorDoctor & ColorSelector

ColorDoctor

개요

웹접근성 펑가에 도움이 되는 『ColorDoctor』 관련 정보를 업로드합니다. ColorDoctor는 그레이 스케일 및 컬러 특성에 따라 표시 내용을 시뮬레이션 소프트웨어로 콘텐츠 디자인이 흑백 또는 각 색각 이상자가 보는 시각으로 테스트를 가능하게 해줍니다. ColorDoctor를 이용하여 웹접근성 검사 항목 중 "1.3.1 색에 무관한 콘텐츠 인식"을 확인할 수 있습니다.

검사항목 1.3.1 색에 무관한 콘텐츠 인식
점검 기준

콘텐츠는 색에 관계없이 인식되어야 함(차트, 그래프)

점검 방법

흑백 화면에서 충분히 정보를 인지할 수 있어야 함

흑백 프린터로 출력하여 인식가능 체크 후, 색상으로 구분하는 콘텐츠가 없어야 함

대상

전맹, 저시력, 비장애

다음 내용은 FUJITSU 홈페이지에 개제된 ColorDoctor 내용을 가져왔습니다.

FUJITSU [ http://www.fujitsu.com/global/accessibility/assistance/cd/ ]
ColorDoctor란?

ColorDoctor 사용화면
ColorDoctor

후지스가 무상으로 제공하는 소프트웨어 중 하나인 ColorDoctor는 제1색 시각장애(빨),제2색 시각장애(녹색). 제3색 시각장애(청색) 등 색각 특성에 응한 보는 방법을 시뮬레이션해서 표시하는 소프트웨어로. 파일 형식에 관계없이 화면에 표시되는 것이라면 모드 시뮬레이션 가능합니다

어떤 이미지든지 화면에 회색 스케일 또는 색상 실명을 가진 사람으로 인식 될 수 있는 웹사이트 및 기타 프레젠테이션 내용을 같은 형식으로 변환합니다.

장이나 절 단위로 사용하며 Heading 요소를 사용하여 제목을 넣어 사용

언어 : 영어, 일본어

운영 체제 : Windows

라이센스 : 무료 소프트웨어

다운로드 및 설치
  1. Fujitsu의 ColorDoctor Download 접속
  2. Download ColorDoctor 2.1 링크 클릭 ColorDoctor 설치방법 화면1

    페이지 하단의 License Terms and Conditions를 클릭하시면 ColorDoctor의 라이센스 및 이용약관을 보실 수 있습니다.

  3. 파일을 다운받고 원하는 위치에 압축을 푼 후 파일 실행
    ColorDoctor 설치방법 화면2
  4. "Fujitsu ColorDoctor" 파일이 만들어 지면서 관련 항목 생김 ColorDoctor 설치방법 화면3

운영환경 및 NET Framework에서의 설치 방법은 위의 Fujitsu의 ColorDoctor Download 에 있습니다.

사용방법
  1. "Fujitsu ColorDoctor" 파일 항목 중 ColorDoctor 아이콘 클릭 ColorDoctor 사용 방법 화면1
  2. Address 빈창에 평가하고자 하는 사이트 주소 입력하고 엔터 ColorDoctor 사용 방법 화면2
  3. Original image 에 나온 이미지가 해당 사이트가 맞는 지 확인 ColorDoctor 사용 방법 화면3
  4. Convert image 버튼 클릭 ColorDoctor 사용 방법 화면4
  5. Original image와 Filtered image 비교 ColorDoctor 사용 방법 화면5
ColorDoctor의 툴바
Mode

ColorDoctor의 Original image 창에 웹사이트 표시를 어떻게 하는 지 정하는 메뉴로 Browser와 Transparent 2가지가 있습니다.

Browser
ColorDoctor의 Browser 화면
Original image 창에 사이트 이미지를 가져와서 평가
Transparent
ColorDoctor의 Transparent기능 화면
Original image 창이 투명으로 변하여 다른 브라우저를 투과하여 평가

주의 사항Real–time conversion 활성화 시 작용 안 됨

Conversion filter

ColorDoctor의 색상 변환 필터로 Gray scale, Protanopia, Deuteranopia, Tritanopia 4가지가 있습니다.

Gray scale(흑백)
ColorDoctor의 색상 변환 필터 Gray scale(흑백) 화면
회색의 농담을 단계별로 나타낸 시각적 척도, 색채 정보 없이 회색의 농담만으로 이루어진 이미지로 변환
Protanopia(제1색맹, 적색맹)
ColorDoctor의 색상 변환 필터 Protanopia(제1색맹, 적색맹)화면
빨간색, 보라색, 파란색의 색채 정보없는 이미지로 변환
Deuteranopia(제2색맹, 녹색맹)
ColorDoctor의 색상 변환 필터 Deuteranopia(제2색맹, 녹색맹)화면
녹색, 보라색, 빨간색의 색채 정보없는 이미지로 변환
Tritanopia(제3색맹, 청황색맹)
ColorDoctor의 색상 변환 필터 Tritanopia(제3색맹, 청황색맹)화면
파란색, 노란색의 색채 정보없는 이미지로 변환
Real–time conversion
활성화
ColorDoctor의 Real-time conversion 활성화 화면

Original image 창에 따라 Filtered image 창이 같이 변합니다.

주의 사항Mode와 Convert image 버튼은 비활성화되며 속도가 느려집니다.

비활성화
ColorDoctor의 Real-time conversion 비활성화 화면

Convert image 버튼 클릭했을 때의 Original image 창에 보이는 모습으로 한변만 변환됩니다.

Original image 창을 움직여도 Filtered image 창은 변하지 않으며 Filtered image 창의 스크롤바를 사용해도 움직이지 않습니다.

Save Image

원본 이미지와 변환된 이미지를 저장할 수 있습니다.

  • 원본 이미지 저장 : Save Original Image (ctrl+Shift+S)
  • 변환된 이미지 저장 : Save Filtered Image (ctrl+S)
이미지 저장 방법
  1. File > Save Original Image (ctrl+Shift+S)나 File > Save Filtered Image (ctrl+S)를 클릭합니다. ColorDoctor의 이미지 저장 방법 화면1
  2. 저장 위치와 파일 이름 작성합니다. ColorDoctor의 이미지 저장 방법 화면2
  3. 파일 형식을 고릅니다. (bitmap, jpeg, png, tiff, gif) ColorDoctor의 이미지 저장 방법 화면3
주의 사항

이미지 저장시 Original image 창 또는 Filtered image 창에 보이는 그대로 저장됩니다.

ColorDoctor의 이미지 저장 결과 화면

ColorSelector

개요

웹접근성 펑가에 도움이 되는 『ColorSelector』 관련 정보를 업로드합니다. ColorSelectorr는 전경색과 배경생을 대비시켜보고 해당사이트의 가독성을 점검해줍니다. ColorSelector를 이용하여 웹접근성 검사 항목 중 "1.3.1 색에 무관한 콘텐츠 인식"을 확인할 수 있습니다.

검사항목 1.3.1 색에 무관한 콘텐츠 인식
점검 기준

콘텐츠는 색에 관계없이 인식되어야 함(차트, 그래프)

점검 방법

흑백 화면에서 충분히 정보를 인지할 수 있어야 함

흑백 프린터로 출력하여 인식가능 체크 후, 색상으로 구분하는 콘텐츠가 없어야 함

대상

전맹, 저시력, 비장애

다음 내용은 FUJITSU 홈페이지에 개제된 ColorDoctor 내용을 가져왔습니다.

FUJITSU [ http://www.fujitsu.com/global/accessibility/assistance/cs/ ]
ColorSelector란?
ColorSelector 소개 사진
ColorSelector

후지스가 무상으로 제공하는 소프트웨어 중 하나인 ColorSelector는 배경색과 전경색을 조합할 때 색약자가 겪을 수 있는 이상유무를 실시간으로 판별해주면서 일반, 백내장, 제1색각(빨강), 제2색각(초록), 제3색각(파랑)의 5가지 색약 분류에 따라 이상 유무를 O/X로 판별해주는소프트웨어입니다.

사람이 점검할 때는 많은 시간과 노력이 들면서도 그 결과의 객관성 확보에 문제가 생길 수 있는 데 이를 예방하여 객관적이면서도 쉽고 빠르게 색상과 관련한 웹 접근성을 점검할 수 있습니다.

언어 : 영어, 일본어, 중국어, 한국어

운영 체제 : Windows, Mac

라이센스 : 무료 소프트웨어

다운로드 및 설치
  1. fujitsu의 ColorSelector Download 접속
  2. 원하는 언어 버전의 Download ColorSelector 5.11 링크 클릭 ColorSelector 다운로드 및 설치 화면1

    페이지 하단의 License Terms and Conditions를 클릭하시면 ColorDoctor의 라이센스 및 이용약관을 보실 수 있습니다.

  3. 파일을 다운받고 원하는 위치에 압축을 푼 후 파일 실행 ColorSelector 다운로드 및 설치 화면2
  4. "Fujitsu ColorSelector" 파일이 만들어 지면서 관련 항목 생김 ColorSelector 다운로드 및 설치 화면3

운영환경 및 NET Framework에서의 설치 방법은 위의 Fujitsu의 ColorSelector 에 있습니다.

주의사항

ColorSelector를 사용하기 위해서는 J2SE가 설치되어야합니다. 참고 사이트에 접속해서 최신 JDK를 다운로드하고 설치해주세요.

참고 [ http://www.oracle.com/technetwork/java/javase/downloads/index.html ]
사용방법
  1. "Fujitsu ColorSelector" 파일 항목 중 ColorSelector 아이콘 클릭 ColorSelector 사용 방법  화면1
  2. ColorSelector 툴 실행 확인 ColorSelector 사용 방법  화면2
  3. 평가하고자 하는 사이트를 열어 ColorSelector 툴과 같이 자리 이동 ColorSelector 사용 방법  화면3

    [스포이트] 버튼을 클릭하면 창이 하나 더 뜨는 데 클릭했을 당시 화면을 캡처한 이미지가 나옵니다.

  4. [스포이트] 버튼을 클릭 ColorSelector 사용 방법  화면4

    문자색을 찾고 싶으면 [문자색을 지정 영역]의 [스포이트] 버튼을, 배경색을 찾고 싶으면 [배경색을 지정 영역]의 [스포이트] 버튼을 클릭

  5. 캡처된 이미지 창에 평가하고자 하는 색을 클릭 ColorSelector 사용 방법  화면5
  6. 판정 결과 확인 ColorSelector 사용 방법  화면6
주의사항 ColorSelector에 나온 색상 값과 HTML 소스 코드에 지정된 값과 일치하지 않는 경우

개인용 컴퓨터 (PC)의 화면 색 품질 (표시 색의 예 수)에 따라 발생할 수 있습니다. 그것은 "풀 컬러"모드를 선택하여 우회 할 수 있습니다. Windows에서 24 비트 (약 16.70 백만 색상) 이상이 선택되어 있으면 [디스플레이 등록 정보]에서 [텍스트 색상을 지정] 값 또는 [지정 배경 스포이트로 선택한 색상 색상]는 HTML 소스 파일에있는 값에 동의해야합니다. 16.70 만 색상 이상을 선택하면 맥 OS X에서, 두 값은 일치해야합니다.