아티클
이미지에서 접근 가능한 색상 팔레트 추출하기
사진이나 브랜드 자산에는 완전한 색상 시스템의 씨앗이 담겨 있는 경우가 많습니다. 그 씨앗을 추출하고, 사용 가능한 팔레트로 만들고, 접근성 기준에 맞게 검증하는 작업에는 세 가지 뚜렷한 단계가 필요합니다. 이 글은 각 단계를 순서대로 다룹니다. 팔레트 추출이 내부적으로 어떻게 작동하는지, 실용적인 사용을 위해 색상을 선택하고 조정하는 방법, WCAG 기준에 맞게 대비를 확인하는 방법, 그리고 색각 이상 사용자에게 겹치는 쌍을 찾는 방법입니다.
팔레트 추출 방법: 픽셀 샘플링과 색상 양자화
모든 디지털 이미지는 RGB 같은 공간에서 색상 값을 가진 픽셀의 격자입니다. 팔레트 추출기는 모든 픽셀을 개별적으로 검사하지 않습니다. 2메가픽셀 사진에는 200만 개의 데이터 포인트가 있어 처리가 느리고 유용한 집합 대신 수천 개의 약간 다른 색조를 반환합니다. 대신 도구는 일정한 간격으로 픽셀 격자를 샘플링하여 대표적인 부분 집합을 수집합니다. 그 부분 집합은 색상 양자화 알고리즘에 입력됩니다. 가장 일반적인 접근 방법은 클러스터링 방법(median-cut 또는 k-means 스타일 분할이라고도 함)을 사용하여 유사한 색상을 그룹화합니다. 알고리즘은 색상 유사성을 기준으로 샘플링된 각 픽셀을 고정된 수의 버킷 중 하나에 배치한 다음 각 버킷의 평균 색상을 계산합니다. 결과는 일반적으로 4~16개의 색상 목록으로, 이미지의 주요 시각적 톤을 함께 나타냅니다. 작은 고립된 영역에만 나타나는 색상은 놓칠 수 있는데, 이는 결함이 아닌 예상되는 동작입니다.
원시 주요 색상에서 사용 가능한 팔레트로
팔레트 추출기의 원시 출력은 빈도순으로 정렬된 색상 목록이지만, 빈도만으로는 팔레트가 되지 않습니다. 숲 사진은 UI에서 별개의 강조색으로 사용하기에 너무 유사한 여러 초록색을 반환합니다. 실용적인 작업은 선택과 조정입니다. 가장 독특하고 가장 중성적이지 않은 색상을 주요 색상으로 식별하는 것부터 시작하세요. 나머지 색상 중에서 주요 색상과 서로 대비되는 두 개 이하를 찾으세요. 그것들이 강조색이 됩니다. 추출기가 그림자와 중간 톤에서 종종 반환하는 채도가 낮은 톤을 포함한 나머지는 배경과 테두리의 중성색으로 사용할 수 있습니다. 이 거친 구조를 갖추면 개별 값을 조정해야 할 가능성이 높습니다. color-converter 도구를 사용하면 hex, RGB, HSL로 각 색상을 검토할 수 있습니다. HSL은 여기서 특히 유용합니다. 동일한 색조 계열을 벗어나지 않고 색조를 일정하게 유지하면서 밝기나 채도를 조정하여 더 타이트하거나 느슨한 색상 패밀리를 만들 수 있습니다.
대비 확인: 읽기 가능한 텍스트를 위한 WCAG 기준
텍스트와 배경에 사용할 후보 색상이 정해지면 조합이 읽기 가능한지 확인해야 합니다. 웹 콘텐츠 접근성 지침(WCAG)은 이를 위한 대비 비율을 정의합니다. 비율은 두 색상의 상대적 휘도를 비교합니다. 1:1은 대비가 전혀 없음(같은 색 위의 같은 색)을 의미하고, 21:1은 최대값(흰색 위의 검정)입니다. WCAG 2.1 Level AA는 일반 크기 본문 텍스트에 최소 4.5:1의 비율을 요구하고, 큰 텍스트(18pt 또는 14pt 굵게)에는 3:1을 요구합니다. Level AAA는 각각 7:1과 4.5:1의 더 높은 기준을 설정합니다. 직접 휘도를 계산할 필요는 없습니다. 핵심은 좋은 조명 아래서 보기 좋아 보이는 색상 쌍이 화면에서 4.5:1 미만으로 떨어질 수 있고, 지침이 정확히 그 경우를 위해 존재한다는 점입니다. 색상을 추출하고 조정한 후 사용할 모든 텍스트-배경 쌍을 테스트하세요. 흰색에서 잘 읽히는 중간 톤 회색이 추출된 팔레트의 밝은 베이지 배경에서는 완전히 실패할 수 있습니다.
색각 이상: 영향 받은 사용자에게 쌍이 어떻게 보이는지 시뮬레이션
대략 남성 12명 중 1명, 여성 200명 중 1명이 어떤 형태의 색각 이상을 가지고 있습니다. 가장 흔한 유형은 녹색 감도가 감소된 제2색맹(deuteranopia), 그 다음이 적색 감도가 감소된 제1색맹(protanopia)입니다. 청황색 감도가 감소된 제3색맹(tritanopia)은 더 드뭅니다. 각 유형에서 시각 시스템은 특정 파장을 정상 시력을 가진 사람이 서로 구별되게 보는 동일한 지각 색상으로 매핑합니다. 팔레트에서 실용적인 문제는 정상 시력에서 명확하게 다르게 보이는 두 색상이 색각 이상 사용자에게는 동일한 톤으로 겹쳐 구별에 사용하기 어렵게 된다는 것입니다. 예를 들어 성공과 오류를 표시하기 위해 빨강과 초록만 사용하는 경우입니다. 색각 이상 시뮬레이션을 실행하면 영향 받은 채널이 압축될 때 팔레트가 어떻게 보이는지 확인할 수 있습니다. 거의 동일한 회색이나 갈색으로 겹치는 쌍이 재고해야 할 것들입니다. 색조 구분 없이도 대비가 유지되도록 두 색상 사이의 밝기 차이를 늘리거나, 색상이 유일한 신호가 되지 않도록 보조 신호(모양, 레이블, 패턴)를 추가하세요.
로컬에서 처리하기: color-palette, color-blindness, color-converter
이 글에서 설명한 세 단계는 모두 이미지나 브랜드 색상을 서버로 전송하지 않고 완료할 수 있습니다. color-palette 도구는 완전히 브라우저에서 실행됩니다. 이미지를 드롭하면 로컬에서 픽셀을 샘플링하고 주요 색상을 hex 값으로 반환합니다. 파일은 전송되지 않습니다. color-converter 도구는 hex 코드를 받아 동일한 색상을 RGB와 HSL로 표시하여 동일한 색조 계열을 유지하면서 밝기나 채도를 정밀하게 조정할 수 있습니다. hex와 변환된 값 모두 페이지 안에만 존재합니다. color-blindness 도구는 반대 방향으로 동작합니다. 이미지를 드롭하면 브라우저에서 계산된 deuteranopia, protanopia, tritanopia 시뮬레이션을 그 이미지에 적용해 보여줍니다. 사진이 아니라 팔레트를 확인하려면, 먼저 색상 견본을 이미지로 내보내거나 스크린샷으로 찍은 다음 그것을 시뮬레이터에 드롭하세요. 세 도구를 순서대로 사용하면, 이미지에서 추출하고, color-converter에서 조정하고, 견본 이미지를 내보내 color-blindness에서 검증하는 위의 전체 워크플로우를 다룹니다. 소스 사진에 미발표 브랜딩이나 고객의 미공개 아이덴티티가 포함된 경우 중요한 것처럼, 이미지는 전체 과정에서 사용자의 기기에 유지됩니다.
이 아티클의 도구
자주 묻는 질문
팔레트 추출기는 일반적으로 몇 가지 색상을 반환하나요?
대부분의 도구는 기본적으로 5~16개의 색상을 반환하지만, 많은 도구가 수를 설정할 수 있게 합니다. 적은 색상을 반환하면 알고리즘이 더 많은 픽셀을 함께 그룹화해야 하므로 서로 다르지만 유사한 톤이 합쳐질 수 있습니다. 더 많은 색상을 반환하면 구별하여 사용하기 어려운 거의 중복된 색상이 생성될 수 있습니다. UI 팔레트의 경우 6~8개의 색상이 일반적으로 실용적인 시작점입니다.
이미지에서 추출한 팔레트가 자동으로 WCAG 대비를 통과할 수 있나요?
자동으로는 불가능합니다. 사진의 주요 색상은 종종 중간 밝기를 가진 중간 톤으로, 서로 2:1에서 3:1 범위의 비율을 생성하는 경향이 있습니다. 본문 텍스트에 대한 4.5:1 기준을 충족하려면 일반적으로 원시 추출이 제공하는 것 이상으로 배경 값을 밝히거나 텍스트 값을 어둡게 해야 합니다. 추출은 시작점을 제공하고, 대비 확인은 얼마나 많은 조정이 필요한지 알려줍니다.
WCAG 대비 비율이 색각 이상을 고려하나요?
부분적으로는 그렇습니다. WCAG 휘도 공식은 색조가 아닌 상대적 밝기에 기반하기 때문에 4.5:1을 충족하는 고대비 쌍은 밝기 차이가 유지되므로 색각 이상 사용자에게도 일반적으로 구별 가능합니다. 그러나 색조는 다르지만 휘도가 유사한 두 색상, 예를 들어 동일한 밝기의 빨강과 초록은 휘도 기반 대비 확인을 통과하면서도 제2색맹에게는 구별 불가능할 수 있습니다. 색각 이상 시뮬레이션을 실행하는 것이 대비 비율과 별도로 색조 수준의 구분을 확인하는 올바른 방법입니다.