カラーコントラストチェッカー

前景色と背景色を入力し、通常テキストと大きなテキスト用のAAおよびAAAパス/フェイルバッジでWCAGコントラスト比をチェックします。

前景

背景

21.00:1

AA 通常の文字

AA 大きい文字

AAA 通常の文字

AAA 大きい文字

プレビュー

いろはにほへとちりぬるをわかよたれそつねならむ

使い方

このツールはWCAG 2.1ガイドラインに従って2色のコントラスト比を計算し、カラーコンビネーションがアクセシブルかどうかを示します。

使い方：

テキストカラーと背景色を16進数、RGBまたはカラーピッカーで入力します。

ツールが即座にコントラスト比を表示します。

結果がAA（通常テキストで4.5:1）またはAAA（7:1）レベルを満たすか確認します。

例：黒いテキスト（#000000）を白い背景（#FFFFFF）に → コントラスト比21:1（AAA）。

制限事項：このツールはテキスト/背景のコントラストのみを評価します。すべてのWCAGアクセシビリティ基準を網羅するものではありません。

プライバシー：データは送信されません。すべてローカルで計算されます。

活用シーン

ウェブサイトのリデザイン公開前にブランドカラーパレットのアクセシビリティ準拠を確認する

ダークまたはライトテーマで読みやすいボタンやリンクの色を選ぶ

Section 508、EN 301 549、ADAへの準拠のためにWCAG 2.1 AAまたはAAA要件を満たす

開発開始前にデザイナーから送られたモックアップを確認し、読めないテキストを指摘する

小さな輝度差がどのようにして大きなコントラスト失敗を引き起こすかを示してアクセシビリティを教える

よくある質問

WCAGコントラスト比とは何ですか？

2色の相対輝度に基づいて計算された比率で、1:1（コントラストなし）から21:1（最大コントラスト）まであります。

アクセシビリティの最小値は？

通常テキストでAA：4.5:1、大きなテキストで3:1です。

AAAレベルとは何ですか？

7:1の比率で、最大限のアクセシビリティのために推奨されます。

複数の組み合わせをテストできますか？

はい、色を変えるとリアルタイムで結果が更新されます。

HSL形式はサポートされていますか？

入力は16進数とRGB形式を受け付けます。

使い方