소개

구매팀은 자판기 화면의 가격 텍스트를 확인하고 읽기 쉽다는 것을 알았습니다. 가격 옆에는 흐릿한 선택 표시가 있습니다. 매뉴얼에는 이 표시에 대한 설명이 있지만, 고객은 실제 화면에서 이를 확인해야 합니다. 텍스트 가독성과 표시 가시성은 서로 다른 질문에 대한 답을 제공합니다. 승인 과정에서는 어떤 시각적 요소가 작업 정보를 전달하는지, 그리고 해당 요소들을 둘러싸는 색상은 무엇인지 명확히 해야 합니다.

이 가이드는 필수적인 비텍스트 시각 정보, 즉 기능을 나타내는 아이콘, 선택을 나타내는 체크 표시, 입력 위치를 표시하는 경계선, 또는 사용 설명서를 이해하는 데 필요한 그래픽 요소에 중점을 둡니다. 이러한 요소들은 검토 대상으로 제안된 것이며, 아래 제품에서 실제로 관찰된 기능은 아닙니다. 구매 목표는 디자인이 "대비가 좋다"는 일반적인 설명이 아니라 실제 인터페이스에 대한 증거를 확보하는 것입니다.

W3C WCAG 2.2 성공 기준 1.4.11(비텍스트 대비)이 주요 참고 자료입니다. 이는 레벨 AA 웹 콘텐츠 기준입니다. 이 기준의 개념을 소프트웨어 조달 범위에 적용하는 것은 물리적 장비의 인증을 보장하거나 현지 법적 의무를 이행하는 것을 의미하지 않습니다. 관련 소프트웨어 표면을 정의하고 제공된 구성에 대한 전문적인 평가를 요청하십시오.

빠른 답변

기준 임계값은 최소 3:1입니다. W3C에 따르면 계산된 값은 반올림해서는 안 됩니다. 2.999:1은 3:1을 충족하지 않습니다. 도구에서 생성된 반올림된 녹색 배지뿐만 아니라 실제 색상과 결과를 기록하십시오. 기본, 선택 및 포커스 버전에서 동일한 마크를 서로 다른 인접 색상에 배치할 수 있습니다.

모든 장식선을 무분별하게 측정하지 마십시오. 컨트롤은 다른 시각적 요소로 식별되는 경우, 해당 영역 주변에 눈에 보이는 테두리가 항상 필요한 것은 아닙니다. 사용자 에이전트에 의해 결정되고 제작자가 수정하지 않은 비활성 컨트롤 및 모양에는 특정 예외가 있습니다. 의미 있는 그래픽에도 필수적인 표현 예외가 적용됩니다. 실패로 단정하기 전에 해당 사례를 분류하십시오.

비교표

이 목록은 구매자가 요청한 데모를 안내합니다. 특정 제품에 이러한 제어 기능이나 그래픽이 포함되어 있다는 것을 보장하는 것은 아닙니다. 주문한 구성의 표면을 먼저 확인하십시오.

이 제품은 누가 구매해야 할까요?

구매에 기호가 포함된 고객 메뉴, 사용자 지정 선택 표시기, 작성된 포커스 처리 또는 필수 그래픽 정보가 포함된 운영자 보기가 포함된 경우 이 범위를 사용하십시오. 공급업체가 스크린샷은 제공하지만 어떤 비텍스트 요소가 측정되었는지에 대한 기록이 없는 경우에 유용합니다. 구매자는 필요한 표시기에 대한 추적 가능한 결과가 필요하며, 우연히 측정된 인근 제목의 결과가 필요한 것은 아닙니다.

브랜드 색상 팔레트는 다양한 표면에서 각기 다른 문제를 야기할 수 있습니다. 예를 들어, 색상이 있는 배지 위의 흰색 아이콘은 한쪽 배경과만 연결되고, 버튼의 외곽선은 페이지 배경에 나타날 수 있습니다. 또한, 작업자 차트에서는 플롯 영역과 강조 표시된 영역 모두에 표시를 할 수 있습니다. 이 세 가지 요소를 모두 하나의 승인된 브랜드 색상으로 묶는다고 해서 각각의 대비가 명확하게 드러나는 것은 아닙니다.

구매 내역에 관련 사용자 인터페이스가 포함되어 있지 않은 경우, 요청 범위를 그에 맞게 좁히십시오. 하드웨어 조명, 눈부심 및 캐비닛 가시성은 별도의 검토가 필요할 수 있습니다. 이 문서에서는 웹 콘텐츠 명암비를 실외 조명 조건이나 고객의 시청 거리에서의 기기 성능을 완벽하게 평가하는 기준으로 간주하지 않습니다.

스마트 자동판매기를 평가하는 방법

최종 후보 목록은 2026년 10월 10일에 검토된 세 가지 공개 WEIMI 제품 목록을 기반으로 작성되었습니다. 당사는 해당 제품들의 디스플레이를 직접 테스트하거나 설치된 아이콘 색상을 측정하지 않았습니다. 구매자가 요청해야 하는 문서화된 소매 형식 및 텍스트 이외의 대비 증거를 비교합니다. 제품 사진만으로는 규정 준수를 보장할 수 없습니다.

제안된 승인 검토를 위해 객체 레코드를 생성하십시오. 레코드에는 화면 및 구성, 제어 또는 정보, 필수 시각적 요소, 작동 상태, 전경색, 인접색, 측정 비율 및 해석이 포함됩니다. 객체가 나타나는 위치를 보여주는 스크린샷을 첨부하십시오. 동등한 정보가 제공되어 그래픽 요소가 필요하지 않은 경우, 해당 대안과 사용자가 해당 정보에 접근하는 방법을 문서화하십시오.

W3C 기술 G207은 단색 또는 그라데이션 배경 위에 있는 단색 아이콘을 포함하여 이해를 돕는 데 필요한 아이콘을 다룹니다. 이 절차는 전경과 인접한 배경에서 시작하여 그라데이션 또는 패턴에서 대비가 가장 낮은 부분을 테스트합니다. 대비가 3:1 미만인 경우, 해당 영역을 보이지 않게 처리했을 때 아이콘이 여전히 인식 가능한지 여부를 확인합니다. 이는 여러 샘플링 값을 평균내는 것보다 더 구체적인 방법입니다.

이러한 기법들은 기준을 충족하는 방법의 예시일 뿐, 의무적인 구현 사항은 아닙니다. 공급업체는 다른 지원되는 접근 방식을 사용할 수도 있습니다. 조달 과정에서 중요한 것은 실제 요구되는 시각적 정보와 제공된 결과물에 근거한 명확한 결과이며, 예외 사항 및 검증되지 않은 영역은 공개적으로 명시되어야 합니다.

주요 구매 요인

정보를 담고 있는 부분을 측정하십시오.

아이콘이 페이지 배경과 강한 대비를 이루는 원 안에 배치되어 있지만, 아이콘 자체는 ​​원과 거의 대비되지 않을 수 있습니다. 아이콘이 기능을 전달하는 요소라면, 아이콘과 주변 배경과의 대비를 고려해야 합니다. 반대로, 컨트롤의 채우기 색상이 컨트롤의 존재를 나타내는 특징이라면, 주변 영역과의 대비가 중요할 수 있습니다. 잘못된 쌍에 대한 적절한 비율은 신뢰도가 떨어집니다.

상태 점검 결과는 전후 비교와 분리하여 관리하십시오.

SC 1.4.11은 두 구성 요소가 인접하지 않은 경우, 한 상태에서의 색상이 다른 상태에서의 색상과 3:1의 명암비를 가져야 한다는 요건을 명시하지 않습니다. 필수 지표는 각 해당 상태에서 주변 구성 요소와 구별 가능해야 합니다. 따라서 초점이 맞지 않은 파란색과 초점이 ​​맞춰진 녹색을 비교하는 경우 실제 배경의 희미한 표시를 놓칠 수 있습니다. 색조만을 이용한 의미 해석은 별도의 색상 사용 관련 질문입니다.

경계가 필요한지 설명하십시오.

모든 버튼 테두리의 대비율을 3:1로 강제하는 규칙을 적용하지 마십시오. W3C는 시각적 콘텐츠가 충분하여 식별 가능한 컨트롤은 클릭 영역 주변에 반드시 테두리가 필요하지 않다고 설명합니다. 테두리가 유일한 시각적 식별 수단인 입력 필드는 예외입니다. 식별 근거는 객체 기록에 남겨두십시오. 대비되는 포커스 표시 방식은 별도의 검토가 필요합니다.

합격 기준 이상의 세부 사항은 재검토하십시오.

W3C는 앤티앨리어싱으로 인해 매우 가는 선이 정의된 색상보다 흐릿하게 보일 수 있다고 지적합니다. 따라서 부드럽게 처리된 가장자리 픽셀을 표준 색상 쌍으로 간주하는 대신 사용자 에이전트 또는 기본 작성자 스타일에서 가져온 색상을 사용하여 평가하십시오. 그런 다음 렌더링된 모양을 검사하십시오. 명목상의 비율로는 가는 선을 실질적인 지표로 활용하기 어렵습니다. 더 굵은 모양이나 추가적인 대비를 사용하는 것이 적절한 디자인 선택일 수 있습니다.

예외 처리를 정확하게 사용하십시오.

비활성화된 컨트롤은 표시되지만 상호 작용할 수 없습니다. 공급업체는 면제를 주장하기 전에 이러한 상태임을 입증해야 합니다. 수정되지 않은 사용자 에이전트 모양은 제작자가 만든 대체 모양과 다릅니다. 필수적인 그래픽 표현에도 합리적인 이유가 필요합니다. 브랜딩만으로는 제작자가 선택한 선택적 저대비 처리를 포괄적으로 설명할 수 없습니다. 모든 까다로운 그래픽을 면제 대상으로 분류하기보다는 그 근거를 기록해야 합니다.

주제와 배경에 관계없이 증거를 보존하세요.

단색 타일의 필수 화살표는 제대로 표시되지만, 광고 그라디언트의 동일한 화살표는 알아볼 수 없는 형태를 보일 수 있습니다. 운영자가 변경할 수 있는 콘텐츠를 포함하여 관련 배경 이미지를 요청하십시오. 그라디언트의 경우, 대비가 가장 낮은 영역과 나머지 정보를 확인하십시오. 최종 제공을 위해 의도된 구성을 가장 보기 좋은 스크린샷으로 대체하지 마십시오.

최고의 스마트 자동판매기

다음은 다양한 소매 형식에 적합한 실제 제품들입니다. "최고"는 구성 및 증거 검토 후 적합 가능성이 높은 제품을 의미하며, 독립적인 성능 순위를 나타내는 것은 아닙니다. 이 기사에 포함된 제품 중 어느 것도 검증된 비텍스트 대비 점수를 보유하고 있지 않습니다.

기능 비교

목록에 필요한 측정된 인터페이스 데이터가 제공되지 않으므로 텍스트 이외의 요소 차이만으로는 정당한 승자를 가릴 수 없습니다. 공급업체에 정확한 구성 정보를 제공하고 관련 증거 자료를 제출하도록 요청하십시오. 제안된 재설계는 유용한 설계 자료가 될 수 있지만, 검증된 승인 결과는 합의된 구성에 대한 평가를 필요로 합니다.

비용 및 투자수익률 분석

이는 가상 검토 비용이며, 장비 가격, 공급업체 견적 또는 실제 절감액이 아닙니다. 검토자가 필수 그래픽 지표 16개를 재고 조사하고 해당 상태를 검토하는 데 14시간이 소요되며 시간당 비용은 75달러라고 가정하면 총 1,050달러입니다. 설계 변경 비용은 850달러, 출시 검증 비용은 350달러라고 가정하면 초기 비용은 2,250달러입니다. 하드웨어, 운송비, 세금, 재고 및 결제 비용은 제외됩니다.

이 공식은 허용액을 예상 연간 혜택으로 나눈 후 12를 곱하는 것입니다. 할인 및 향후 유지보수 비용은 고려하지 않습니다. 또한, 이 공식에서는 자판기 매출 증가나 지원 요청 감소는 고려되지 않습니다. 투자 청구를 하기 전에 이러한 입력값들을 실제 비용과 공급업체 견적으로 대체하십시오.

견적서에 객체 인벤토리, 측정, 설계 수정 및 회귀 검증을 분리하여 포함하도록 요청하십시오. 아이콘 색상 하나만 변경하는 견적서에는 여러 상태 및 배경이 범위에서 제외될 수 있습니다. 인수인계 후 운영자가 배너, 팔레트 또는 대시보드 보기를 변경할 때 발생하는 상황을 정의하십시오. 증거 유지 관리 비용은 실제 제어 및 릴리스 책임에 따라 달라집니다.

시나리오별 최적의 선택

접근 제어식 냉장고를 통해 판매되는 포장 음료의 경우, 접근 및 결제 설정이 확정되면 단일 도어 AI 형식을 고려하십시오. 유용한 승인 요청은 해당 경로에 필요한 시각적 정보 목록입니다. 주문 구성이 다른 인터페이스를 사용하는 경우, 가상의 메뉴를 요구하지 마십시오.

터치스크린 방식의 스낵 및 음료 선택 프로세스를 위해서는 제품군에 맞는 배송 방식이 확정된 후 WM22를 고려해 보십시오. 구성된 선택 표시기 시연과 측정된 인접 색상 쌍을 요청하십시오. 화면 크기는 형식적인 정보일 뿐이며, 가장 작은 필수 표시의 가시성을 보장하는 것은 아닙니다.

메인 디스플레이를 공유하는 두 개의 판매 공간의 경우, 배치도 및 설치 검토 후 이중 진열대 스테이션을 고려하십시오. 판매 공간을 식별하는 데 필요한 그래픽 정보를 포함하십시오. 소매점 운영에 적합하고 실제 지표를 뒷받침하는 제품을 선택하십시오. 모든 그래픽이 기준을 충족한다는 막연한 주장만으로 선택하지 마십시오.

응용 프로그램

제안된 아이콘 전용 지원 컨트롤은 배지 안에 전화기 모양을 사용합니다. 배지와 페이지 비율만으로는 전화기 모양이 배지 안에서 인지 가능한지 여부를 판단할 수 없습니다. 승인 기록은 해당 심볼이 필수 객체임을 식별하고, 바로 인접한 색상 쌍을 유지하며, 구성된 상태를 표시해야 합니다. 아이콘의 이름과 동작에 대한 접근성 여부는 별도의 검사가 필요합니다.

제안된 주식 그래프는 시간에 따른 수량 변화를 선으로 나타냅니다. 해당 선과 필요한 값 안내선이 사용자가 필요로 하는 정보를 담고 있는지 확인하십시오. 만약 동일한 기능을 하는 레이블이 지정된 값 표가 있다면, 그 경로를 문서화하고 그래프가 이해를 위해 여전히 필요한지 검토하십시오. 숨겨진 내보내기가 활성 차트의 정보를 자동으로 대체한다고 가정하지 마십시오.

제안된 그라데이션 강조 타일에는 필수적인 화살표가 포함되어 있습니다. 가장 대비가 낮은 인접 영역을 첫 번째 검사 대상으로 사용합니다. 영역이 임계값 미만인 경우, 해당 영역을 보이지 않게 처리했을 때 나머지 도형이 여전히 화살표를 나타내는지 평가합니다. 시각적 추론 과정을 기록합니다. 어두운 영역과 밝은 영역을 평균화하면 기호를 인식할 수 있게 하는 핵심 부분이 가려질 수 있습니다.

자주 묻는 질문

최종 권고

필요한 시각적 객체, 해당 객체의 상태 및 인접 색상을 명시한 기록을 승인하십시오. 단일 팔레트 인증서 또는 읽기 쉬운 텍스트가 포함된 스크린샷만으로는 필요한 확인 표시, 화살표 또는 제어 표시기를 평가하기에 충분하지 않습니다. 범위, 예외 사항 및 식별 가능성을 설명하는 측정 및 근거를 보관하십시오.

실제로 제공된 소프트웨어를 검토한 다음, 작성된 테마나 배경이 변경될 때 관련 설정을 반복하십시오. 웹 콘텐츠 대비 평가, 사이트 가시성 조건 및 전체 시스템 요구 사항을 승인 범위에서 명확히 구분하십시오. 실질적인 결과는 공개 제품 목록이 독립적인 테스트를 제공한다고 주장하지 않고도 중요한 시각적 정보에 대한 추적 가능한 증거를 확보하는 것입니다.

CTA

WEIMI에 의도하는 제품군, 장비 형식 및 견적 소프트웨어 인터페이스를 보내주십시오. 작동에 필요한 아이콘, 표시기 또는 다이어그램을 포함하고 빌드별 증빙 자료를 요청하십시오. 설계 변경 및 검증에 대한 별도 가격을 요청하여 최종 승인 결과물을 명확히 하십시오.