접근성: 텍스트 및 그래픽 준비하기
5 분
페이지 메뉴
- 권장 사항
- 색상 코드 찾기
- 색상 대비 조정하기
시각 장애가 있거나 시력에 문제가 있는 방문자는 사이트 페이지 전경과 배경을 구별하기 어려울 수 있습니다. 따라서, 필요에 따라 사이트의 색상 대비를 확인하고 조정하는 것이 좋습니다.
권장 사항
다양한 시각 장애가 있는 방문자의 접근성을 높이기 위해 다음을 권장합니다.
- 텍스트 색상 및 배경 색상 대비를 일반 텍스트의 경우 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 에디터
- 에디터로 이동합니다.
- 에디터 상단에서 설정을 클릭합니다.
- 접근성 마법사를 선택합니다.
- 사이트 스캔을 선택합니다.
- 발견된 문제 탭을 클릭합니다.
- 목록에서 페이지를 선택합니다.
- 색상 대비 개선을 클릭합니다.
- 해당 요소를 선택하고 필요에 따라 조정합니다.
마법사에서 대비 조정하기
수동으로 대비 조정하기
아이콘을 클릭합니다.
수동으로 대비 검토하기
를 클릭합니다.사이트에 그래프 또는 데이터를 표시하나요?
고대비 색상은 사이트에 데이터를 표시하는 좋은 방법입니다. 하지만, 정보를 구별하기 위해 다른 지표(예: 질감 및 패턴)도 사용할 것을 권장합니다.
다음 단계:
접근성 체크리스트로 돌아가 사이트의 접근성을 계속 개선하세요.