눈이 불편한 사람 중에는 스크린 리더를 활용하여 음성으로 정보를 파악하는 사람도 있지만 잔존 시력이 남아 있는 경우에는 화면을 확대하여 사용하거나, 바탕색과 전경색의 대비를 바꾸어 사용하는 사람도 있다. 또한 바탕색과 전경색을 바꾼 후 화면을 확대하여 사용하는 경우도 있다.
이렇게 사용하는 저시력인의 경우 배경색과 전경색이 대비가 안되는 경우에는 아무리 좋은 정보를 제공한다 해도 제대로 활용할 수 없다.
즉 배경색과 전경색의 대비가 접근에 있어서 대두되는 또 다른 잊혀진 화두이다.
예를 들어 다음과 같이디자인을 우선으로 제공된 경우 어떤 어려움이 있을까?
1. 색 대비(Color Contrast)와 웹 접근 조항
2. 바탕색, 전경색 대비 샘플 보기
3. 인터넷 상에서 색 대비 확인하기
4. Contrast Analyser 2.2
5. 마치며
1. 색 대비(Color Contrast)와 웹 접근 조항
WCAG 1.0 의 2.2에서는 시각적 결함을 가지고 있거나 고대비로 화면을 보는 경우 전경색과 배경색이 충분한 대비를 가지도록 해야 한다고 정의하고 있다.
한국형 웹 콘텐츠 접근성 지침 1.0에서는 항목1.3 색상에 무관한 인식에서 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다고 정의하고 있다.
위의 요구 조건은 다음과 같다.
WCAG 2.0에서는 1.4.3 최소한의 콘트라스트에서는 텍스트 또는 그림화된 텍스트의 경우에는 최소 4.5:1 대비 비율을 가져야 한다고 정의하고 있다.(레벨 AA)
단, 큰 활자나 큰 활자 이미지의 경우에는 최소한의 대비가 3:1이어야 하며,
텍스트 또는 그림화된 이미지로서 사용자 인터페이스 요소의 한 부분이거나, 단순한 장식용이거나, 시각적 확인이 필요없거나(that are not visible to anyone), 중요한 콘텐츠를 포함하는 사진의 일부 또는 로고나 브랜드 이름의 일부로서의 텍스트는 해당 사항이 없다 고 정의하고 있다.
WCAG 2.0의 1.4.6에서는 같은 내용인데도 훨씬 더 기준을 엄격하게 적용(최소 비율 7:1)하고 있다.(레벨 AAA)
2. 바탕색, 전경색 대비 샘플 보기
Wisconsin 대학의 Trace Center에서는 바탕색별 글자색의 색 대비를 3:1 4.5:1 7:1로 구분하여 나타내고 인터넷으로 확인할 수 있는 사이트를 제공하고 있다.
바탕색별 글자색 대비 샘플 사이트
바탕색별 글자색 대비 샘플 사이트
바탕: 검정색 글자: 색깔별 샘플
바탕: 색깔별 글자: 검정색 샘플
바탕: 흰색 글자: 색깔별 샘플
바탕: 색깔별 글자: 흰색 샘플
또한 바탕색의 변화에 따른 글자색의 색 대비 비율을 검정(#000)부터 흰색(#FFF)까지 비율로 나타내며 3:1, 4.5:1, 7:1 달성 여부를 확인할 수 있는 차트를 제공하고 있다.
바탕색 색깔별 글자 색깔별 색 대비 비율 보기
3. 인터넷 상에서 색 대비 확인하기
인터넷 상에서 배경색과 글자색의 비율을 확인하기 위해서는 Colors on the web 사이트를 활용하는 것도 좋다
동 사이트에서 제공하는 Color Contrast Analyzer에서 Background color와 Text color를 입력하면 Large Text와 Small Text 샘플이 나오고, WCAG 2.0의 1.4.3(AA)과 1.4.6(AAA) 그리고 WCAG 1.0의 준수 여부를 확인할 수 있다.
4. Contrast Analyser 2.2
실제로 홈 페이지를 개발하는 입장에서는 오프 라인 상에서 내가 개발한 이미지나 텍스트의 색 대비를 알고 싶어하는 욕구가 있다.
이러한 프로그램의 하나가 Contrast Analyser로서 the Paciello Group에서 개발한 색 대비 확인 프로그램으로서 비교를 원하는 색을 선택하여 대비 비율을 확인할 수 있는 무료 프로그램이다.
Contrast Analyser 2.2 다운 로드
Contrast Analyser 맥용 다운 로드
4.1 설치 및 사용법:
4.1.1 CCA-2.2.zip를 압축푼다.
압축 푼 폴더에서 Colour_Contrast_Analyser.exe에 위치한 후 바탕 화면에 바로가기를 하면 바탕화면에 바로가기 아이콘이 생성된다.
아이콘을 선택하면 Color Contrast Analyzer 2.2가 실행된다.
4.2 Contrast Analyzer 메인 화면:
Contrast Analyzer를 어떤 작업을 하던지 항상 화면 화면의 위에 두고 싶으면 Options > Always on the Top(Ctrl-S)을 실행한다.
4.3 사용법:
4.3.1 Contrast Analyzer가 실행된 상태에서 Foreground Color와 Background color의 HEX 값을 입력하면 색 대비 비율을 바로 알 수 있다.
그러나 이미 작성된 이미지나 본문의 색 대비 비율을 알기 위해서는 먼저 Contrast Analyzer의 Foreground 항목의 color picker 아이콘을 선택한다.
F11을 실행해도 전경색 선택창이 바로 나타난다.
4.3.2 화면에 사각형 박스가 나타나면서 가운데에 색깔을 선택할 수 있는 포인터가 나타난다.
4.3.3 마우스로 확대창의 가운데 포인터를 테스트하고자 하는 Forground 글자에 정확히 위치한 후 클릭하면 확대 박스가 사라진다. Color Contrast Analyzer의 Foreground Colour Select에 선택한 색깔, Hex에는 16진수 값이 자동으로 나타난다.
Foreground의 Hex 값을 RGB 값으로 보려면 Options > displayed color valuem를 Hex에서 RGB로 바꾸면 된다.
HEX값으로 보기:
RGB 값으로 보기:
4.3.4 위와 같은 방법으로 Background 칼라를 선택한다.
4.3.5 Foreground와 Background 색을 선택하면 Luminosity 결과값이 나타난다.
결과는 Contrast Ratio값을 4.6:1 과 같이 나타내며, text의 경우와 Large text의 경우 성공 여부(pass, fail)를 나타낸다.
text는 WCAG 2.0의 1.4.3 Contrast (Minimum) - 4.5:1
Large Text는 WCAG 2.0의 1.4.6 Contrast (Enhanced) - 7:1
Display details를 선택하면 텍스트로 내용이 나타나 복사하여(Copy Results 선택) 다른 곳에 붙여 넣어 사용할 수 있다.
색맹용 대비 결과 보기(Show contrast result for colour blindness)를 선택하면 Normal(정상), Protanopia(제1색맹, 적(赤)색맹), Deuteranopia(제2색맹, 녹(綠)색맹), Tritanopia(제3색맹, 청(靑)색맹)일 비율이 나타난다.
4.4 색깔 선택
4.4.1 color slider 활용:
색깔의 contrast를 비교하기 위해서는 color slider를 활용한다.
Options > Color Slider를 선택하거나 F7을 누르면 RGB를 증감할 수 있는 slider가 나타난다.
Foreground와 Background의 Red, Green, Blue 슬라이더를 좌우로 움직이면 Result 값이 Fail에서 Pass로 바뀌는 것을 볼수 있다.
4.4.2 색상표 활용
자신이 원하는 색을 색상표에서 직접 선택하여 결과를 확인할 수도 있다.
Foreground와 Background의 Colour select 콤보상자를 선택하면 색상표가 나타난다.
전경색 색상표는 F9, 배경색 색상표는 F10을 실행하면 바로 나타난다.
4.5 이미지
현재 컴퓨터의 이미지를 캡춰하기 위해서는 Image 메뉴를 활용한다.
Image 메뉴에는 Select window(List), Select image file, screen이 있다.
4.5.1 Image > Select window(List) 활용
현재 화면에 나타나 있거나 최소화된 화면을 시각의 정도에 어떻게 나타나는지 확인할 수 있으며, 파일로도 저장할 수 있다.
4.5.1.1 Image > Select window(List)를 선택하거나 Ctrl-L를 실행한다.
4.5.1.2 Window List 창이 열린다.
4.5.1.3 현재 열려 있는 윈도우 목록이 Select window에 나타난다.
4.5.1.4 화면으로 보고자 하는 창의 이름을 선택하고 Preview버튼을 선택하면 Progress 대화상자가 나타난다
4.5.1.5 선택한 창이 화면이 나타난다.
4.5.1.6 현재 캡춰한 화면을 시각의 정도에 따라 어떻게 보이는지 확인하기 위해서는 Simulation 항목에서 원하는 형태로 바꾼 후 Preview 버튼을 다시 누르면 된다.
Simulation의 7개 항목은 다음과 같다.
- Protanopia 제1색맹, 적(赤)색맹
- Deuteranopia 제2색맹, 녹(綠)색맹.
- Tritanopia 제3색맹, 청(靑)색맹,
- Grayscale 그레이스케일
- Invert 반전
- Cataracts 백내장
- Normal 정상
정상으로 물체를 보는 경우와 제1색맹, 적(赤)색맹, 제2색맹, 녹(綠)색맹, 제3색맹, 청(靑)색맹인 경우의 상태를 비교해 보자
정상:
Protanopia 제1색맹, 적(赤)색맹:
Deuteranopia 제2색맹, 녹(綠)색맹:
Tritanopia 제3색맹, 청(靑)색맹:
화면을 특정 시력이 어떻게 보이는지 선택하기 위해서 Select window에서 선택하고, Simulation 항목의 7개 중에서 선택한 후 Preview 버튼을 선택해도 된다.
4.5.1.7 저장하기 위해서는 save를 선택하면 특정 형태로 지정한 것처럼 저장이 된다.
4.5.2 Image > Select Image file 활용
4.5.2.1 Image > Select Image file를 선택한다. Image file convert 창이 나타난다.
4.5.2.2 이미지 파일을 선택하기 위하여 Select Image File의 Browse 버튼을 선택하면 파일을 선택하기 위한 열기 대화상자가 나타난다.
4.5.2.3 이미지 파일을 선택하면 해당 이미지 파일이 Image file convert 창의 오른쪽에 나타난다.
4.5.2.4 Simulation의 7개 항목 중에서 한가지를 선택한 후 저장한다.
4.5.3 화면 일부만 특정 형태로 보기
4.5.3.1 Image > Screen를 선택한다. 화면에 Screen convert 창이 나타난다.
마우스로 이동하거나, 키보드의 방향키를 활용하여 특정 형태로 보고자 하는 곳에 위치한다.
4.5.3.2 원하는 곳에 위치한 후, Simulation에서 6가지 항목 중에서 한가지를 선택하면 해당 부분이 변한다.
4.6 단축키
Ctrl-E HEX값 보기
Ctrl-R RGB값 보기
Ctrl-S 항상 위에 두기
Ctrl-L Window 목록(Window list) 보기
F6 결과 보기 바꾸기(색맹, luminosity)
F7 칼라 슬라이더 보이기/감추기
F9 전경색 칼라 팔레트 보이기
F10 배경색 칼라 팔레트 보이기
F11 전경색 선택창 활성화
F12 배경색 선택창 활성화
5. 마치며
텍스트로 시작한 인터넷이 그림, 사운드를 포함한 멀티미디어로 변화하면서 이미지가 중요한 표현 방법의 하나로 자리잡았다. 여러 단어의 텍스트 보다는 한 장의 이미지가 주는 메시지 전달 효과는 매우 크다.
그러나 이미지를 통한 메시지 전달을 중시하고, 미적 감각이 있는 화려한 디자인을 중시하다 보니 눈이 불편한 일부 사람은 아예 내용을 전혀 이해할 수 없거나 어려움을 겪는 수가 많이 있다.
텍스트로 처리해도 될 것을 내용을 알수 없게 화려하게 이미지로 제공하거나, 글자색과 바탕색을 전혀 구분할 수 없도록 자신이나 회사의 디자인 실력을 뽐내는 것 이상이 아니다. 그것으로 인하여 본의아닌 피해를 보고 있는 사람이 있다는 것을 생각해 보았는가?
시각장애인을 위한 점자 블록은 노란색으로 설치해야 하는데 미적 디자인 때문에 검정색으로 설치한다면 누구를 위한 점자블록인가?
디자인을 무시하고 웹 페이지를 만들자는 것이 아니라 이미지로 제공하더라도 대비를 높혀 모든 사람이 내용을 쉽게 접할 수 있도록 고려하자는 것이다. 이것이 웹 접근의 기본 이념이고 기본 철학인 것이다.
다시 한번 웹 창시자 팀 버너스 리 경의 말씀을 생각해 보자
이렇게 사용하는 저시력인의 경우 배경색과 전경색이 대비가 안되는 경우에는 아무리 좋은 정보를 제공한다 해도 제대로 활용할 수 없다.
즉 배경색과 전경색의 대비가 접근에 있어서 대두되는 또 다른 잊혀진 화두이다.
예를 들어 다음과 같이디자인을 우선으로 제공된 경우 어떤 어려움이 있을까?
1. 색 대비(Color Contrast)와 웹 접근 조항
2. 바탕색, 전경색 대비 샘플 보기
3. 인터넷 상에서 색 대비 확인하기
4. Contrast Analyser 2.2
5. 마치며
1. 색 대비(Color Contrast)와 웹 접근 조항
WCAG 1.0 의 2.2에서는 시각적 결함을 가지고 있거나 고대비로 화면을 보는 경우 전경색과 배경색이 충분한 대비를 가지도록 해야 한다고 정의하고 있다.
2.2: Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
한국형 웹 콘텐츠 접근성 지침 1.0에서는 항목1.3 색상에 무관한 인식에서 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다고 정의하고 있다.
위의 요구 조건은 다음과 같다.
웹페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다.
특히 웹페이지의 내용을 고대비(high contrast) 모드로 표시했을 때에도 충분히 명암 대비가 되도록 콘텐츠를 설계하여야 한다 고 정의하고 있다.
WCAG 2.0에서는 1.4.3 최소한의 콘트라스트에서는 텍스트 또는 그림화된 텍스트의 경우에는 최소 4.5:1 대비 비율을 가져야 한다고 정의하고 있다.(레벨 AA)
단, 큰 활자나 큰 활자 이미지의 경우에는 최소한의 대비가 3:1이어야 하며,
텍스트 또는 그림화된 이미지로서 사용자 인터페이스 요소의 한 부분이거나, 단순한 장식용이거나, 시각적 확인이 필요없거나(that are not visible to anyone), 중요한 콘텐츠를 포함하는 사진의 일부 또는 로고나 브랜드 이름의 일부로서의 텍스트는 해당 사항이 없다 고 정의하고 있다.
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast require
WCAG 2.0의 1.4.6에서는 같은 내용인데도 훨씬 더 기준을 엄격하게 적용(최소 비율 7:1)하고 있다.(레벨 AAA)
1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
2. 바탕색, 전경색 대비 샘플 보기
Wisconsin 대학의 Trace Center에서는 바탕색별 글자색의 색 대비를 3:1 4.5:1 7:1로 구분하여 나타내고 인터넷으로 확인할 수 있는 사이트를 제공하고 있다.
바탕색별 글자색 대비 샘플 사이트
바탕색별 글자색 대비 샘플 사이트
바탕: 검정색 글자: 색깔별 샘플
바탕: 색깔별 글자: 검정색 샘플
바탕: 흰색 글자: 색깔별 샘플
바탕: 색깔별 글자: 흰색 샘플
또한 바탕색의 변화에 따른 글자색의 색 대비 비율을 검정(#000)부터 흰색(#FFF)까지 비율로 나타내며 3:1, 4.5:1, 7:1 달성 여부를 확인할 수 있는 차트를 제공하고 있다.
바탕색 색깔별 글자 색깔별 색 대비 비율 보기
3. 인터넷 상에서 색 대비 확인하기
인터넷 상에서 배경색과 글자색의 비율을 확인하기 위해서는 Colors on the web 사이트를 활용하는 것도 좋다
동 사이트에서 제공하는 Color Contrast Analyzer에서 Background color와 Text color를 입력하면 Large Text와 Small Text 샘플이 나오고, WCAG 2.0의 1.4.3(AA)과 1.4.6(AAA) 그리고 WCAG 1.0의 준수 여부를 확인할 수 있다.
4. Contrast Analyser 2.2
실제로 홈 페이지를 개발하는 입장에서는 오프 라인 상에서 내가 개발한 이미지나 텍스트의 색 대비를 알고 싶어하는 욕구가 있다.
이러한 프로그램의 하나가 Contrast Analyser로서 the Paciello Group에서 개발한 색 대비 확인 프로그램으로서 비교를 원하는 색을 선택하여 대비 비율을 확인할 수 있는 무료 프로그램이다.
Contrast Analyser 2.2 다운 로드
Contrast Analyser 맥용 다운 로드
4.1 설치 및 사용법:
4.1.1 CCA-2.2.zip를 압축푼다.
압축 푼 폴더에서 Colour_Contrast_Analyser.exe에 위치한 후 바탕 화면에 바로가기를 하면 바탕화면에 바로가기 아이콘이 생성된다.
아이콘을 선택하면 Color Contrast Analyzer 2.2가 실행된다.
4.2 Contrast Analyzer 메인 화면:
Contrast Analyzer를 어떤 작업을 하던지 항상 화면 화면의 위에 두고 싶으면 Options > Always on the Top(Ctrl-S)을 실행한다.
4.3 사용법:
4.3.1 Contrast Analyzer가 실행된 상태에서 Foreground Color와 Background color의 HEX 값을 입력하면 색 대비 비율을 바로 알 수 있다.
그러나 이미 작성된 이미지나 본문의 색 대비 비율을 알기 위해서는 먼저 Contrast Analyzer의 Foreground 항목의 color picker 아이콘을 선택한다.
F11을 실행해도 전경색 선택창이 바로 나타난다.
4.3.2 화면에 사각형 박스가 나타나면서 가운데에 색깔을 선택할 수 있는 포인터가 나타난다.
4.3.3 마우스로 확대창의 가운데 포인터를 테스트하고자 하는 Forground 글자에 정확히 위치한 후 클릭하면 확대 박스가 사라진다. Color Contrast Analyzer의 Foreground Colour Select에 선택한 색깔, Hex에는 16진수 값이 자동으로 나타난다.
Foreground의 Hex 값을 RGB 값으로 보려면 Options > displayed color valuem를 Hex에서 RGB로 바꾸면 된다.
HEX값으로 보기:
RGB 값으로 보기:
4.3.4 위와 같은 방법으로 Background 칼라를 선택한다.
4.3.5 Foreground와 Background 색을 선택하면 Luminosity 결과값이 나타난다.
결과는 Contrast Ratio값을 4.6:1 과 같이 나타내며, text의 경우와 Large text의 경우 성공 여부(pass, fail)를 나타낸다.
text는 WCAG 2.0의 1.4.3 Contrast (Minimum) - 4.5:1
Large Text는 WCAG 2.0의 1.4.6 Contrast (Enhanced) - 7:1
Display details를 선택하면 텍스트로 내용이 나타나 복사하여(Copy Results 선택) 다른 곳에 붙여 넣어 사용할 수 있다.
Foreground:#0B8174 Background:#FFFFFF
The contrast ratio is: 4.8:1
Text passed at Level AA
Text failed at Level AAA
Large text passed at Level AA
Large text passed at Level AAA
SC 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
SC 1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1
Note: 1. Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement. 2. Text that is part of a logo or brand name has no minimum contrast requirement.
색맹용 대비 결과 보기(Show contrast result for colour blindness)를 선택하면 Normal(정상), Protanopia(제1색맹, 적(赤)색맹), Deuteranopia(제2색맹, 녹(綠)색맹), Tritanopia(제3색맹, 청(靑)색맹)일 비율이 나타난다.
4.4 색깔 선택
4.4.1 color slider 활용:
색깔의 contrast를 비교하기 위해서는 color slider를 활용한다.
Options > Color Slider를 선택하거나 F7을 누르면 RGB를 증감할 수 있는 slider가 나타난다.
Foreground와 Background의 Red, Green, Blue 슬라이더를 좌우로 움직이면 Result 값이 Fail에서 Pass로 바뀌는 것을 볼수 있다.
4.4.2 색상표 활용
자신이 원하는 색을 색상표에서 직접 선택하여 결과를 확인할 수도 있다.
Foreground와 Background의 Colour select 콤보상자를 선택하면 색상표가 나타난다.
전경색 색상표는 F9, 배경색 색상표는 F10을 실행하면 바로 나타난다.
4.5 이미지
현재 컴퓨터의 이미지를 캡춰하기 위해서는 Image 메뉴를 활용한다.
Image 메뉴에는 Select window(List), Select image file, screen이 있다.
4.5.1 Image > Select window(List) 활용
현재 화면에 나타나 있거나 최소화된 화면을 시각의 정도에 어떻게 나타나는지 확인할 수 있으며, 파일로도 저장할 수 있다.
4.5.1.1 Image > Select window(List)를 선택하거나 Ctrl-L를 실행한다.
4.5.1.2 Window List 창이 열린다.
4.5.1.3 현재 열려 있는 윈도우 목록이 Select window에 나타난다.
4.5.1.4 화면으로 보고자 하는 창의 이름을 선택하고 Preview버튼을 선택하면 Progress 대화상자가 나타난다
4.5.1.5 선택한 창이 화면이 나타난다.
4.5.1.6 현재 캡춰한 화면을 시각의 정도에 따라 어떻게 보이는지 확인하기 위해서는 Simulation 항목에서 원하는 형태로 바꾼 후 Preview 버튼을 다시 누르면 된다.
Simulation의 7개 항목은 다음과 같다.
- Protanopia 제1색맹, 적(赤)색맹
- Deuteranopia 제2색맹, 녹(綠)색맹.
- Tritanopia 제3색맹, 청(靑)색맹,
- Grayscale 그레이스케일
- Invert 반전
- Cataracts 백내장
- Normal 정상
정상으로 물체를 보는 경우와 제1색맹, 적(赤)색맹, 제2색맹, 녹(綠)색맹, 제3색맹, 청(靑)색맹인 경우의 상태를 비교해 보자
정상:
Protanopia 제1색맹, 적(赤)색맹:
Deuteranopia 제2색맹, 녹(綠)색맹:
Tritanopia 제3색맹, 청(靑)색맹:
화면을 특정 시력이 어떻게 보이는지 선택하기 위해서 Select window에서 선택하고, Simulation 항목의 7개 중에서 선택한 후 Preview 버튼을 선택해도 된다.
4.5.1.7 저장하기 위해서는 save를 선택하면 특정 형태로 지정한 것처럼 저장이 된다.
4.5.2 Image > Select Image file 활용
4.5.2.1 Image > Select Image file를 선택한다. Image file convert 창이 나타난다.
4.5.2.2 이미지 파일을 선택하기 위하여 Select Image File의 Browse 버튼을 선택하면 파일을 선택하기 위한 열기 대화상자가 나타난다.
4.5.2.3 이미지 파일을 선택하면 해당 이미지 파일이 Image file convert 창의 오른쪽에 나타난다.
4.5.2.4 Simulation의 7개 항목 중에서 한가지를 선택한 후 저장한다.
4.5.3 화면 일부만 특정 형태로 보기
4.5.3.1 Image > Screen를 선택한다. 화면에 Screen convert 창이 나타난다.
마우스로 이동하거나, 키보드의 방향키를 활용하여 특정 형태로 보고자 하는 곳에 위치한다.
4.5.3.2 원하는 곳에 위치한 후, Simulation에서 6가지 항목 중에서 한가지를 선택하면 해당 부분이 변한다.
4.6 단축키
Ctrl-E HEX값 보기
Ctrl-R RGB값 보기
Ctrl-S 항상 위에 두기
Ctrl-L Window 목록(Window list) 보기
F6 결과 보기 바꾸기(색맹, luminosity)
F7 칼라 슬라이더 보이기/감추기
F9 전경색 칼라 팔레트 보이기
F10 배경색 칼라 팔레트 보이기
F11 전경색 선택창 활성화
F12 배경색 선택창 활성화
5. 마치며
텍스트로 시작한 인터넷이 그림, 사운드를 포함한 멀티미디어로 변화하면서 이미지가 중요한 표현 방법의 하나로 자리잡았다. 여러 단어의 텍스트 보다는 한 장의 이미지가 주는 메시지 전달 효과는 매우 크다.
그러나 이미지를 통한 메시지 전달을 중시하고, 미적 감각이 있는 화려한 디자인을 중시하다 보니 눈이 불편한 일부 사람은 아예 내용을 전혀 이해할 수 없거나 어려움을 겪는 수가 많이 있다.
텍스트로 처리해도 될 것을 내용을 알수 없게 화려하게 이미지로 제공하거나, 글자색과 바탕색을 전혀 구분할 수 없도록 자신이나 회사의 디자인 실력을 뽐내는 것 이상이 아니다. 그것으로 인하여 본의아닌 피해를 보고 있는 사람이 있다는 것을 생각해 보았는가?
시각장애인을 위한 점자 블록은 노란색으로 설치해야 하는데 미적 디자인 때문에 검정색으로 설치한다면 누구를 위한 점자블록인가?
디자인을 무시하고 웹 페이지를 만들자는 것이 아니라 이미지로 제공하더라도 대비를 높혀 모든 사람이 내용을 쉽게 접할 수 있도록 고려하자는 것이다. 이것이 웹 접근의 기본 이념이고 기본 철학인 것이다.
다시 한번 웹 창시자 팀 버너스 리 경의 말씀을 생각해 보자
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
덧글
아이폰 설정 메뉴의 '손쉬운 사용' 란에 보면
장애우들을 위한 여러 가지 메뉴가 있습니다. 검정바탕에 흰색 세팅, VoiceOver 기능 등
여기 http://xguru.net/623 에 시각장애를 가진 분의 아이폰 체험기가 있습니다.