도구

한눈에

여유밀도

진한 칸일수록 이 직업에서 해당 지표가 높습니다.

명료함96

설득40

밀도28

제작 비용35

과제 적합성88

업무 적합성94

낮음높음

WCAG 대비 확인은 전경과 배경의 휘도 차이로 값을 담습니다. WCAG 명암비; 차세대 모델로 APCA 연구(Myndex).

업무 보고서, 광고, 학교 과제에서 이렇게 씁니다. UI 유형, 슬라이드 제목, 포스터 캡션, 배지 라벨. 피할 조건은 이렇습니다. 쌍을 측정하지 않고 단독으로 브랜드 색상을 판단

소프트웨어

• Color.js — 브라우저나 Node.js에서 대비와 색상 공간을 계산합니다. · MIT · github.com/color-js/color.js
• APCA (SAPC) — 최신 디스플레이를 위한 지각 대비 모델 - 배송 전에 라이센스를 읽어보세요. · AGPL-3.0 · github.com/Myndex/SAPC-APCA
• Leonardo — 대비 타겟을 사용하여 접근 가능한 테마 램프를 생성합니다. · Apache-2.0 · github.com/adobe/leonardo
• Bootstrap a11y docs — 거대한 UI 툴킷과 함께 제공되는 문서화된 대비 지침. · MIT · github.com/twbs/bootstrap
• Atlas SVG examples — JavaScript를 끄고 읽을 수 있는 서버 렌더링 예제입니다. · CC0 examples · github.com/Tool-Lifes/viz-atlas

보내기

• 보내기 1 — SVG
• 보내기 2 — PDF
• 보내기 3 — PPT에 EMF/SVG (스크린샷 금지)
• 보내기 4 — 웹은 SVG, 인쇄는 PDF

접근성

• 접근성 1 — 색만으로 의미 금지. 패턴·라벨·위치를 겹치세요.
• 접근성 2 — 본문 대비 4.5:1, 큰 마크는 3:1.
• 접근성 3 — 차트에 짧은 대체 텍스트. 숫자는 HTML 표로도.
• 접근성 4 — 움직임은 강조일 때만. prefers-reduced-motion을 존중.

WCAG 대비 확인: 전경과 배경의 휘도 차이를 지키고, 쌍을 측정하지 않고 단독으로 브랜드 색상을 판단에는 다른 그림을 고르세요.

← 스튜디오 WCAG 대비 확인