컬러 시스템 디자인 시스템

모든 인터페이스에서 명확한 역할을 갖고 의미를 유지하는 색상을 사용하세요.

확인 항목 8개 · 그룹 2개

체크리스트 내용

검토 진행 상황

구조와 의미

사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.

기초 색상 팔레트 결정관리되는 이름과 값으로 공유 색상 수준을 설정합니다.구성요소는 색상을 직접 선택하기보다는 역할에 따라 색상을 사용해야 합니다.예시 "오류 텍스트" 변수는 양식 오류 및 제출 실패 경고에 사용됩니다.색상을 역할과 연결배경색, 텍스트, 테두리, 동작 및 응답을 분리합니다.역할별로 이름을 지정하면 한 곳에서 인터페이스를 변경하는 데 도움이 됩니다. 각 요소가 자체 기본 색상을 선택하도록 하지 마세요.상태에 맞는 색상이 충분합니다기본값을 확인하고, 마우스를 올리거나, 클릭하고, 초점을 맞추고, 선택하고 비활성화합니다.응답 색상 통일제품 전체에서 성공, 경고, 오류 및 정보에 대해 동일한 의미를 유지하십시오.밝은 곳과 어두운 곳 모두에서 사용되는 모든 배경에 동일한 조건을 적용해 보세요. 한 배경에서는 읽기 쉬운 오류 색상이 다른 배경에서는 사용되지 않을 수 있습니다.

상호 작용 및 유용성

작업을 시도하고 상태를 변경한 후 작업을 계속하세요.

사용된 색상 쌍 측정색상 팔레트뿐 아니라 실제 배경과 텍스트, 아이콘, 컨트롤을 대조해 보세요.허용되는 텍스트와 배경 쌍을 기록하면 개발자가 어떤 색상이 어울리는지 추측할 필요가 없습니다.밝고 어두운 테스트를 독립적으로 수행각 인터페이스에 대한 개별 값을 정의하고 모든 상태를 확인합니다.단순히 밝은 색에서 어두운 색으로 전환하는 대신 스킨을 전환한 후 각 색상 쌍을 테스트하십시오. 하이라이트와 테두리에는 각자의 역할이 필요합니다.신분증을 손상되지 않고 쉽게 읽을 수 있도록 유지합니다.적절한 위치에 브랜드 색상을 사용하십시오. 대비가 불충분할 때 색조를 조정합니다.식별 색상을 읽기 어려운 경우 장식용으로 유지하고 의미 있는 텍스트나 작업에 충분히 선명한 색상을 사용하세요.색상만으로 의미를 전달하도록 두지 마세요.데이터와 상태를 구별해야 할 경우 레이블, 모양 또는 기호를 통합하세요.

진행 상황은 이 브라우저에 자동으로 저장됩니다.

안내