濃いマスほど、このテーマでその指標が高いことを示します。
明瞭96
説得40
密度28
制作コスト35
課題適合88
仕事適合94
低高
短い答え
WCAG コントラスト チェックはいつ選ぶ？
次の条件に合う。UI タイプ、スライド タイトル、ポスター キャプション、バッジ ラベル
いつ避ける？
次の場合は別の形にする。ペアを測定せずにブランドの色合いだけを判断する
誰が作り、広めた？
WCAG コントラスト比。次世代モデルとしてのAPCA Research (Myndex)
何を符号化する？
前景と背景の輝度差
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
WCAG コントラスト チェックは前景と背景の輝度差として値を載せます。WCAG コントラスト比。次世代モデルとしてのAPCA Research (Myndex)。
業務報告・広告・課題では「UI タイプ、スライド タイトル、ポスター キャプション、バッジ ラベル」に向く。「ペアを測定せずにブランドの色合いだけを判断する」のときは別の形を選ぶ。
ソフト
- Color.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 — スライドへ EMF/SVG（スクリーンショット禁止）
- 書き出し 4 — ウェブはSVG、印刷はPDF
アクセシビリティ
- アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
- アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
- アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
- アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。
WCAG コントラスト チェック: 前景と背景の輝度差を守り、「ペアを測定せずにブランドの色合いだけを判断する」のときは別の図を選ぶ。