Figma Community公開中 ・ 無料で使えます
アクセシビリティ診断を
Figmaから。
どんな人にも優しいデザインへ。
JIS A11yは、JIS X 8341-3:2016（= WCAG 2.0）基準のコントラスト比を、Figmaのデザイン段階でそのまま診断・修正できるプラグインです。
- JIS X 8341-3:2016明示
- Figma Community公開中・無料
- 日本語UI
フレームを選んで押すだけ。インストール不要でFigmaからすぐ実行できます。
課題を知る
Problem
アクセシビリティのこんな課題はありませんか？
-
公共・自治体案件で
AA準拠を求められた公共・自治体の案件ではJIS X 8341-3のAA準拠が事実上の要件。デザイン段階から、根拠を持ってコントラストを確認できます。
-
海外製ツールでは
JISとの対応が分からない海外製のチェックツールはWCAG表記が中心。このプラグインはJIS X 8341-3:2016を明示し、該当項目を日本語で示します。
-
実装後の手戻りを
なくしたいコントラスト不足は実装後に直すほどコストが大きくなります。デザイン段階で潰しておけば、手戻りが起きません。
解決を見る
Solution
その課題、JIS A11yが解決します
フレームを選ぶだけで、中のテキストをまとめてチェック。OK / NG / 要確認がひと目で分かり、
NGはその場で文字色・サイズを調整して直せます。
-
フレームまたはテキストを選択
-
7.2 : 1AA ✓2.9 : 1NG3.6 : 1要確認
「コントラスト診断」を実行
-
Aa3.2 : 1 NG Before→Aa4.8 : 1 AA ✓ After（ワンクリック反映）
NGをその場で修正 → 反映
JIS A11yの機能を見る
Features
JIS A11yの3つの特徴
すべて無料
01
選ぶだけで、まとめて診断
選択したフレーム内のテキストを全走査し、コントラスト比とAA / AAA判定を一覧表示します。1本ずつスポイトで確認する手間がなくなり、画面単位でまとめてチェックできます。
02
複雑な背景でも、実際の色で判定
単色はもちろん、カードの上・重なり図形・半透明・グラデーション・画像・ぼかしまで対応。テキスト直下の実際の色をサンプリングし、最も読みづらい箇所を基準に判定します。
テキストに
03
診断して終わりにしない。その場で直す
文字色・文字サイズを変えるとコントラスト比がリアルタイムに再計算。OKになったらワンクリックでデザインに反映します。NG / 要確認の箇所はキャンバス上にもマーカーで表示され、結果リストと双方向で連動します。
その他の機能
キャンバスにマーカー
NG / 要確認の箇所をキャンバス上にハイライト。
ソート機能でNGのみを表示。
結果リストとレイヤーが連動しているので、対象レイヤーをクリックして素早く調整可能。
JISの該当項目を日本語表示
1.4.3コントラスト（AA）／1.4.6（AAA）など、判定の根拠を日本語で明示します。
非テキストの3:1診断（任意）
図形・UI部品のコントラスト（WCAG 2.1 1.4.11）もトグルでチェックできます。
選ばれる理由を知る
Why JIS A11y
JIS A11yが選ばれる3つの理由
-
「JIS X 8341-3:2016」を明示
FigmaのAI Accessibility Checkerや海外製ツールはWCAG表記が中心。JIS X 8341-3:2016を明示して判定し、該当項目を日本語で示す数少ないプラグインです。公共案件の要件と同じ言葉で確認できます。
-
日本語UI・日本語の根拠
判定も該当項目もすべて日本語。チームやクライアントへの説明に、そのまま使えます。
-
診断して終わりにしない
NGを見つけるだけでなく、その場で色・サイズを調整してデザインに反映するところまでを1つのパネルで完結します。
診断方法を確認する
How to Use
コントラスト診断3ステップ
-
フレームまたは
テキストを選択チェックしたい画面のフレームを選ぶだけ。個別のテキスト選択もOK。
-
「コントラスト診断」を
実行中のテキストをまとめて走査。OK / NG / 要確認がひと目で分かります。
-
NG項目を
その場で修正色・サイズを調整するとリアルタイムで再判定。ワンクリックで反映します。
診断範囲の理解を深める
Scope
プラグインで診断できる範囲
JIS X 8341-3:2016の達成基準（例）
- コントラスト（1.4.3 AA／1.4.6 AAA）
- 非テキストのコントラスト3:1（任意・WCAG 2.1）
- Pro代替テキスト
- Pro見出しと構造
- Proフォーム・エラーの特定
- Proリンクの目的
- キーボード操作
- 音声・動画の代替
- ページタイトル
✓ 緑の枠＝無料版で診断できる基準 ／ Pro＝Proで診断・注釈に対応予定
グレー＝実装後の試験が必要な基準（デザイン段階では判定できません） ※達成基準の一部を抜粋
✔ 診断できること（無料版）
- テキストのコントラスト比（1.4.3 AA／1.4.6 AAA）
- 画像・グラデーション・半透明など複雑な背景上のテキスト（実際の色をサンプリング）
- 非テキスト（図形・UI部品）のコントラスト3:1（任意・WCAG 2.1 1.4.11）
△ 実装後の試験が必要なこと
- キーボード操作・音声や動画の代替・ページタイトルなど、実装（HTML）に依存する項目
- 画像に焼き込まれた文字のコントラスト（Proでは文字画像そのものを検出します）
- 「JIS X 8341-3:2016準拠」の表明そのもの（全達成基準の試験と結果の公開が必要です）
無料版はJIS X 8341-3:2016のうちコントラスト（1.4.3／1.4.6）の確認を支援します。Proではデザイン段階で判定できる達成基準へ範囲を広げ、実装後の試験が必要な項目は「要確認」として分けて示します。範囲を正直に示すことが、信頼できる診断の前提だと考えています。
Pro — 開発中
JIS A11y Pro
準備中のPro機能紹介。無料版はこのまま使い続けられます。コントラスト診断も強化・見直しを行います。
✓ 緑＝無料版で提供中 ／ Pro＝開発中（Proで提供予定）
診断できる項目
- コントラスト（1.4.3 AA／1.4.6 AAA）
- 非テキストのコントラスト3:1（任意）
- Pro色の使い方（1.4.1）
- Proターゲットサイズ（2.5.5／2.5.8）
- Proテキストの拡大耐性（1.4.4）
- Pro文字画像の検出（1.4.5）
- Pro日本語の読みやすさ（1.4.8／1.4.12）
- Pro曖昧なリンク文言（2.4.4）
- Proやさしい日本語（3.1.3〜3.1.5）
- Proフォーム・エラー表示フォーム検査（3.3.1〜3.3.3）
- Proナビ・ラベルの一貫性ナビの一貫性（3.2.3／3.2.4）
- Proフォーカスの可視化（2.4.7）
注釈・ハンドオフ
- Pro代替テキスト（1.1.1）
- Pro見出し構造（2.4.6／1.3.1）
- Proフォーカス順序（1.3.2／2.4.3）
- Prorole・state注釈（4.1.2）
- Proa11y実装要件書の出力
機能
- その場で修正・ワンクリック反映
- ProAI提案・一括修正（主軸）
- ProJIS試験様式の準拠レポート（PDF／CSV）
AI提案・一括修正
検出したNGをまとめて修正。提案を確認してワンクリックで一括適用し、1件ずつ直す作業をなくします。FigmaのAI Accessibility Checkerは修正案の提示まで。適用までを担うのがProの主軸機能です。
JIS診断の拡張
コントラストの先へ。文字画像・日本語の読みやすさ・曖昧なリンク文言・フォーム・ナビの一貫性など、デザイン段階で判定できる達成基準を診断。日本語サイト特有の課題に対応します。
JIS試験様式の準拠レポート
WAIC「試験実施ガイドライン」の達成基準チェックリスト様式（達成基準／適合レベル／適用／結果／注記）に沿ってPDF・CSVで出力。デザイン段階で確認できた項目と、実装で要確認の項目を分けて記載します。※「準拠」の表明には全達成基準の試験と結果の公開が必要です。
FigmaのAI Accessibility Checker（WCAG基準・Open Beta）との違い=JIS X 8341-3への紐づけ・日本語の根拠表示・JIS試験様式のレポート・一括適用。Figmaの機能はこちら ↗
クリックで応援してもらえると嬉しいです。
（個人情報は取得しません）