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

全ツール
カラーコントラストチェッカー
テキスト色と背景色の WCAG コントラスト比をチェック — 通常テキスト、大きなテキスト、UI コンポーネントの AA/AAA 合否判定をライブプレビューとアクセシブルカラーの提案付きで確認できます。
テキストカラー
ティント
背景色
ティント
コントラスト比
--:1
通常テキスト
18px 未満のボディテキスト（または 14px 未満の太字）
AA AAA
大きなテキスト
18px 以上の標準、または 14px 以上の太字
AA AAA
UI コンポーネント
アイコン、ボーダー、フォームコントロール＆グラフィック
AA AAA
ライブプレビュー

The quick brown fox

コントラストが十分であれば、大きなテキストは快適に読めます。

これは通常のボディテキストのサンプル段落です。適切なカラーコントラストは、弱視や色覚異常の方を含む全員がコンテンツを読みやすくします。 サンプルリンク.

小さな印刷物とキャプションは最も読みにくい — 最も高いコントラストが必要です。
サンプルボタン サンプルボタン
提案

すべて WCAG 2.x 相対輝度式を使用してブラウザでリアルタイムに計算されます — アップロードなし、サインアップなし、完全無料。

シェアする
関連ツール
色覚シミュレーター

第 1 色覚異常（赤盲）、第 2 色覚異常（緑盲）、第 3 色覚異常（青盲）、全色盲の方には画像やパレットがどのように見えるかを確認 — すべてブラウザで動作し、アップロードなし。
カラーコードコンバーター

HEX、RGB、RGBA、HSL、HSLA、HSV の間で色を変換 — 色を選び、アルファ値を調整し、任意のフォーマットを即座にコピーできます。
パレットエクスポーター

色のセットを貼り付けるかインポートし、CSS 変数、SCSS、Tailwind config、JSON、SVG スウォッチに即座にエクスポート — あらゆるパレットの仕上げに。
人気の検索
カラーコントラストチェッカー wcagコントラスト比 アクセシビリティコントラスト確認 テキストコントラスト確認 aa aaa コントラストテスト オンラインでコントラスト確認

この無料ツールをあなたのウェブサイトに追加 — 下のコードをコピーして貼り付けてください。