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