カラーコントラストチェッカー
前景色と背景色のWCAGコントラスト比を検査。
このツールについて
「Color Contrast Checker」は、任意の2色のコントラスト比を計算し、その組み合わせがWCAG 2.0のAAおよびAAA準拠基準を満たしているかどうかを表示する、無料のオンラインWCAGアクセシビリティツールです。HEX値を入力するか、ビジュアルカラーピッカーを使用することで、通常テキストおよび拡大テキストの両方の閾値について、即座に合格・不合格の結果を確認できます。
コントラスト比は、異なる波長に対する人間の視覚的知覚をモデル化したWCAG 2.0の相対輝度式を用いて計算されます。計算結果はテキストのプレビュー画面と共に表示されるため、実際の画面上でその色の組み合わせがどのように見えるかを正確に確認できます。WCAG AA（通常テキストの場合4.5:1）は、世界中のほとんどのアクセシビリティ規制で要求される基準です。
「Color Contrast Checker」は、ウェブデザイナー、フロントエンド開発者、UI/UXチーム、そしてWCAG準拠の製品を開発するすべての人にとって欠かせないツールです。特に、デザイントークンの定義、ブランドカラーの選定、アクセシビリティ監査の段階においてその価値が発揮され、視力が弱い方や色覚障害のあるユーザーにとっても読みやすい配色選びを支援します。
あAa
いろはにほへとちりぬるをわかよたれそ
0123456789 !@#$%^&*()
コントラスト比
優秀
すべてのテキストサイズのユーザーに対応
WCAG AA
WCAG AAA
使い方
- 1
Enter the foreground (text) color and the background color as HEX values or use the color pickers.
- 2
View the calculated contrast ratio and whether it passes WCAG AA and AAA standards.
- 3
Adjust colors until the desired accessibility level is achieved.
- 4
「入れ替え」ボタンを使用して、前景色と背景色を反転させ、反転した組み合わせを確認してください。
- 5
デザインシステムやスタイルガイドに、アクセシビリティ基準に準拠した色の組み合わせを記載し、一貫性のあるアクセシブルな使用を確保してください。
機能
WCAG 2.0 Compliant
Calculates contrast ratios using the official WCAG 2.0 relative luminance formula.
AA & AAA Pass/Fail
Shows pass or fail for both WCAG AA (4.5:1) and AAA (7:1) levels for normal and large text.
Color Picker Support
Use the visual color picker or enter HEX values to set foreground and background colors.
Live Preview
See a live text preview rendered with your chosen colors to visualize the actual contrast.
一般的な利用例
- ›デザインシステムにおけるテキストと背景色の組み合わせが、WCAG AA基準を満たしていることを確認してください。
- ›開発前に、ボタン、リンク、およびUI要素の色について、アクセシビリティ基準への準拠を確認してください。
- ›デザインレビューの際、既存のウェブサイトのカラーパレットについて、アクセシビリティ上の問題がないか確認する。
- ›すべてのユーザーが読みやすいように、WCAG AA準拠のアクセシブルなブランドカラーを選択してください。
よくある質問
WCAGの要件は？
AAは通常テスト4.5:1、大テキスト3:1。AAAは通常7:1、大テキスト4.5:1。
計算方法は？
WCAG 2.0相対輝度計算式で人間の色覚を考慮して計算。
WCAGにおいて、「大きな文字」とは具体的に何を指すのでしょうか？
大きな文字とは、通常体で18pt（24px）以上、太字で14pt（18.67px）以上のものを指します。大きな文字は、コントラストが低くても読みやすいため、コントラストの閾値が低くなっています。
WCAG AA準拠に必要な最低コントラスト比はどれくらいですか？
標準サイズの本文テキストでは4.5:1、大きなテキスト（18pt以上の通常体、14pt以上の太字）では3:1です。WCAG AAは、WCAG 2.1、ADA、EN 301 549など、ほとんどのアクセシビリティ規制で要求される基準です。
WCAG AAに準拠していれば、私のデザインは確実にアクセシブルと言えるのでしょうか？
コントラスト比は一つの要素に過ぎません。アクセシブルなデザインには、フォントサイズ、行間、明確なラベル表示、キーボード操作など、他にも考慮すべき点があります。AAレベルのコントラスト基準を満たすことは、アクセシビリティにとって必要条件ではありますが、十分条件ではありません。