Contrast Checkerは、Framer キャンバス内で色のコントラストをチェックできるアクセシビリティプラグインです。テキストと背景のコントラストをAAおよびAAA基準で検査し、HEX、RGB、HSLなどのさまざまな色入力方式とカラーピッカーをサポートします。

デザインの初期段階でアクセシビリティを考慮することで、修正コストを削減し、より多くのユーザーに向けた包括的な体験を作ることができます。そのため、UI/UXデザイナー、開発者、そしてインクルーシブデザインを実践するチームにおすすめのプラグインです。

主要機能

多様な色入力方式のサポート

HEX、RGB、HSL形式で自由に色を入力でき、慣れた方法で作業できます。

カラーピッカーの統合

Framerキャンバスで直接色を選んで正確なコントラストをテストできます。

リアルタイムプレビュー機能

選択したテキストと背景の組み合わせをリアルタイムで視覚的に確認できます。

WCAG基準の自動検査

通常のテキストと大テキストに対して、それぞれWCAG AAおよびAAA基準に合致しているか自動で検査します。

ワンクリックで結果をコピー

検査結果とアクセシビリティの状態をワンクリックでコピーし、チームメンバーと共有できます。

追加説明

Contrast Checkerは、デザインアクセシビリティを自然にワークフローに組み込むことを支援します。時間を節約するだけでなく、UIの一貫性と専門性も向上します。