대비를 측정하며 읽기 쉬운 색상 팔레트 만들기.
색상에 역할을 부여하고 실제 전경과 배경의 조합을 시험하세요. 보기 좋은 색상 모음만으로 글자 가독성이나 접근 가능한 상호작용 상태가 보장되지는 않습니다.
작업에 맞게 절차를 조정하세요.
각 색의 용도를 정하고 정확한 값을 제시한 뒤 사용할 전경-배경 조합을 시험합니다. 필요한 상호작용 상태와 다른 배경도 포함합니다. 미적 선호와 측정된 대비를 분리하고 실제 구성 요소에서 검토합니다.
- 제공할 내용
- 브랜드 속성과 접근성 제약.
- 받을 결과
- 대비율을 확인한 후보 색상 팔레트.
입력과 결과를 확인하세요.
설명용 입력과 출력 · 실제 WebAct 실행이 아닌 학습용 예시
입력 항목 예시개
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
완성된 예시
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
이 입력을 프롬프트에 넣고 WebAct에 복사해 작업을 실행해 보세요. 결과는 설명용 예시와 다를 수 있습니다.
판단 기준과 문제 해결.
텍스트 한 쌍의 높은 대비가 전체 인터페이스의 접근성을 보장하나요?
아니요. 다른 상태, 제어 요소, 색 외의 신호도 검토해야 합니다. 색 조합 시험은 평가의 일부입니다.
강조색은 장식에 좋은데 작은 글씨에서는 실패하는 이유는 무엇인가요?
배경과의 텍스트 대비가 부족할 수 있습니다. 색의 역할을 바꾸거나 조합을 조정하세요.
이 워크플로의 참고 자료입니다.
직접 준비한 자료로 시도하세요.
작업 프롬프트의 예시를 내 자료로 바꾸세요. 필요한 요구 사항은 유지하고 작업을 WebAct에 복사하세요.
작업 맞춤 설정 및 복사 ↑