こんにちは！プロダクトデザイナー、そしてエンジニアの皆さん。
日々のUI/UXデザインやプロトタイピング、本当にお疲れ様です。Figmaが業界標準として君臨して久しいですが、昨今、オープンソースであり、デザイナーと開発者の「共通言語」を完全にオープンなSVGベースで実現できるPenpot（ペンポト）に、世界中のプロダクトチームが熱い視線を送っています。
特に「アクセシビリティ（a11y）」の担保は、もはや「余裕があればやる」ものではなく、法規制の観点やインクルーシブデザインの観点からも、プロダクトの生死を分ける必須要件です。
今回は、Penpotを使い倒して、Webアクセシビリティ基準（WCAG）をクリアするためのカラー選定とコントラスト比検証の極意を、チームへのワークフローの組み込み方まで含めて、どこよりも実践的にお伝えします。これをマスターすれば、デザインレビューでコントラスト不足を指摘されて手戻りが発生する悪夢から完全に解放されますよ。
—
1. なぜ「Penpot」でアクセシビリティに向き合うのか？
多くのデザイナーは「きれいな画面」を作りがちです。しかし、視覚に障害を持つユーザー、あるいは強烈な直射日光の下でスマホを見ているユーザーにとって、コントラストの低いテキストは「読めない＝存在しない」のと同じです。
Penpotの素晴らしいところは、Web標準技術（SVGやCSS Grid/Flexboxの概念）をそのままデザインツールに持ち込んでいるため、「デザイン段階からブラウザのアクセシビリティ標準を意識できる」点にあります。
特に、色のコントラスト比（Contrast Ratio）は、WCAG（Web Content Accessibility Guidelines）において以下の基準が定められています。
- AA基準（通常テキスト）: 4.5:1 以上
- AA基準（大きなテキスト / UIコンポーネント）: 3:1 以上
- AAA基準（通常テキスト）: 7:1 以上
この数値を、感覚ではなく「デザインシステムとツール機能」で確実に担保するのがプロの仕事です。
—
2. 基礎セットアップ：Penpotでアクセシビリティをハックする準備
まずは、Penpot上でアクセシビリティ検証をスムーズに行うための基礎環境を整えましょう。特別なプラグインを入れる前に、Penpotが標準で持っている強力な機能（トークンとカラーパレット）を正しく定義します。
ステップ1：セマンティックなカラーパレットの構築
アクセシビリティの基本は「色のハードコード（直値の使用）をしないこと」です。PenpotのColor Palettes機能を使い、役割ベース（セマンティック）でカラーを定義します。
推奨するカラー定義の構造（例）
- surface/
- background (白 / #FFFFFF)
- surface-primary (薄いグレー / #F9FAFB)
- text/
- primary (濃いチャコール / #111827) <-- 背景とのコントラストを厳格に検証
- muted (中間のグレー / #6B7280) <-- 大きな文字やアイコン用
- interactive/
- primary (ブランドカラー / #2563EB) <-- ボタンの背景
- on-primary (白 / #FFFFFF) <-- ボタンのテキスト（背景とのコントラスト必須）
このように、`text/primary` と `surface/background` の組み合わせが、常にWCAGの基準を満たすように設計段階で縛りを入れます。
—
3. 実践：Penpotでのコントラスト比検証と「Hello World」的カラーチェック
それでは、実際にPenpot上でアクセシビリティを検証するステップを見ていきましょう。ここでは、最初のコンポーネントとして「アクセシブルなCTA（行動喚起）ボタン」を作成するプロセスを「Hello World」として解説します。
Step 1: ボタンコンポーネントの配置
Penpotのキャンバスに、適当な長方形（Rectangle）を置き、その上にテキスト「今すぐ始める」を配置します。
- 背景色（Rectangle）: `#2563EB`（鮮やかな青）
- テキスト色（Text）: `#FFFFFF`（白）
Step 2: コントラスト比の検証
ここで、この組み合わせが本当にアクセシブル（読める色）かを確認します。
Penpotのネイティブ機能、またはアクセシビリティ検証用の拡張機能や外部チェッカー（WebAIM Contrast Checkerなど）を併用します。
1. 背景色 `#2563EB` と テキスト色 `#FFFFFF` の輝度比（Luminance Contrast）を計算します。
2. この場合、コントラスト比は 約 4.54:1 となり、ギリギリ WCAG AA基準（通常テキストの4.5:1） をクリアします！
> 💡 プロの知見:
> 「ギリギリクリア」は危険信号です。デバイスの画面輝度や劣化を考慮し、プロダクトのメインボタンであれば 7:1（AAA基準） を目指すか、背景を少し濃くする（例: `#1D4ED8` にする）ことで、アクセシビリティ・スコアを安全圏に引き上げることができます。
Step 3: コンポーネント（Component）化とトークンの紐付け
確認ができたら、このボタンを `[Cmd/Ctrl + Alt + K]` でコンポーネント化します。
色を直接指定するのではなく、先ほど作成したカラーパレット（Design Tokens）を塗りにバインド（紐付け）してください。これにより、後から「やっぱりブランドカラーを微調整したい」となった時も、アクセシビリティを崩さずに一括変更が可能になります。
—
4. インクルーシブデザインをチーム全体で担保するワークフロー
ツール上でコントラスト比をチェックできるようになったら、次はこれを「チームの習慣（ワークフロー）」に昇華させます。デザイナーだけが頑張っても、開発段階で勝手に色が変えられてしまっては意味がありません。
1. デザインレビューのチェックリストに「コントラスト値」を義務化する
Pull Requestやデザインハンドオフ（引き渡し）の際、以下の項目をチームの共通定義（Definition of Ready/Done）に組み込みます。
- [ ] すべての本文テキストは、背景色に対して 4.5:1 以上のコントラスト比を持つか？
- [ ] 無効状態（Disabled）の要素を除き、UIの境界線やアイコンも 3:1 以上を確保しているか？
- [ ] 色だけに依存した情報伝達（例：「赤いエラー文字だけ」でなく、アイコンやテキストを併用しているか）になっていないか？
2. 開発者（エンジニア）とのシームレスな連携
Penpotの最大の強みは、開発者が右側のインスペクターパネルから、CSSのプロパティだけでなく、定義されたカラー変数（CSS Variables / Design Tokens）をダイレクトに取得できる点です。
デザイナーがPenpot上で適切にセマンティックな名前（`–color-text-primary` など）でトークンを切っていれば、エンジニアはそれをそのままコード（Tailwind CSSやCSS Modules）に落とし込むだけです。
/ ペンポトのデザインシステムから導出されたCSS変数の例 /
:root {
–color-surface-background: #FFFFFF;
–color-text-primary: #111827; / コントラスト比 16:1 以上を確保 /
–color-interactive-primary: #1D4ED8;
–color-on-primary: #FFFFFF;
}
.button-primary {
background-color: var(–color-interactive-primary);
color: var(–color-on-primary);
}
この連携ができれば、「デザイナーが作った色がアクセシビリティ基準を満たしていないことに、リリース直前のQAテストで気づいて大慌てで修正する」という地獄のような手戻りは二度と発生しません。
—
5. おわりに：アクセシビリティは制限ではなく「最高のデザイン品質」
アクセシビリティというと、「ルールに縛られてデザインの自由度が下がる」と感じる方もいるかもしれません。しかし、それは大きな誤解です。
コントラストが高く、誰にとっても読みやすいUIは、結果的に「あらゆるユーザーにとって使いやすく、美しいプロダクト」になります。オープンでフラットな思想を持つPenpotをキャンバスに選んだあなたなら、ツールのもつポテンシャルを最大限に引き出し、誰一人置き去りにしないインクルーシブなデジタル空間を創り上げることができるはずです。
今日からあなたのPenpotプロジェクトでも、まずはメインのテキストと背景のコントラスト比を測ることから始めてみませんか？
毎日の作業が、社会を少し良くする確かな手応えに変わるはずです。それでは、次回のデザインでお会いしましょう！