널리

안녕하세요, 엔비전스입니다.

버튼을 만들 때 접근성 측면에서 반드시 고려해야 할 요소 중 하나가 바로 명도 대비인데요. 많은 분들이 WCAG 기준인 3:1 혹은 4.5:1이라는 숫자 자체는 알고 있지만, 실제로 각 버튼의 디자인 요소에 그 기준을 어떻게 적용해야 하는지에 대해서는 막연함을 느끼곤 하십니다. 버튼은 단순한 텍스트 박스를 넘어서 아이콘, 배경, 테두리 등 다양한 구성 요소가 조합된 복합적인 형태이기 때문에 각각의 조합에서 어떤 대비를 체크해야 하는지 혼란스러울 수밖에 없습니다.

따라서 이번 글에서는 실무에 바로 도움이 될 수 있도록 실제 사용되는 버튼과 컨트롤 구현 패턴을 통해 명도 대비 기준을 준수하는 방법을 함께 알아보겠습니다. 시각 장애인이나 저시력 사용자에게는 사소해 보이는 차이도 버튼의 존재를 인식할 수 있는가 여부를 가를 수 있기 때문에, 각각의 사례마다 왜 명도대비가 중요한지 살펴보겠습니다.

텍스트가 포함된 버튼의 명도 대비

버튼은 단순히 클릭 가능한 공간이 아니라 명확한 목적을 가진 정보입니다. "저장", "삭제", "확인"처럼 사용자의 행위를 유도하는 키워드가 포함된 경우가 대부분이며, 단순히 아이콘만으로 기능을 설명하기엔 한계가 있습니다. 그래서 많은 버튼은 아이콘과 텍스트를 함께 포함하게 되는데요.

이때 반드시 고려해야 할 대비는 크게 두 가지입니다.

1. 텍스트와 버튼 배경 간의 대비
2. 버튼 배경과 바깥 배경 간의 대비

실제로 많은 버튼 디자인에서 텍스트 대비는 충분히 확보했지만, 버튼 배경이 외부 배경과 너무 비슷해서 버튼의 테두리 자체가 흐릿하게 보이는 문제가 발생합니다. 혹은 반대로 버튼의 배경은 잘 드러나는데 내부 텍스트 색상이 너무 연해서 버튼의 역할이 제대로 전달되지 않는 경우도 많죠.

 

앞선 이미지의 실패 사례에서는 이러한 조합 오류로 인해 사용자에게 버튼의 존재 자체는 보이지만, 어떤 동작을 수행할지 인식이 어려운 것을 볼 수 있습니다. 특히 색상만으로 강조한 디자인은 저시력 사용자나 색각 이상 사용자에게는 치명적인 인식 손실을 유발할 수 있습니다.

 

성공 사례에서는 버튼 테두리, 배경, 내부 텍스트 각각의 명도 대비가 모두 확보되어 있어 어느 시각 조건에서도 버튼으로서의 기능과 내용을 동시에 인식할 수 있습니다.

결국 좋은 버튼 디자인은 명도 대비라는 수치를 넘어, 사용자에게 이 UI가 클릭 가능하며 어떤 결과를 유도하는지 명확한 절달을 할 수 있어야 합니다.

체크박스

체크박스는 다른 버튼에 비해 크기가 작은 경우가 많고 단순해 보이지만, 실제로는 사용자가 직접 상호작용해야 하는 중요한 폼 요소 중 하나입니다. 크기가 작기 때문에 더더욱 테두리와 내부 요소의 명도 대비가 중요해지며, 실수로 놓칠 경우 전체 동의 폼이나 중요 항목 동의 등을 포함한 매우 중요한 정보들이 사용자의 인식 밖에 놓일 수 있습니다.

첫 번째 실패 사례에서는 체크박스 테두리가 연해서 주변 배경과 섞이게 되고, 결과적으로 체크 유무와 관계없이 이 UI 자체가 눈에 잘 들어오지 않게 됩니다. 특히 저시력 사용자에게는 체크 표시보다 먼저 테두리 형태를 인식할 수 있느냐가 핵심이 되므로, 테두리 대비를 확보하지 못한 체크박스는 아예 보이지 않는 것과 다름없습니다.

두 번째 성공 사례에서는 테두리와 내부 체크 표시 모두 높은 대비를 확보하고 있어, 빠르게 훑어보는 환경에서도 체크 가능 여부를 명확히 인식할 수 있습니다.

토글 버튼

토글 스위치는 그 자체로 상태값을 표현하는 UI입니다. 즉, 단순히 눌림 여부만이 아니라 현재 어떤 상태인지를 시각적으로 명확히 보여주는 것이 목적인 버튼 유형 중 하나인데요. 그러나 많은 디자인에서 꺼진 상태만을 너무 희미하게 표현하는 실수가 반복되고 있습니다.

첫 번째 실패 사례는 꺼진 상태일 때 버튼 외곽선이나 슬라이더 형태 자체가 보이지 않게 되어, 이 공간이 토글인지조차 인식되지 않는 문제가 발생합니다. 특히 폼 내에 여러 UI가 나열되어 있을 때, 이 버튼만 흐릿하게 표현되면 스크린리더 사용자에게도 포커스 이동에서 혼란을 줄 수 있습니다.

두 번째 성공 사례는 꺼짐과 켜짐 상태 모두에서 충분한 대비와 형태 인식을 보장하며, 버튼이라는 존재 자체가 사라지지 않습니다.

중요한 점은 꺼져 있다는 것이 "없다"는 의미가 아니라는 겁니다. 상태는 표현되되, 존재는 항상 인식될 수 있도록 하는 것이 접근성 디자인의 기본입니다.

페이지네이션

페이지네이션은 사용자가 어떤 페이지를 보고 있는지를 알려주는 지표입니다. 텍스트, 테두리, 배경 등 다양한 방식으로 현재 선택된 페이지를 표현할 수 있지만, 명도 대비가 낮을 경우 선택 상태가 잘 보이지 않아 전체 탐색 흐름이 혼란스러워질 수 있습니다.

첫 번째 이미지와같이 배경 명도 대비가 낮은 실패 사례 이미지 예시 외에도 숫자에만 색상을 입히고, 그 색상 자체도 외부 배경과 대비가 낮아 선택 상태를 거의 구분할 수 없는 구조가 많습니다. 특히 페이지 번호가 여러 개인 경우 사용자는 현재 위치를 확인하기 위해 눈을 여러 번 움직여야 하고, 이는 정보 탐색 효율성을 크게 떨어뜨려 현재 선택 상태를 확실하게 나타내 주는 것이 중요합니다.

두 번째 이미지의 성공 사례는 테두리, 배경색, 강조 아이콘 등 다양한 시각적 보조 수단을 통해 선택 상태를 명확히 전달하며, 명도 대비가 높은 색상 조합을 사용해 흐름을 자연스럽게 유도합니다.

비활성화 버튼

비활성화된 버튼 역시 스위치 버튼과 마찬가지로 많은 디자이너가 '흐릿하게 표현해야 한다'고 알고 있습니다. 상대적인 차이가 있어야 하는 것은 맞는 말이지만, 이 흐릿함이 지나쳐서 존재 자체가 흐려지면 큰 이슈가 됩니다. 사용자가 비활성 버튼이 있다는 것을 알아야, 언젠가 다시 활성화되었을 때 그것을 인지하고 사용할 수 있기 때문입니다.

실패 사례에서는 버튼이 배경과 완전히 섞여 존재를 알아보기 어려운 상태입니다.

성공 사례는 비활성임을 시각적으로 표현하면서도 테두리, 배경 등에서 최소한의 대비를 유지해 사용자의 인식 흐름을 끊지 않습니다.

입력창과 placeholder

입력창에서 placeholder는 사용자가 무엇을 입력해야 하는지 안내하는 중요한 역할을 합니다. 그러나 종종 'placeholder는 약하게 보여야 한다'는 이유로 명도 대비를 심각하게 낮추는 실수가 꽤 자주 발생하는데요.

첫 번째 실패 사례는 placeholder 텍스트가 배경과 너무 유사한 색을 사용하여 보이지 않게 되는 구조입니다. 입력 전에 중요한 가이드를 놓치는 셈이니 이는 자칫 치명적인 이슈가 될 수 있습니다.

두 번째 이미지의 성공 사례는 텍스트 필드 내의 placeholder가 명확히 보이되, 입력된 값과는 구분되도록 디자인되어 있습니다. 이 두 요소는 용도는 다르지만, 모두 정보 전달의 주체라는 점에서 대비 확보가 필수입니다.

진행바

진행바는 많은 경우 클릭 가능한 요소는 아니지만, 진행률을 사용자에게 피드백하는 중요한 시각적 컴포넌트입니다. 특히 로딩, 업로드, 설문 등 '진행'이라는 불확실한 시간에 사용자에게 신뢰감을 주는 역할을 하죠.

실패 사례는 진행 구간과 미진행 구간의 색이 비슷해 전체 흐름이 잘 구분되지 않는 상태입니다. 사용자 입장에서는 "진행이 되고 있는 건가?" 라는 의문을 품게 되고, 이로 인해 불안감이나 반복 클릭 등의 불필요한 행위가 발생할 수 있습니다. 단순 컨트롤이 필요한 영역이 아니더라도 접근성이 중요한 이유가 되기도 합니다.

성공 사례는 두 구간을 충분히 대비 있게 표현하여, 현재 어느 정도까지 완료되었는지를 한눈에 알 수 있도록 해 줍니다. 작은 색상 차이 하나가 사용자 경험 전체에 영향을 미친다는 점을 명심해야 합니다.

마치며

앞선 예시들과 같이 명도 대비는 단순히 색 조합이나 대비만 높여 접근성이 완벽해지는 것은 아닙니다. 사용자의 맥락을 읽고, 어떤 상황에서도 필요한 정보를 잃지 않도록 해야 하기 때문에 각 버튼의 용도와 디자인을 이해하는 것이 정말로 중요한데요. 사용자가 어떤 정보도 놓치지 않게 만드는 것이 제일 중요한 목적이 되지 않을까 싶습니다.

그럼 읽어 주셔서 감사합니다.