접근성: 텍스트 및 그래픽 준비하기

3 분 분량
시각 장애가 있는 방문자는 사이트 페이지 전경과 배경을 구별하기 어려울 수 있습니다. 따라서, 필요에 따라 사이트의 색상 대비를 확인하고 조정하는 것이 좋습니다.
다음 도움말을 참고하세요.

권장 사항

다양한 시각 장애가 있는 방문자의 접근성을 높이기 위해 다음을 권장합니다.
  • 텍스트 색상 및 배경 색상 대비를 일반 텍스트의 경우 4.5:1로, 큰 텍스트의 경우 3:1로 변경합니다. 
  • 그래픽 및 사용자 인터페이스 구성 요소(양식 입력 테두리, 플레이스홀더 등)의 대비 비율은 최소 3:1입니다. 
  • AAA 등급은 일반 텍스트의 경우 최소 7:1로 큰 텍스트의 경우 최대 4.5:1의 높은 명암비를 요구합니다.
참고:
큰 텍스트는 14 포인트(약 18픽셀) 이상, 굵게 또는 18 포인트(약 24픽셀) 이상으로 정의됩니다.

색상 코드 찾기

사용 중인 사이트 빌더(Studio 에디터, Wix 에디터 등)에서 색상 코드를 확인할 수 있습니다.
Studio 에디터
Wix 에디터
ADI
  1. 관련 요소(텍스트, 스트립 배경, 컨테이너 상자 등)를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
  3. 디자인 탭을 클릭합니다.
  4. 색상 상자를 클릭해 색상 선택기를 엽니다.
  5. 색상에 마우스오버해 코드를 확인합니다.
Studio 에디터의 색상 선택기입니다. 커서를 색상에 마우스오버하고 있으며 코드가 패널에서 강조 표시되어 있습니다.
색상 대비 테스트하기:
Contrast Checker 등과 같이 전경색과 배경색(색상 코드 사용)을 비교하여 색상 대비를 테스트를 하는 다양한 사이트와 브라우저 플러그인이 있습니다 배경 이미지 위 텍스트의 색상 대비를 확인하려면, 배경 색상을 선택한 후 테스트할 수 있도록 하는 Colour Contrast Analyser 사용을 권장합니다.

색상 대비 조정하기

접근성 마법사를 사용해 사이트 페이지에서 낮은 색상 대비를 찾아 조정할 수 있습니다. 마법사는 사이트를 스캔해 잠재적인 접근성 문제가 있는지 여부를 확인하고 고급 설정을 활성화해 사이트의 접근성을 계속 개선할 수 있도록 하는 도구입니다.
참고 사항:
마법사는 Wix 에디터에서만 사용할 수 있습니다. Studio 에디터에 접근성 마법사를 추가하도록 투표하세요.

대비를 조정하려면:

  1. 설정을 선택합니다.
  2. 접근성 마법사를 선택합니다.
  3. 사이트 스캔하기를 선택합니다.
  4. 색상 대비라는 제목의 카드를 선택합니다.
  5. 슬라이더를 사용해 텍스트 및 배경 색상을 조정합니다.
  6. 변경사항 적용을 선택합니다.
마법사에 색상 대비가 열립니다. 대비가 조정되었으며 커서를 변경사항 적용에 마우스오버하고 있습니다.
사이트에 그래프 또는 데이터를 표시하나요?
고대비 색상은 사이트에 데이터를 표시하는 좋은 방법입니다. 하지만, 정보를 구별하기 위해 다른 지표(예: 질감 및 패턴)도 사용할 것을 권장합니다.  
다음 단계:
접근성 체크리스트로 돌아가 접근성을 위해 사이트를 계속 개선하세요.

도움이 되었나요?

|