접근성: 텍스트 및 그래픽 준비하기
4 분
페이지 메뉴
- 권장 사항
- 색상 코드 찾기
- 색상 대비 조정하기
시각 장애가 있거나 시력에 문제가 있는 방문자는 사이트 페이지 전경과 배경을 구별하기 어려울 수 있습니다. 따라서, 필요에 따라 사이트의 색상 대비를 확인하고 조정하는 것이 좋습니다.
권장 사항
다양한 시각 장애가 있는 방문자의 접근성을 높이기 위해 다음을 권장합니다.
- 텍스트 색상 및 배경 색상 대비를 일반 텍스트의 경우 4.5:1로, 큰 텍스트의 경우 3:1로 변경합니다.
- 그래픽 및 사용자 인터페이스 구성 요소(양식 입력 테두리, 플레이스홀더 등)의 대비 비율은 최소 3:1입니다.
- AAA 등급은 일반 텍스트의 경우 최소 7:1로 큰 텍스트의 경우 최대 4.5:1의 높은 명암비를 요구합니다.
참고:
큰 텍스트는 14 포인트(약 18픽셀) 이상, 굵게 또는 18 포인트(약 24픽셀) 이상으로 정의됩니다.
색상 코드 찾기
사용 중인 사이트 빌더(Studio 에디터, Wix 에디터 등)에서 색상 코드를 확인할 수 있습니다.
Wix 에디터
Studio 에디터
- 관련 요소(텍스트, 스트립 배경, 컨테이더 상자 등)를 선택한 후 색상 선택기에 액세스합니다.
- 색상에 마우스오버해 색상 코드를 확인합니다.
색상 대비 테스트하기:
Contrast Checker 등과 같이 전경색과 배경색(색상 코드 사용)을 비교하여 색상 대비를 테스트를 하는 다양한 사이트와 브라우저 플러그인이 있습니다 배경 이미지 위 텍스트의 색상 대비를 확인하려면, 배경 색상을 선택한 후 테스트할 수 있도록 하는 Colour Contrast Analyser 사용을 권장합니다.
색상 대비 조정하기
에디터의 접근성 마법사를 사용해 Wix 에디터 또는 Studio 에디터를 사용하는지 여부에 관계없이 사이트에서 낮은 색상 대비를 찾아 조정할 수 있습니다. 마법사는 사이트를 스캔해 잠재적인 접근성 문제가 있는지 여부를 확인하고 사이트의 접근성을 개선할 수 있는 방법을 강조 표시합니다.
대부분의 요소는 마법사 자체 내에서 변경할 수 있습니다. 하지만, 일부 요소(예: 앱 요소)는 현재 마법사와 완전히 통합되지 않았으며, 수동으로 조정해야 합니다.
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 에디터 상단에서 설정을 클릭합니다.
- 접근성 마법사를 선택합니다.
- 사이트 스캔을 선택합니다.
- 발견된 문제 탭을 클릭합니다.
- 목록에서 페이지를 선택합니다.
- 색상 대비 개선을 클릭합니다.
- 해당 요소를 선택하고 필요에 따라 조정합니다.
마법사에서 대비 조정하기
수동으로 대비 조정하기
아이콘을 클릭합니다.
사이트에 그래프 또는 데이터를 표시하나요?
고대비 색상은 사이트에 데이터를 표시하는 좋은 방법입니다. 하지만, 정보를 구별하기 위해 다른 지표(예: 질감 및 패턴)도 사용할 것을 권장합니다.
다음 단계:
접근성 체크리스트로 돌아가 접근성을 위해 사이트를 계속 개선하세요.