テキストの色と背景色のコントラスト比を自動で計算し、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
Normal text 4.5:1
Level AAA
通常テキスト 7:1
Normal text 7:1
自動検出 — レイヤー名の変更不要
Auto-detected — no layer name changes needed
ボタンやリンクなどのインタラクティブ要素のサイズが、タッチ操作に十分な大きさかチェックします。
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
画像に代替テキストが設定されているかチェックします。画像レイヤーの名前に接頭辞を付けるだけで設定できます（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 recommend or require a page: declaration
トップレベルフレームの名前を page: ホーム のように変更してページを宣言します。見出し構造は page: なしでもチェックされますが、複数ページのデザインでは各ページ内の見出しが独立して評価されるため page: の宣言を推奨します。フォーカス順序は page: がないとチェックが実行されません。
Rename a top-level frame to something like page: Home to declare it as a page. Heading structure checks work without page:, but declaring pages is recommended for multi-page designs so headings are validated independently per page. Focus order checks won't run without a page: declaration.
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
h3: 小見出し Subsection
— h6 まで対応
— up to h6
page: なしでもチェックされますが、全見出しが1つのスコープとして評価されます。複数ページのデザインでは page: を宣言すると、各ページ内で独立して見出し階層がチェックされます（推奨）。
Checks run even without page:, but all headings are evaluated as a single scope. For multi-page designs, declaring page: is recommended so heading hierarchy is validated independently per page.
キーボード操作時のフォーカス順序が設定されているかチェックします。まず 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
f3: 送信ボタン Submit Button
— f99 まで対応
— up to f99
page: を付けないとチェックが実行されません。フォーカス順序は各ページ内で独立して番号を振ります。
Checks won't run without page:. Focus order numbers are scoped independently per page.
追加機能
Additional Features
アクセシビリティチェックに加えて、デザインの品質管理とチーム連携のための機能を備えています。
Beyond accessibility checks, FigmaNavi includes features for design quality and team collaboration.
色・余白・角丸・エフェクトなどの値が Figma 変数にバインドされているかチェックします。ハードコードされた値を検出し、デザイントークンの活用を促します。
Checks that colors, spacing, corner radius, and effects are bound to Figma variables. Detects hardcoded values and encourages use of design tokens.
検出対象
Detects
Fill / Stroke / Gap / Padding / Radius / Effect / Opacity
Fill / Stroke / Gap / Padding / Radius / Effect / Opacity
自動検出 — レイヤー名の変更不要
Auto-detected — no layer name changes needed
コントラスト比やターゲットサイズの閾値を自由にカスタマイズできます。設定は Figma ファイルに保存され、同じファイルを開いている全員に共有されます。編集時には確認ダイアログで誤操作を防止します。
Customize contrast ratio and target size thresholds freely. Settings are saved to the Figma file and shared with everyone who opens it. Edit confirmation dialogs prevent accidental changes.
カスタマイズ可能
Customizable
コントラスト比 1:1 〜 12:1
Contrast ratio 1:1 to 12:1
WCAG レベル選択で「Custom」を選ぶと、スライダーで自由に閾値を設定できます。「チーム設定として保存」でファイルに紐付けて共有。
Select "Custom" in the WCAG level selector to set thresholds with sliders. Use "Save as team settings" to share across the file.