Figmaプラグイン:選択したフレーム内のテキストのコントラスト比を確認し、アクセシビリティをチェックします。
このプラグインは、Figmaで選択されたフレーム内のテキスト要素について、背景色とのコントラスト比を自動計算し、WCAG 2.0のアクセシビリティガイドラインに準拠しているかを確認するツールです。
- 選択したフレーム内のテキスト要素を自動検出
- テキストと背景のコントラスト比を計算
- WCAG 2.0の基準(AA、AAA)に基づく適合性チェック
- 問題のあるテキスト要素のハイライト表示
- 改善提案の表示
WCAG 2.0では以下の基準が定められています:
- 通常のテキスト: 4.5:1 以上(AA基準)、7:1 以上(AAA基準)
- 大きなテキスト: 3:1 以上(AA基準)、4.5:1 以上(AAA基準)
詳細についてはWCAG 2.0 解説書を参照してください。
- Figmaでチェックしたいフレームを選択
- プラグインメニューから「Contrast Checker」を実行
- 結果を確認し、必要に応じて色を調整
manifest.json: プラグインの設定ファイルcode.js: メインのプラグインロジックREADME.md: このファイル
- Figma Desktop アプリを開く
- メニューから「Plugins」→「Development」→「Import plugin from manifest...」
- このプロジェクトの
manifest.jsonを選択 - プラグインが開発メニューに追加されます
MIT License