FigmaNavi

Figmaデザインのアクセシビリティを、ワンクリックでスキャン

Scan your Figma designs for accessibility issues in one click

コントラスト比・ターゲットサイズを自動チェック。WCAG A / AA / AAA に対応。

Auto-checks contrast ratio and target size. Supports WCAG A / AA / AAA.

WCAG A WCAG AA WCAG AAA
Figmaにインストール Install on Figma 使い方を見る View Usage Guide

コントラスト
Contrast
AA AAA
テキストの色と背景色のコントラスト比を自動で計算し、WCAG基準を満たしているかチェックします。
Automatically calculates contrast ratio between text and background colors to verify WCAG compliance.
AA: 1.4.3 Contrast (Minimum) / AAA: 1.4.6 Contrast (Enhanced)
AA: 1.4.3 Contrast (Minimum) / AAA: 1.4.6 Contrast (Enhanced)
Level AA
通常テキスト 4.5:1
大きいテキスト 3:1
Normal text 4.5:1
Large text 3:1
Level AAA
通常テキスト 7:1
大きいテキスト 4.5:1
Normal text 7:1
Large text 4.5:1
自動検出 — レイヤー名の変更不要 Auto-detected — no layer name changes needed
ターゲットサイズ
Target Size
AA AAA
ボタンやリンクなどのインタラクティブ要素のサイズが、タッチ操作に十分な大きさかチェックします。
Checks that interactive elements like buttons and links are large enough for touch interaction.
AA: 2.5.8 Target Size (Minimum) / AAA: 2.5.5 Target Size (Enhanced)
AA: 2.5.8 Target Size (Minimum) / AAA: 2.5.5 Target Size (Enhanced)
Level AA
最小 24 x 24px
Minimum 24 x 24px
Level AAA
最小 44 x 44px
Minimum 44 x 44px
自動検出 — レイヤー名の変更不要 Auto-detected — no layer name changes needed
代替テキスト
Alt Text
A
画像に代替テキストが設定されているかチェックします。画像レイヤーの名前に接頭辞を付けるだけで設定できます(page: 不要)。
Checks that images have alternative text. Just add a prefix to the image layer name (no page: needed).
1.1.1 Non-text Content
alt: 商品の写真Product photo
— 代替テキストを設定
— set alt text
noalt
— 装飾画像(alt不要)
— decorative image (no alt needed)
以下のチェックには page: 宣言が必要です
The following checks require a page: declaration
トップレベルフレームの名前を page: ホーム のように変更してページを宣言します。その中のレイヤー名に接頭辞を付けてチェック情報を設定します。page: がないとチェックが実行されません。
Rename a top-level frame to something like page: Home to declare it as a page. Then add prefixes to layer names inside it. Checks won't run without a page: declaration.
見出し構造
Heading Structure
A
H1〜H6の見出し階層が正しいかチェックします(レベルスキップ、H1重複、H1欠如)。まず page: でページを宣言し、その中のテキストレイヤー名を変更します。
Checks H1-H6 heading hierarchy for skips, duplicate H1, or missing H1. First declare a page with page:, then rename text layers inside it.
1.3.1 Info and Relationships
page: ホームHome
— トップレベルフレームをページとして宣言(必須)
— declare top-level frame as a page (required)
h1: ページタイトルPage Title
— ページ内のテキストレイヤー名を変更
— rename text layers inside the page
h2: セクション名Section Name
h3: 小見出しSubsection
— h6 まで対応
— up to h6
page: を付けないとチェックが実行されません。各ページ内で見出し階層が独立してチェックされます。
Checks won't run without page:. Heading hierarchy is validated independently within each page.
フォーカス順序
Focus Order
A
キーボード操作時のフォーカス順序が設定されているかチェックします。まず page: でページを宣言し、その中のインタラクティブ要素のレイヤー名を変更します。
Checks that keyboard focus order is defined for interactive elements. First declare a page with page:, then rename interactive layers inside it.
2.4.3 Focus Order
page: ホームHome
— トップレベルフレームをページとして宣言(必須)
— declare top-level frame as a page (required)
f1: 検索バーSearch Bar
— ページ内の要素にフォーカス順を設定
— set focus order on elements inside the page
f2: メール入力Email Input
f3: 送信ボタンSubmit Button
— f99 まで対応
— up to f99
page: を付けないとチェックが実行されません。フォーカス順序は各ページ内で独立して番号を振ります。
Checks won't run without page:. Focus order numbers are scoped independently per page.

References

References

FigmaNaviの判定基準は以下のWCAGガイドラインに基づいています。

FigmaNavi's checks are based on the following WCAG guidelines.