웹 UI 디자인의 아이콘 명도대비 이슈

웹 UI 고대비모드에 대하여


웹에서 사용되는 아이콘은 흔히 png 이미지로 만들어지고 사용됩니다.

하지만, png이미지의 경우, 이미 완성되어 색이 고정된 이미지입니다.

때문에 고대비 모드 사용시 오히려 명도대비가 낮아지는 문제가 발생합니다.

이를 해결하기 위해서는 w3c에서 개발된 svg 벡터 이미지를 사용하여야 합니다

svg는 웹에서 색상을 조정할 수 있기 때문에 여러 색의 이미지를 만들 필요가 없다는 장점이 있습니다.

다음의 체크박스들은 고대비모드의 접근성이 지켜지지 않은 예시와 지켜진 예시입니다.


고대비 모드 접근성이 지켜지지 않은 예시


아래의 폼은 svg를 사용하였지만, 일반 이미지 확장자처럼 고대비 모드에 대응하지 않게끔 설계된 커스텀 체크박스 요소입니다.

아래 svg의 경우, 어떤 고대비 모드에도 상호작용이 일어나지 않기 때문에 마킹 이미지의 색상이 진한 회색으로 고정됩니다.

때문에 검은 바탕을 사용하는 유저의 경우, 오히려 대비가 낮아지며 해당 체크박스를 보기 어려워집니다.

고대비 사용자에게 불친절한 체크박스

고대비 모드 접근성이 지켜진 예시


아래의 폼은 svg를 사용하여 고대비 모드와 상호작용하는 체크박스입니다.

svg를 사용하면 아래와 같이 고대비 모드와 상호작용이 가능한 아이콘 요소를 만들 수 있습니다.

모든 상태에 대응하는 커스텀 체크박스이므로 사용자 정의로 만들어진 고대비 테마도 대응이 가능합니다

고대비 사용자에게 친절한 체크박스