접근성: 텍스트 및 그래픽 준비하기 | 도움말 센터

Wix를 사용해해 사이트와 비즈니스를 구축하는 방법을 알아보세요.

직관적인 Wix 기능을 사용해 사이트를 디자인하고 관리하세요.

구독, 플랜 및 인보이스를 관리하세요.

비즈니스를 운영하고 회원과 소통하세요.

도메인을 구매하고 사이트에 연결, 이전하는 방법을 알아보세요.

비즈니스 및 웹 존재감을 키울 수 있는 도구를 확인하세요.

SEO 및 마케팅 도구로 가시성을 높이세요.

보다 효율적으로 작업할 수 있는 고급 기능을 활용하세요.

해결책을 찾고, 알려진 문제에 대해 알아보거나 문의하세요.

강좌 및 튜토리얼을 통해 실력을 향상시키세요.

웹 디자인, 마케팅 등에 대한 팁을 확인하세요.

검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.

풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.

목표 달성에 도움을 줄 전문가를 만나보세요.

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

7 분

페이지 메뉴

권장 사항
색상 코드 찾기
색상 대비 조정하기
색상 대비 직접 검토하기

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

권장 사항

다양한 시각 장애가 있는 방문자의 접근성을 높이기 위해 다음을 권장합니다.

텍스트 색상 및 배경 색상 대비를 일반 텍스트의 경우 4.5:1로, 큰 텍스트의 경우 3:1로 변경합니다.
그래픽 및 사용자 인터페이스 구성 요소(양식 입력 테두리, 플레이스홀더 등)의 대비 비율은 최소 3:1입니다.
AAA 등급은 일반 텍스트의 경우 최소 7:1로 큰 텍스트의 경우 최대 4.5:1의 높은 명암비를 요구합니다.

참고:

큰 텍스트는 14 포인트(약 18픽셀) 이상, 굵게 또는 18 포인트(약 24픽셀) 이상으로 정의됩니다.

색상 코드 찾기

사용 중인 사이트 빌더(Studio 에디터, Wix 에디터 등)에서 색상 코드를 확인할 수 있습니다.

Wix 에디터

Studio 에디터

관련 요소(텍스트, 스트립 배경, 컨테이더 상자 등)를 선택한 후 색상 선택기에 액세스합니다.
색상에 마우스오버해 색상 코드를 확인합니다.

Wix 에디터의 색상 선택기입니다. 커서를 색상에 마우스오버하고 있으며 코드가 패널에서 강조 표시되어 있습니다.

색상 대비 테스트하기:

Contrast Checker 등과 같이 전경색과 배경색(색상 코드 사용)을 비교하여 색상 대비를 테스트를 하는 다양한 사이트와 브라우저 플러그인이 있습니다 배경 이미지 위 텍스트의 색상 대비를 확인하려면, 배경 색상을 선택한 후 테스트할 수 있도록 하는 Colour Contrast Analyser 사용을 권장합니다.

색상 대비 조정하기

에디터의 접근성 마법사를 사용해 Wix 에디터 또는 Studio 에디터를 사용하는지 여부에 관계없이 사이트에서 낮은 색상 대비를 찾아 조정할 수 있습니다. 마법사는 사이트를 스캔해 잠재적인 접근성 문제가 있는지 여부를 확인하고 사이트의 접근성을 개선할 수 있는 방법을 강조 표시합니다.

대부분의 요소는 마법사 자체 내에서 변경할 수 있습니다. 하지만, 일부 요소(예: 앱 요소)는 현재 마법사와 완전히 통합되지 않았으며, 수동으로 검토하고 조정해야 합니다.

Wix 에디터

Studio 에디터