Xbox 접근성 지침 102: 대비
목표
XAG(Xbox 접근성 지침)의 목표는 시각적 요소와 배경 사이에 충분한 대비를 제공하여 이러한 요소가 낮은 시력을 가진 게이머가 해석할 수 있도록 하는 것입니다.
개요
세상에는 시력이 낮은 사람들이 약 29억 명이나 있습니다. 게임의 기본 설정으로 인해 UI 요소가 배경과 강하게 대비되지 않아 시력이 낮은 플레이어 또는 색시력이 부족한 플레이어가 이러한 요소를 인식하고 사용하기 어려울 수 있습니다.
대비 비율은 요소의 전경과 배경 사이의 광도 값 차이입니다. 대비 구성성 지원은 장애를 가진 게이머들이 자신의 배경에 대한 화면의 요소 가시성을 높이는 데 도움을 주는 도구로 사용할 수 있습니다. 일반적으로 대비 비율이 "강할수록” 요소의 가시성이 커집니다. 플레이어가 낮은 대비와 가시성 때문에 시각적 요소를 인식할 수 없는 경우, 해당 요소를 이해하거나 사용하는 능력이 필요한 게임 플레이의 측면에서는 제외될 수 있습니다. 이는 궁극적으로 게임 플레이에서 완전히 배제되는 결과를 초래할 수 있습니다. 예를 들어, 게임 플레이에 중요한 정보를 제공하지만 플레이어가 볼 수 있을 만큼 요소 및 배경 간 대비가 충분하지 않은 화면의 미니 맵을 생각해 보세요. 이제 다음 목표를 탐색하거나, 적이나 체크포인트가 있는 곳을 식별하거나, 미니 맵에서 알려주는 다른 중요한 작업을 수행하지 못할 수 있습니다.
범위 지정 질문
게임에서 중요한 시각적 요소가 배경과 대비되여 표시되나요?
메뉴 UI에서 텍스트와 배경색을 확인할 수 있나요?
헤드업 디스플레이(HUD) 요소의 배경색(상태 미터, 텍스트 및 미니 맵 요소 등)인가요?
주요 게임 플레이 요소(예: 대상 아이콘은 회색이며 일반적으로 어두운 게임 환경 배경과 비교하여 식별되어야 함)는 무엇인가요?
배경 및 기본 정보
대비와 비전
시각적 요소와 배경 사이의 강한 대비 비율을 유지하면 시력이 낮은 플레이어의 경우 이러한 요소의 가시성이 향상됩니다. 다음은 텍스트 색상과 컨텍스트 배경 간의 대비 비율의 몇 가지 예입니다. 또한, 이 예제에서는 플레이어에게 선명도에 영향을 미치는 저시력 유형이 있거나 직사광선이나 거리에서 노는 것과 같은 상황적 장애가 있는 경우 대비 비율이 낮은 텍스트를 읽기가 어떻게 더 어려울 수 있는지에 대한 시뮬레이션을 제공합니다. 선명도가 감소하면 대비 비율이 강한 텍스트가 대비 비율이 약한 텍스트보다 훨씬 더 잘 표시됩니다.
또한 읽기 어려움과 같은 인지 장애가 있는 플레이어는 고대비 사용자 인터페이스의 텍스트를 인식하기 어려울 수 있다는 점에 유의해야 합니다. 고대비 환경을 최소한으로 지원해야 하지만 구성 가능한 대비 옵션을 사용하면 더 많은 게이머의 요구를 충족할 수 있습니다.
접근 가능한 대비 비율이 중요한 핵심 영역
게임 환경의 모든 컨텍스트에서 텍스트 및 시각적 요소가 배경과 강한 대비 비율을 유지하도록 하는 것이 중요합니다. 다음은 평가할 주요 영역에 대한 제안 사항입니다.
텍스트 요소
게임에서 중요한 텍스트 요소가 자주 발견되는 위치에 대한 자세한 내용은 XAG 101: 텍스트 표시를 참조하세요.
메뉴 UI의 텍스트
활성 게임 실행 중에 화면에 나타나는 텍스트
파티 대화 창의 텍스트(입력 필드 텍스트, 자리 표시자 텍스트, 송신 및 수신 메시지 텍스트)
자막 및 캡션 텍스트
귀중한 정보를 제공하는 화면 로딩에 관한 텍스트
오류 메시지, 토스트 메시지 또는 기타 제목별 알림에 대한 텍스트
텍스트가 아닌 시각적 요소
시각적 단서:
예제(확장 가능)
아이콘 타겟팅과 같은 게임 플레이의 비텍스트 시각적 요소나, 플레이어의 샷 위치에 대한 방향 정보를 플레이어에게 전달하는 "할로" 효과도 고대비 없이 보기 어려운 영역입니다.
Immortals Fenyx Rising은 검은색 윤곽선의 흰색 방향 화살표를 사용하여 플레이어에게 다가올 공격과 공격이 오는 방향을 시각적으로 알립니다.
참고 항목
아이콘 또는 기타 중요한 요소를 대상으로 하는 데 빨간색과 녹색을 사용하면 특정 유형의 색맹을 가진 플레이어에게 어려움을 줄 수 있습니다. 색맹 접근성 모범 사례에 대한 자세한 내용은 XAG 103: 시각 및 오디오 단서에 대한 추가 채널을 참조하세요.
화면 HUD 요소(예: 상태 측정기, 방향 신호 및 지도 요소)에서 다음을 수행합니다.
예(확장 가능)
상태 측정기, 보너스 측정기 및 화면 목표도 플레이어에게 중요한 정보를 제공합니다. 이러한 요소는 대비를 평가할 때도 검토해야 합니다.The Outer Worlds에서는 HUD 요소의 불투명 배경에 대한 밝은 노란색 텍스트와 함께 밝은 빨간색 및 보라색 미터 주위의 흰색 윤곽선이 가시성을 높입니다.
버튼, 슬라이더 및 기타 컨트롤은 다음과 같습니다.
예(확장 가능)
다수의 게임에 플레이어를 지원하기 위해 화면 주변 장치에 미니 맵이 있습니다. 이러한 맵의 요소는 시각적으로 구별하기 어려운 경우가 많으며 요소와 배경 간의 고대비 비율의 이점을 얻을 수 있습니다. 마찬가지로, 크기에 상관없이 게임 플레이, 텍스트 기호 및 지도 화면에 나타나는 기타 요소에 대한 주요 정보를 제공하는 모든 지도는 대비가 강해야 합니다.Forza Horizon 4에서 지도 요소는 검은색 윤곽선과 검은색 텍스트 아래에 노란색으로 채워져 있어 지도 나머지 부분에 대한 대비와 가시성을 향상시킵니다.
기호 또는 문자 모양:
예(확장 가능)
플레이어가 슬라이더나 버튼을 배경과 명확하게 구분하는 것이 중요합니다. 슬라이더 유형 요소는 볼륨 또는 텍스트 크기 조절과 같은 접근성 설정 메뉴에서 자주 사용됩니다.Minecraft에서 슬라이더 탭은 어두운 회색 바탕에 대해 보이는 검은색 윤곽과 함께 밝은 회색입니다. 흰색 "채팅 텍스트 불투명도: 79%" 텍스트는 슬라이더의 전체 배경과 슬라이더 자체와 대비되는 고대비 비율도 유지합니다.
Gears Tactics에서 원형 슬라이더 탭은 배경의 진한 파란색에서 검은색의 그라데이션과 높은 대비를 유지하는 밝은 빛을 내는 흰색 원입니다.
기호, 문자 모양 또는 이미지가 플레이어에게 중요한 정보를 전달하는 경우 이러한 요소를 배경과 쉽게 구별하는 것이 중요합니다.
For Honor의 이 예제에서는 팀 방패 내부의 기호는 단색 배경으로 표시됩니다. 흰색 윤곽선은 어두운 배경(암벽에 주황색 검 기호와 같은)에 대해 기호가 계속 보이는 반면, 검은색 윤곽선은 밝은 배경(광성 배경에 대한 파란색 성 기호와 같은)에 대해 기호가 계속 보이도록 합니다.
문자 및 플랫폼:
예(확장 가능)
캐릭터 또는 기타 주요 게임 플레이 요소를 설명하면 배경에 대한 요소의 대비를 높이는 데 도움이 됩니다. 윤곽선에 사용되는 색상은 구성이 가능하거나 기본적으로 나타나는 모든 배경과 강한 대비를 제공해야 합니다.Eagle Island에서는 플레이어가 설정 메뉴에서 배경을 흐리게 표시하도록 선택할 수 있습니다. 흐리게 100%로 설정하면 배경은 포리스트 설정에서 검은색 배경으로 바뀝니다. 또한 플레이어는 "캐릭터 개요" 및 "플랫폼 개요"를 수행할 수 있습니다. 이렇게 하면 이러한 요소 주위에 흰색 윤곽선이 추가되어 대비와 가시성이 더욱 향상됩니다.
이 예제에서는 게임 Eagle Island의 배경이 흐리게 표시되지 않고, 비교를 위해 "윤곽 문자"와 “윤곽 플랫폼"이 활성화되지 않았습니다.
주요 정보가 들어 있는 이미지입니다.
대비 측정 방법
요소 및 요소의 배경을 측정하여 대비 비율을 충족하는 데 사용할 수 있는 도구는 여러 가지가 있습니다.
대비 측정 도구는 다음과 같습니다.
Windows용 접근성 인사이트
Paciello Group별 색상 대비 분석기
대비를 개선하기 위한 일반적인 접근 방식
가능한 한 많은 플레이어가 텍스트에 액세스할 수 있도록 하는 가장 좋은 방법은 플레이어에게 UI를 가장 잘 구성할 수 있는 선택권을 제공하는 것입니다.
게임 플레이 환경은 시각적 흐름이 일정하며 텍스트, 기호 또는 시각적 신호와 같은 화면 구성요소가 모든 게임 플레이 시나리오에서 대비 비율을 항상 충족하지는 못합니다.
다음은 대비를 높이는 데 도움이 되는 몇 가지 일반적인 방법입니다.
플레이어에게 화면 텍스트 뒤에 배경을 고정하는 옵션을 제공하거나 해당 배경의 불투명도를 조정할 수 있는 옵션을 제공합니다.
플레이어에서 가장 많이 볼 수 있는 색을 선택할 수 있도록 화면 텍스트 및 요소에 대한 색 옵션을 제공합니다.
게임의 여러 측면에서 고대비 모드를 지원합니다.
텍스트 또는 요소 주위에 테두리를 추가합니다.
Minecraft에서 플레이어는 텍스트 채팅 배경의 불투명성을 조정할 수 있습니다.
Fallout에서: 새로운 라스베이거스에서 HUD 색은 플레이어가 변경할 수 있습니다.
구현 지침
다음은 게임에서 더 많은 플레이어의 접근성 요구 사항을 충족하기 위해 대비 설정에 대한 구성 가능한 최소 금액을 제공하도록 하는 몇 가지 지침입니다.
참고 항목
대비 비율을 측정하는 도구는 이 항목 앞부분의 "대비 측정 방법" 섹션에 있습니다.
대규모 텍스트와 대규모 시각적 요소는 배경과 3:1 대비를 충족해야 합니다.
본체에서 큰 텍스트는 다음과 같이 정의됩니다.
1080p에서 52px
4K에서 104px
PC/VR에서 큰 텍스트는 다음과 같이 정의됩니다.
1080p에서 36px
4K에서 72px
모바일/Xbox 게임 스트리밍에서 큰 텍스트는 다음과 같이 정의됩니다.
100 DPI에서 36px
200 DPI에서 72px
400 DPI에서 144px
DPI가 증가할수록 선형으로 확장
중요한 정보나 컨텍스트를 제공하는 표준 크기 텍스트와 시각적 요소(대규모로 간주되지 않는 요소)는 배경에 대해 4.5:1 이상의 대비가 있어야 합니다.
활성 요소의 텍스트는 배경 대비 최소 3:1의 대비 비율을 충족해야 합니다.
- 비활성 요소는 기호, 문자 모양 또는 UI 내에 표시되는 다른 시각적 요소 안에 텍스트를 포함할 수 있지만 다음과 같은 시나리오로 인해 상호 작용할 수 없습니다.
- 플레이어가 비활성 요소와 연결된 게임 영역, 항목 또는 옵션을 아직 잠금 해제하지 않음
- 플레이어의 소프트웨어 또는 하드웨어 기술 사양과 비활성 옵션의 요구 사항 간에 호환성이 부족하여 옵션 또는 시각적 요소가 비활성화됨
- 해당 플레이어와 관련된 상황으로 인해 UI 내에 있는 시각적 요소와 상호 작용할 수 없는 다른 모든 시나리오
예(확장 가능)
비활성 텍스트의 예는 아니지만, Fenyx Immortals Rising에서 아직 잠금 해제되지 않은 인게임 요소는 게임 환경에서 시각적으로 두드러지도록 밝은 빨간색 잠금 아이콘이 위에 표시됩니다.
Sea of Thieves 스토어에서 플레이어가 개별적으로 구매할 수 없는 항목 위로 포커스를 이동하면 "번들 전용"이라는 단어가 항목 위에 오버레이됩니다. "번들 전용" 텍스트는 최소 3:1 대비 비율을 충족합니다.
- 비활성 요소는 기호, 문자 모양 또는 UI 내에 표시되는 다른 시각적 요소 안에 텍스트를 포함할 수 있지만 다음과 같은 시나리오로 인해 상호 작용할 수 없습니다.
자리 표시자 텍스트 또는 입력 필드에 입력하는 텍스트는 입력 필드 배경 대비 최소 대비 비율 4.5:1(큰 비율 텍스트의 경우 3:1)을 충족해야 합니다.
예(확장 가능)
Dragon Quest XI S: Echoes of an Elusive Age에서 플레이어에게 캐릭터 이름의 글자 길이를 알려주는 자리 표시자 별표 아이콘이 4.5:1 대비율을 충족합니다.
고대비 모드(밝은 모드, 어두운 모드 또는 둘 다)를 제공해야 합니다. 활성화된 경우, 배경에 대한 모든 UI 요소의 대비 비율이 7:1 이상이어야 합니다.
예(확장 가능)
Hyperdot 게임에는 어두운 모드와 밝은 하이퍼링크 모드가 모두 존재합니다. 이 모드를 사용하도록 설정하면 제시된 모든 시각적 요소의 배경에 7:1 대비 비율이 표시됩니다.
참고 항목
많은 사용자가 고대비 모드를 밝은 요소와 어두운 요소 간의 구분을 더욱 분명히 하기 위한 것이라고 오해하지만 실제 고대비 모드의 용도는 다음과 같습니다.
- 중요한 요소의 가시성 향상
- 다양한 유형의 중요한 요소 간의 시각적 구분 향상
- 중요한 요소와 중요하지 않은 요소 간의 시각적 구분 향상
대비 비율 요약 차트
텍스트 크기 | 대비 비율 |
---|---|
표준 크기 텍스트 또는 시각적 요소 | 4.5:1 |
대규모 텍스트 및 시각적 요소 | 3:1 |
비활성 요소 텍스트 | 3:1 |
고대비 모드 요소 | 7:1 |
자리 표시자 또는 입력 필드 텍스트 | 4.5:1(표준 크기) 3:1(큰 비율) |
단색이 아닌 배경 위에 텍스트가 표시되면 텍스트와 배경의 대비가 가장 낮은 영역 사이의 텍스트 대비 비율을 측정해야 합니다.
예제(확장 가능)
Sea of Thieves에서는 텍스트 뒤에 더 밝고 어두운 청록색 패치가 있습니다. 대비 측정값을 측정할 때 배경색에 2개의 연한 색을 사용해야 합니다.
가능한 경우, 플랫폼 제공 대비 설정을 읽어 게임을 시작할 때 기본적으로 고대비 모드를 켜거나 끌지 여부를 결정한 다음, 그에 따라 게임 UI를 조정하세요.
예제(확장 가능)
게임이 시스템의 플랫폼 설정을 읽을 수 있는 경우 초기 실행 시 자동으로 적용됩니다. 플레이어가 시스템 또는 플랫폼 수준에서 고대비 모드를 사용하고 게임도 고대비 모드를 제공하는 경우 플레이어가 게임 설정을 재구성할 때까지 게임 시작시 활성화됩니다. 이 예제에서는 플레이어의 시스템 설정에서 고대비 모드를 사용할 수 있습니다. Microsoft Solitaire를 열면 게임에 고대비 버전도 열립니다.
표준 게임 모드
고대비 모드
플레이어가 전경 및 배경 텍스트 색을 구성/설정할 수 있습니다.
색만 사용하여 정보를 전달하지 않습니다. 이 옵션을 사용할 수 없는 경우 플레이어에게 주요 게임 요소의 색을 선택할 수 있는 옵션을 제공합니다.
예제(확장 가능)
Battlefield 2042의 접근성 메뉴에는 HUD 아이콘 색을 사용자 지정하는 색맹 옵션이 있습니다. 옵션은 녹색맹, 청색맹, 적색맹, 사용자 지정으로 나뉩니다. 사용자 지정 옵션을 사용하면 플레이어가 본인에게 가장 잘 맞는 특정 색과 색조를 선택할 수 있습니다. 게임에서 플레이어가 선택한 색을 그림자, 중간, 밝은 게임 환경에서 보여주는 미리 보기도 제공됩니다.
이미지는 로고 형식을 제외한 텍스트를 포함해서는 안 됩니다.
예(확장 가능)
정적 이미지 파일 내에 있는 텍스트와 해당 텍스트가 대비 비율을 충족하도록 조정할 수 없으므로 이미지 파일에 텍스트를 포함할 수 없습니다.Gears 5의 이 예제에서는 배경 이미지의 일부가 아닌 "Versus" 텍스트와 아래의 문장 설명자가 텍스트 요소입니다. 텍스트는 이미지 위에 겹쳐질 수 있는 고유한 UI 요소여야 합니다. 이상적으로 텍스트 뒤에 반 불투명 배경을 배치하여 대비 비율을 높일 수 있습니다. 텍스트는 이미지 자체의 일부가 아니어야 합니다. 이렇게 하면 화면 내레이션 호환성이 보장됩니다.
로고 또는 브랜드 이름의 일부인 텍스트 또는 시각적 요소에는 최소 대비 요구 사항이 없습니다.
예(확장 가능)
메뉴 화면의 게임 타이틀 로고와 같은 로고타입은 대비를 테스트할 필요가 없습니다.이 Age of Empire 2 예제에서는 텍스트가 게임 로고의 일부이기 때문에 메뉴 상단에 있는 "Age of Empire 2" 텍스트가 대비 요구 사항을 충족하지 않습니다.
순수한 장식이거나, 다른 사람에게는 보이지 않거나, 중요한 다른 시각적 내용이 포함된 그림의 일부인 텍스트 또는 시각적 요소에는 대비 요구 사항이 없습니다.
예(확장 가능)
순전히 장식용이고 플레이어에게 중요한 정보를 제공하지 않는 이미지 및 요소는 대비를 테스트할 필요가 없습니다.이 Gears 5 Versus 메뉴 화면에서 강조 표시된 요소는 완전히 장식적입니다. 이 요소들은 해당 페이지에서 오직 미학적인 기능만 수행합니다. 따라서 대비 지침의 적용을 받지 않습니다.
참고 항목
이 이미지는 화면 오른쪽 상단의 녹색 직사각형 표시기와 이 예에서 참조하는 장식 이미지를 강조하기 위해 화면 중앙 하단에 두 개의 화살표를 포함하도록 편집되었습니다. 이러한 녹색 요소는 Gears 5 UI에 속하지 않습니다.
잠재적인 플레이어 영향
이 XAG의 지침은 다음 플레이어들의 장벽을 완화하는 데 도움이 될 수 있습니다.
플레이어 | |
---|---|
시력이 낮은 플레이어 | X |
색 지각이 거의 없거나 전혀 없는 플레이어 | X |
청각이 없는 플레이어 | X |
청각이 제한된 플레이어 | X |
인지 또는 학습 장애가 있는 플레이어 | X |
기타: 작은 화면에서 텍스트를 읽거나, 화면에서 멀리 떨어져 앉아있거나, 빛 반사가 있는 화면이나 저대비 디스플레이에서 텍스트를 읽는 게이머 | X |
리소스 및 도구
리소스 종류 | 원본에 연결 |
---|---|
문서 | 텍스트/UI와 배경 사이에 고대비 제공 |
문서 | 대비 조정 옵션 제공(외부) |
문서 | 텍스트 색 선택권, 저/고대비 선택권을 최소로 제공(외부) |
도구 | Windows용 접근성 인사이트(외부) |
도구 | CCA(색상 대비 분석기)(외부) |
도구 | 색상 Oracle(외부) |
도구 | 대비 비율 도구(외부) |
Microsoft Game Development Kit API | XHighContrastGetMode (이 링크에는 NDA Xbox 프로그램에서 제공하는 로그인 자격 증명이 필요할 수 있습니다.) |