디자인에 접근성 통합

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

색 사용에 대한 두 가지의 중요한 고려 사항을 확인할 수 있습니다.
텍스트와 아이콘에 적절한 색, 대비 및 비율을 적용할 수 있습니다.
애니메이션이 사용자 건강에 미칠 수 있는 영향에 대해 설명할 수 있습니다.

색의 중요성

첫 번째 유닛에서는 다양한 사용자가 UI를 이해하고 탐색하는 방법에 대해 개괄적으로 알아보았습니다. 이 유닛에서는 디자인 세부 사항에 대해 심층적으로 알아봅니다. 색은 종종 디자인에 필수적인 요소입니다. 색은 주의를 끌고, 브랜드를 지정하고, 의미를 전달하고, 요소를 그룹화하는 등의 용도로 사용할 수 있습니다. 색은 디자인에 많은 이점을 더하지만, 올바르게 사용하지 않으면 장애인에게 장벽이 될 수 있습니다.

색과 접근성에 관해 중요하게 고려해야 하는 사항은 두 가지입니다.

의미를 부여하는 색
인접 색 간 대비

의미로서의 색

색은 화면 상의 콘텐츠에 의미를 부여하는 데 유용한 도구가 될 수 있지만, 정보를 표시하거나 행동을 요청하기 위해 색만 사용해서는 안 됩니다. 채팅 애플리케이션의 사용자 목록이 표시된 아래 이미지에는 잘못된 색 사용의 예가 나와 있습니다. 목록은 사용자 상태를 표시하며, 여기서 녹색 Wi-Fi 아이콘은 대화 가능을 의미하고 주황색 Wi-Fi 아이콘은 유휴, 빨간색 Wi-Fi 아이콘은 오프라인을 의미합니다.

사용자의 연락처를 사용자 이름 옆의 주황색, 빨간색 또는 녹색 Wi-Fi 아이콘과 함께 표시하여 사용자의 상태가 유휴인지 대화 가능인지 나타내는 Chat 애플리케이션

최대 12명 중 1명의 남성과 200명 중 1명의 여성이 색맹이며, 이런 사람은 연락처 상태가 대화 가능인지 유휴인지 구별할 수 없습니다.

이 방법 대신, 디자이너는 상태마다 다른 아이콘을 사용하여 예를 들어 대화 가능을 녹색 Wi-Fi 아이콘, 유휴를 회색 스누즈 아이콘, 부재를 빨간색 오프라인 아이콘으로 나타내고 각 아이콘이 전달하는 정보를 색으로 보완할 수 있습니다.

녹색 Wi-Fi 아이콘, 회색 스누즈 아이콘 및 빨간색 오프라인 아이콘이 있는 연락처 목록을 표시하는 Chat 애플리케이션

색 대비

색을 사용하여 디자인할 때 두 번째로 고려해야 하는 사항은 텍스트 색과 텍스트를 표시하는 배경 사이의 대비입니다. 콘텐츠 익스피리언스 팀과 함께 훌륭한 콘텐츠를 만들면서 시력이 약한 사람과 고밀도 레티나 디스플레이를 사용하지 않는 사람 등 대부분의 사용자가 콘텐츠를 볼 수 있도록 하고 싶습니다.

WCAG(Web Content Accessibility Guidelines) 2.0에 따르면, 텍스트와 텍스트 배경 간 대비율은 4.5:1 이상이어야 합니다. 글꼴이 24픽셀 또는 19픽셀 굵은체 이상인 경우 이 비율은 3:1로 낮아집니다.

다시 말해, 텍스트가 24픽셀이거나 19픽셀이거나 이보다 더 크면 흰색 배경에 사용할 수 있는 가장 밝은 회색은 다음과 같은 #959595입니다.

흰색 배경에 ‘나는 큰 텍스트’라고 써 있는 큰 굵은체 회색 텍스트

텍스트가 더 작은 경우 흰색 배경에 사용할 수 있는 가장 밝은 회색은 #767676입니다. 배경이 회색인 경우 텍스트가 다음과 같이 더 어두워야 합니다.

흰색 배경에 ‘I am normal text(나는 일반 텍스트)’라고 써 있는 더 어두운 회색의 더 작은 텍스트

WCAG 2.0에 따르면, 현재 비활성화된 상태인 로고 또는 요소는 이 표준에서 제외됩니다. 여기에는 비활성 버튼 또는 메뉴 항목이 포함됩니다. 양식 필드의 자리 표시자 텍스트는 이 표준에서 제외되지 않습니다.

개선된 WCAG 2.1 규칙에는 더 많은 색 대비 요구 사항이 도입되었습니다. 여기에는 사용자 인터페이스 구성 요소 및 상태를 식별하는 데 필요한 시각 정보의 색 대비 요구 사항이 포함됩니다. 다시 말해, 이제는 입력 필드 및 버튼 테두리, 포커스 상태, 그리고 심지어는 차트의 시각적 부분 등에도 3:1 비율 요구 사항이 적용됩니다. 아래의 데이터 입력 필드를 예로 들어 보겠습니다.

입력 필드 테두리에 대한 3:1 비율 요구 사항을 충족하는 데이터 입력 필드 예

이 텍스트 입력의 테두리와 페이지 배경의 대비율은 3:1 이상이어야 합니다. 이 예에서는 페이지가 흰색이므로 테두리 색이 #959595보다 밝으면 안 됩니다.

온라인, 디자인 도구, 그리고 심지어는 브라우저 개발자 도구에서 사용 가능한 대비율을 계산하는 여러 가지 도구가 있습니다. Salesforce에서 즐겨 쓰는 도구 중 하나는 www.AreMyColorsAccessible.com입니다.

단색이 아닌 배경 위의 텍스트

텍스트가 이미지나 단색이 아닌(그라데이션 등) 배경 위에 있으면 읽기 힘들 수 있습니다. 텍스트가 적어도 이미지에서 텍스트 색에 가장 가까운 부분(밝은 텍스트의 경우 이미지의 가장 밝은 부분, 어두운 텍스트의 경우 이미지의 가장 어두운 부분)에서 색 대비 요구 사항을 충족하도록 해야 합니다. 하지만 텍스트가 단색이 아닌 배경에 있으면 난독증 같은 인지 장애가 있는 사용자에게 좋지 않을 수 있습니다. 이 경우 텍스트를 이미지의 단색 부분에 놓거나 텍스트와 이미지 사이에 단색 배경을 추가하는 방법이 권장됩니다.

아래에는 Einstein (10+) 머리글 텍스트가 구름 이미지 위에 있습니다.

머리글 텍스트가 이미지의 구름 위에 있음

Einstein (10+) 머리글 텍스트를 구름 이미지 위에 표시하지 않고 이미지의 파란색 단색 부분으로 대신 이동하는 방법이 문제를 해결하는 데 더 효과적입니다.

머리글 텍스트가 이미지의 파란색 단색 배경에 있고 구름이 그 아래에 있음

텍스트를 단색이 아닌 배경 위에 표시하고 싶으면 아래 지침에 따라 사용자의 시각 및 인지 부담을 최소화하세요.

머리글 텍스트만 단색이 아닌 배경에 표시할 수 있습니다. 텍스트는 18픽셀 이상이어야 하고, 한 줄로만 표시하는 것이 이상적입니다. 텍스트 문자열이 더 길면 각 단어 또는 줄 뒤의 배경이 약간 다를 경우 탐색하기 더 어려울 수 있습니다.
그라데이션 배경은 세로여야 합니다(맨 위 색이 맨 아래 색과 달라야 함). 가로, 대각선 및 방사형 그라데이션은 문자열의 각 문자마다 배경색이 바뀔 가능성이 있으므로 지양해야 합니다.
항상 백업 배경색을 정의합니다. 일부 사용자는 접근성 문제 때문에 배경 이미지를 끄므로, 배경 이미지를 끈 상태에서도 텍스트를 읽을 수 있고 대비 요구 사항(4.5:1)이 충족되도록 해야 합니다.

글꼴 무게, 텍스트-그림자 블러 및 기타 기술적 제안 사항에 관한 구체적인 내용은 배경 위 텍스트에 대한 SLDS(Salesforce Lightning Design System) 지침(영문)을 참조하세요.

애니메이션으로 사용자 경험 개선

애니메이션은 인지 장애가 있는 사용자의 경험을 개선할 수 있습니다. 사용자가 UI 안에서 방향을 파악하고 사용자를 행동 유도로 안내하고 페이지 요소 간에 관계 또는 계층 구조를 만드는 데에도 유용할 수 있습니다. 하지만 애니메이션은 양날의 검과 같아서 잘못 디자인하면 말초 전장 장애가 있는 사용자가 두통, 메스꺼움, 어지럼증 또는 현기증을 느끼는 원인이 될 수 있습니다. 광감수성 간질이 있는 사람에게는 애니메이션이 발작 원인이 되는 경우도 있습니다.

접근성이 낮은 기능은 사용자가 정보를 인식하거나 제품을 조작하지 못하는 원인이 될 수 있지만, 접근성이 낮은 애니메이션은 사용자의 건강에 악영향을 미칠 수 있음을 기억하는 것이 가장 중요합니다. WCAG 지침에는 웹 전체에서 준수하는 중요한 요구 사항이 두 개 있습니다.

바로 반짝임 또는 깜빡임입니다. WCAG 2.3.2 세 번 깜빡임에 따르면, 초당 3회 넘게 반짝이거나 깜빡이는 애니메이션은 지양해야 합니다. 그러지 않으면 빠르게 깜빡이는 애니메이션이 일부 사용자에게 발작의 원인이 될 수 있습니다.
5초보다 긴 애니메이션. WCAG 2.2.2 일시중지, 중지, 숨기기에 따르면, 5초보다 오래 지속되거나 반복되는 애니메이션에는 애니메이션을 일시중지하거나, 중지하거나 숨기는 방법이 포함되어야 합니다.

애니메이션이 아무리 멋지고 접근성이 뛰어나도 사용자가 애니메이션을 끌 수 있게 하는 것이 가장 중요합니다. SLDS 캐루셀은 일시중지 버튼이 있는 애니메이션 구성 요소의 아주 좋은 예입니다.

Appy가 여러 나무와 산 앞에서 손을 흔들고 있는 3부 애니메이션 슬라이드 쇼의 첫 번째 이미지. 텍스트 내용: ‘AppExchange를 방문하세요. 1위 비즈니스 마켓플레이스를 사용해 Salesforce를 확장하세요.’ 윤곽선으로 콜아웃된 일시중지 버튼

어지럼증 유발 방지

일부 사용자의 어지럼증, 두통 또는 다른 형태의 불편을 악화시킬 수 있는 세 가지 요인이 있습니다.

화면 크기 대비 움직임의 크기. 애니메이션이 큰가요, 작은가요? 애니메이션이 클수록 작은 것보다 더 유해할 수 있습니다.
움직임의 방향 불일치. 일부 애니메이션에는 반대 방향으로 움직이는 피사체가 있습니다. 이 기법은 사용자가 페이지에서 아래로 스크롤할 때 배경이 위쪽으로 스크롤되는 시차 효과에 많이 사용됩니다. 이런 애니메이션 스타일은 사용자의 인식 기능을 크게 떨어트릴 수 있습니다.
사용자가 인식하는 이동 거리. 큰 풍경을 표현하는 애니메이션 같은 원근감이 있는 애니메이션도 사용자의 인식 기능을 떨어트릴 수 있습니다.

요약

색, 애니메이션 및 움직임은 중요한 디자인 기법입니다. 색과 애니메이션을 사용하는 경우, 이런 기법으로 제공되는 정보를 전달할 다른 시각적 수단을 제공해야 합니다. 애니메이션을 사용하는 경우 일부 사용자의 건강에 악영향을 초래할 수 있는 애니메이션 스타일을 지양해야 합니다.

예상 시간

주제

도움말 검색

Headless 360 Platform 자원