カラーコントラストチェッカー
前景色と背景色のWCAGコントラスト比を即座にチェック
HEX, RGB, HSL対応
HEX, RGB, HSL対応
コントラスト比
12.63:1
AA
通常テキスト
- AA
大テキスト
- AAA
通常テキスト
- AAA
大テキスト
- UI
グラフィックス
- プレビュー
これは通常サイズのテキストのプレビューです。This is a preview of normal-sized text.
大テキストのプレビュー / Large text preview
UI成分 (3:1) / UI Components
コントラスト改善案
カラーコントラストチェッカーで出来る事 About Color Contrast Checker
Webサイトやアプリのデザインにおいて、テキストと背景のコントラスト比はアクセシビリティの最も基本的な要素です。WCAG 2.1（Web Content Accessibility Guidelines）は国際的なアクセシビリティ標準であり、レベルAAとレベルAAAの2段階の適合基準を定めています。通常テキスト（14pt未満）ではAAレベルで4.5:1以上、AAAレベルで7:1以上が必須です。一方、大テキスト（18pt以上）ではAAレベルで3:1以上、AAAレベルで4.5:1以上が求められます。UI成分やグラフィックス要素の場合は最低3:1の基準が適用されます。
このツールは、2つの色を入力するだけでコントラスト比を自動計算し、AA/AAAの各レベルで通常テキスト・大テキスト・UI成分がそれぞれ適合しているかどうかを一目で判定します。HEX（#FF0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）の3つの色コード形式に対応しており、デザインツールやFigma、CSSファイルなど多様な環境からの色指定に柔軟に対応できます。ブラウザ内蔵のカラーピッカーも使えるため、直感的に色を選択できます。
コントラスト比が基準に満たない場合は、より濃い前景色やより明るい背景色といった改善案を自動生成します。色の入れ替えボタンで前景と背景を素早く切り替えられるほか、リアルタイムプレビューで実際の見え方を確認しながら調整できます。すべての処理はブラウザ内で完結するため、デザインデータや配色情報を外部に送信する心配もありません。
In web and app design, the contrast ratio between text and background is one of the most fundamental aspects of accessibility. WCAG 2.1 (Web Content Accessibility Guidelines) is an international accessibility standard with two conformance levels: AA and AAA. For normal text (less than 14pt), AA requires 4.5:1 contrast and AAA requires 7:1. For large text (18pt or larger), AA requires 3:1 and AAA requires 4.5:1. UI components and graphics must meet a minimum 3:1 contrast ratio.
This tool automatically calculates contrast ratios from just two color inputs and clearly shows whether each AA/AAA level is met for normal text, large text, and UI components. It supports three color code formats—HEX (#FF0000), RGB (rgb(255,0,0)), and HSL (hsl(0,100%,50%))—providing seamless integration with design tools, Figma, CSS files, and other workflows. The built-in browser color picker offers intuitive visual color selection.
When contrast falls short of standards, the tool automatically generates improvement suggestions such as darker foreground colors or lighter backgrounds. A swap button lets you quickly exchange foreground and background colors, and real-time preview shows exactly how the combination looks as you adjust. All processing happens locally in the browser, ensuring your design data and color information remain completely private.
カラーコントラストチェッカーの使い方 How to use Color Contrast Checker
- 前景色（テキスト色）をHEX（#FF0000）、RGB（rgb(255,0,0)）、またはHSL（hsl(0,100%,50%)）形式で入力するか、カラーピッカーで選択します。
- 背景色も同じいずれかの形式で設定します。必要に応じて入れ替えボタンで前景と背景を交換できます。
- コントラスト比とAA/AAA/UI適合結果がリアルタイムで表示されます。プレビューエリアで実際の見え方を確認してください。
- コントラスト不足の場合は改善案が自動生成されます。提案された色を適用して調整できます。
- Enter a foreground (text) color using HEX (#FF0000), RGB (rgb(255,0,0)), or HSL (hsl(0,100%,50%)) format, or select one with the color picker.
- Set the background color the same way. Use the swap button to quickly exchange foreground and background if needed.
- The contrast ratio and AA/AAA/UI compliance results update in real time. Check the preview area to see exactly how the colors look together.
- When contrast is insufficient, improvement suggestions are automatically generated. Apply suggested colors to make adjustments.
カラーコントラストチェッカーを使うメリット Benefits of Color Contrast Checker
- WCAG 2.1のAA/AAAレベル判定を通常テキスト・大テキスト・UI成分別に即座に確認でき、アクセシビリティチェックが効率化します。
- HEX・RGB・HSLの3つの色形式に対応しており、デザインツール・CSS・Figmaなど多様な環境からの色指定に対応できます。
- コントラスト不足時の自動改善案生成により、アクセシブルな色組み合わせを素早く見つけられます。
- ブラウザ内処理のため、配色データを外部に送信せずに安全にチェックできます。
- Instantly verify WCAG 2.1 AA/AAA compliance for normal text, large text, and UI components, streamlining your accessibility workflow.
- Supports three color formats (HEX, RGB, HSL), seamlessly integrating with design tools, CSS, Figma, and other workflows.
- Automatic improvement suggestions help you quickly find accessible color combinations that meet WCAG standards.
- All processing runs locally in the browser, so your color data stays private and secure.
他のカテゴリ Other Categories
デザイン の人気ツール TOP 10 Popular Design Tools Tools TOP 10
デザイン のすべてのツール (15件) All Design Tools Tools (15)
該当するツールが見つかりませんでした No matching tools found