웹접근성 명도대비 컬러, AI로 5분 만에 찾는 법

몇 년 전만 해도 웹 접근성 프로젝트를 진행할 때, 디자인 화면을 열어두고 스포이드로 컬러를 하나하나 찍어가며 명암 대비 수치를 확인했습니다. 색 하나 바꿀 때마다 도구를 다시 열고, 수치 보고, 또 조정하고. 웹접근성 마크 획득이 프로젝트 조건이었던 터라 4.5:1 이상의 명암비를 무조건 통과해야 했거든요.

그런데 그 과정에서 디자이너로써 시각적으로 허용하기 힘든 것들이 발생합니다. 기준을 맞출수록 색이 점점 극단적으로 변하는 겁니다. 소프트한 파스텔 톤은 어디론가 사라지고, 딱딱하고 강한 색감만 남는 느낌이었죠. 선배님들이 이야기했던 “접근성을 지키면 디자인이 못생겨진다”는 말을 체감할 수 있습니다.

최근 이 문제를 정면으로 다루는 흥미로운 연구를 읽었습니다. 색채 전문가가 구글 Gemini AI를 활용해 색약·색맹 접근성을 통과하면서도 지각적으로 균등한 컬러 조합을 찾는 방법을 공유한 건데요. 이 내용을 현직 UIUX 디자이너 관점에서 뜯어봤습니다.

RGB가 눈을 속이는 이유

Figma에서 HEX 코드로 색을 고르는 게 일상이 되다 보면, 색공간의 구조를 굳이 신경 쓸 이유를 못 느끼게 됩니다. 저도 그랬고요.

그런데 RGB 색공간에는 치명적인 특징이 하나 있습니다. 색상환에서 같은 거리를 이동해도 인간의 눈에는 그 변화가 다르게 느껴진다는 겁니다. 예를 들어 노랑에서 초록으로 가는 변화와 파랑에서 보라로 가는 변화는 RGB 수치상 같은 거리일 수 있지만, 실제로 우리 눈에는 전혀 다른 강도의 변화로 인식됩니다.

이게 단순한 이론 문제가 아닙니다. 데이터 시각화나 인포그래픽을 만들 때, 색의 변화가 데이터 값의 차이가 아니라 색공간의 불균등함 때문에 생긴 착시일 수 있거든요. 보는 사람 입장에서는 색이 확 튀는 부분을 중요한 데이터로 오해할 수 있는 거죠.

이 문제를 해결하기 위해 나온 게 CIE LAB, HCL 같은 ‘지각 균등 색공간’입니다. 어느 방향으로 같은 거리를 움직여도 인간이 동일한 변화로 느끼도록 설계된 색공간이죠. 색채 전문가들이 접근성 팔레트 작업에 이 색공간을 선호하는 이유가 여기 있습니다.

4.5:1의 딜레마: 기준과 감각 사이

웹접근성 AA 기준은 일반 텍스트의 명암비를 4.5:1 이상으로 요구합니다. 흰 배경에 검정 텍스트는 21:1이니 쉬워 보이지만, 브랜드 컬러가 개입하는 순간 이야기가 달라집니다.

라이트 코랄이나 민트 계열의 브랜드 컬러 위에 텍스트를 올려야 하는 상황. 4.5:1을 맞추려다 보면 텍스트 색은 점점 짙어지고, 배경 색은 점점 진해집니다. 소프트하고 감각적인 무드는 어느 순간 사라지고, 색감이 뻣뻣해지는 거죠. 제가 공공기관 프로젝트에서 반복적으로 겪었던 경험입니다.

그렇다고 기준을 무시할 수도 없습니다. 단순히 법적 요건이어서가 아니라, 실제로 색약이나 색맹이 있는 사용자가 콘텐츠를 읽지 못하게 되는 문제거든요. 이 수치는 그런 사람들이 제품을 쓸 수 있느냐 없느냐를 가르는 최소 기준입니다.

결국 이 딜레마의 해답은 두 가지입니다. 첫째, 기준을 통과하는 컬러 조합을 더 빠르고 넓게 탐색하는 것. 둘째, 콘텐츠의 중요도에 따라 심미성을 지키는 판단을 디자이너가 직접 내리는 것. AI는 첫 번째를 훨씬 빠르게 해줄 수 있습니다.

AI로 웹접근성 명도대비 팔레트 찾기: 실무 3단계

기존 이렇게 사용했습니다. 팔레트 후보를 만들고, 접근성 검사 도구에 하나씩 넣어보고, 탈락하면 색을 조정하고 다시 넣고, 반복. 이 과정이 AI를 쓰면 훨씬 단축됩니다.

에서 공유한 핵심 내용은 이겁니다. 구글 Gemini에게 지각 균등 색공간 기반으로 색약 테스트를 통과하는 컬러 조합을 찾아달라고 요청하면, RGB 기반 도구로는 직관적으로 찾기 어려운 조합을 빠르게 뽑아준다는 거죠.

현직 디자이너 입장에서 실무에 바로 쓸 수 있는 방법으로 풀어보면 이렇습니다.

1단계: 조건 명확히 주기
브랜드 컬러 HEX 코드와 함께 “WCAG AA 명암비 4.5:1 이상, 색약 통과, 소프트한 톤 유지”라는 조건을 함께 제시합니다. 조건이 구체적일수록 결과의 질이 높아집니다.

2단계: AI로 후보군 뽑기
Gemini나 Claude에게 위 조건을 주고 컬러 조합 3~5개를 생성하게 합니다. 이때 “지각 균등 색공간(CIE LAB 또는 HCL) 기준”이라는 조건을 추가하면 더 신뢰도 높은 후보가 나옵니다. 결과물에 HEX 코드와 명암비 수치를 함께 요청하면 검수도 편합니다.

3단계: 디자이너의 눈으로 최종 판단
AI가 뽑아준 후보를 실제 디자인에 직접 올려보고, 수치가 아니라 감각으로 최종 선택합니다. 부제목이나 보조 UI 요소처럼 중요도가 낮은 요소는 기준을 조금 유연하게 적용하는 판단도 필요합니다. 이 마지막 단계는 여전히 디자이너의 몫입니다.

더 넓은 지식이 더 좋은 제품을 만듭니다

색채 이론이나 접근성 기준은 처음엔 딱딱한 이론처럼 느껴집니다. 저도 웹접근성 마크 때문에 어쩔 수 없이 공부했던 게 솔직한 시작이었거든요.

그런데 이걸 알고 나서 클라이언트한테 더 설득력 있게 말할 수 있게 됐습니다. “이 색은 기준 미달입니다”가 아니라, “이 색을 이렇게 조정하면 접근성도 통과하고 브랜드 무드도 살릴 수 있습니다”라고요. 그리고 그 대안을 찾는 속도가 AI 덕분에 훨씬 빨라졌습니다.

웹접근성 컬러 작업은 단순히 수치를 맞추는 일이 아닙니다. 인간이 색을 어떻게 인지하는지 이해하면 작업 방식이 달라지고, 더 많은 사람이 쓸 수 있는 제품을 만드는 근거가 생깁니다. AI 도구는 그 이해를 현실적인 속도로 실무에 연결해주는 다리 역할을 합니다.

공공기관 프로젝트가 아니더라도, 내 디자인을 더 많은 사람이 쓸 수 있게 만들고 싶다면 이 방향은 한번쯤 파볼 가치가 있습니다.

AI를 활용해서 웹접근성 준수 테스트를 자동화하는 방법이 궁금하신 분들은 아래 글도 읽어보세요.