テキストの色と背景色のコントラスト比を自動で計算し、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
ボタンやリンクなどのインタラクティブ要素のサイズが、タッチ操作に十分な大きさかチェックします。
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 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.
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: を付けないとチェックが実行されません。各ページ内で見出し階層が独立してチェックされます。
Checks won't run without page:. Heading hierarchy is validated independently within each 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.