☑️ 접근성 필수 요소인 명도대비.
- 명도대비란?
누구든지 텍스트와 시각 정보를 쉽게 구분할 수 있게 텍스트(혹은 아이콘 등)의 요소가 배경색과의 대비를 충분하게 확보하는 것을 의미한다. - 일반인이야 구분하는데 문제가 없겠지만 색맹, 색약, 저시력자는 구분이 되지 않을 수 있기 때문.
☑️ 크롬 확장 프로그램 설치 방법 ➡️ WCAG Color contrast checker
- 크롬창 상단에서 더보기 버튼 클릭
- 더보기 버튼을 클릭하고 더보기 박스 쭉 보면 중간쯤에 확장 프로그램이 있다.
- 그리고 확장 프로그램 관리 클릭
- 다음으로 인풋 박스에 WCAG Color contrast checker를 검색해준다.
- 크롬창을 보면 윗 부분에 퍼즐 모양 아이콘이 생기는데 그것을 클릭해주면!!
- 좀 전에 설치한 WCAG Color contrast checker가 생긴것을 확인 할 수 있다.
- 클릭을 하면 바로 내 개인 포트폴리오 페이지의 명도대비를 확인해준다.
꽤나 꼼꼼하게 분석해주는 것 같다.
➡️ 텍스트나 아이콘 사이즈에 따라서 권장되는 명도대비가 조금씩 다른데, 찾아보니 아래와 같다고 한다.
WCAG 기준: 일반 텍스트 최소 4.5:1
**큰 텍스트 24px 기준 UI 구성요소·그래픽(아이콘 등)은 최소 3:1.
➡️ 포트폴리오에서 텍스트 컬러를 조금 바꿔주거나 사이즈 조절을 해주니 받은 초록색 체크 박스~
컬러를 조금씩 바꿔주니 전반적인 디자인이 조화롭지 않아서 바꾸는게 쉽지 않았다..ㅠㅠ
역시 디자인은 정말 어려운 것 같다. 😥
반응형
'퍼블리싱 > 웹접근성' 카테고리의 다른 글
| [접근성] 크롬 확장 프로그램 openWax (0) | 2025.11.10 |
|---|---|
| aria 속성 예시, 아코디언에 aria 속성 적용 (0) | 2024.11.21 |
| AOS Android talkback 하단 자막패널 나오게 하기 (1) | 2024.11.17 |
| AOS Talkback 토크백 단축키 또는 아이콘 버튼 설정하기 (0) | 2024.11.16 |
| iOS VoiceOver 보이스오버 하단에 텍스트 나오게 하기 / 자막 패널 (0) | 2024.11.15 |