Tiny Online Tools logoTiny Online Toolssearchツールを検索…grid_viewすべてのツール
ホームchevron_rightデザインツールchevron_rightカラーコントラストチェッカーカラーコントラストチェッカー

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

アクセシビリティのためのWCAG 2.1カラーコントラスト比を確認します。

#f8fafc#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1
Contrast Ratio
WCAG 2.1 結果
check_circle
AA Normal Text
Min 4.5:1 — Body text, UI components
合格
check_circle
AA Large Text
Min 3:1 — 18pt+ or 14pt+ bold
合格
check_circle
AAA Normal Text
Min 7:1 — Enhanced: body text
合格
check_circle
AAA Large Text
Min 4.5:1 — Enhanced: large text
合格

関連ツール

ランダムカラーパレット生成ツール

ランダムカラーパレット生成ツール

ハーモニールールでランダムなカラーパレットを生成します。

PDF アクセシビリティチェック

PDF アクセシビリティチェック

PDF のタグ、読み上げ順序、代替テキスト、言語、見出し階層を、機械が確認できる WCAG 規則で点検します。

Border Radius ジェネレーター

Border Radius ジェネレーター

コーナーの丸みを視覚的にコントロールしてCSSをコピーします。

Box Shadow ジェネレーター

Box Shadow ジェネレーター

CSSボックスシャドウをリアルタイムプレビューで視覚的に作成します。

PDF 印刷プリフライト検査

PDF 印刷プリフライト検査

印刷所に入稿する前に、フォント・画像解像度・カラー・ページボックス・透明・インキ量をまとめて点検します。

キャンバスサイズ拡張ツール

キャンバスサイズ拡張ツール

各辺にパディングを追加して画像のキャンバスサイズを拡張します。単色または透明な塗りつぶし。完全プライベート。

SVG スターシェイプジェネレーター

SVG スターシェイプジェネレーター

任意の角数、シャープネス、色、グラデーション、任意のストロークでカスタマイズできる SVG スターを生成。

apps

もっと見る

無料オンラインツールの全コレクションを見る。

色を本番に出す前にコントラストを確認

配色がきれいでも、アクセシビリティ要件を満たしていないことはよくあります。このチェッカーを使えば、前景色と背景色の組み合わせを WCAG の基準に照らして確認できるため、デザインシステムやコンポーネント、実際の画面に入る前に問題を見つけやすくなります。

結果で分かること

このツールではコントラスト比に加えて、次の代表的な WCAG 基準を満たしているかが分かります。

  • AA の通常テキスト
  • AA の大きいテキスト
  • AAA の通常テキスト
  • AAA の大きいテキスト

実務で役立つ場面

色のコントラスト確認は、次のようなときに特に便利です。

  • ブランドカラーを UI コンポーネントで使う前に検証したいとき
  • ボタン、カード、バナー上の文字色を試したいとき
  • デザインハンドオフ時にアクセシビリティを確認したいとき
  • 低視力ユーザーに読みにくい配色を避けたいとき

基準を満たしていても確認は必要です

技術的には合格していても、小さな文字サイズや細いウェイトでは読みにくいことがあります。比率が問題なくても、最後に実際の文字サイズに近いプレビューを確認しておくと安心です。