--- [ ![acquia optimize product page](/sites/default/files/styles/product_header_icon/public/media/image/2024-04/Monsido%20by%20Acquia%20Logo.png?itok=665xcojC) Acquia Web Governance ](/jp/products/acquia-web-governance) - [機能](/jp/products/acquia-web-governance/features) - [全機能](/jp/products/acquia-web-governance/features) - [アクセシビリティ](/jp/products/acquia-web-governance/features/web-accessibility) - [ブラウザ拡張機能](/jp/products/acquia-web-governance/features/browser-extension) - [ハートビート](/jp/products/acquia-web-governance/features/heartbeat) - [ポリシー](/jp/products/acquia-web-governance/features/policy) - [品質保証](/jp/products/acquia-web-governance/features/quality-assurance) - [SEO](/jp/products/acquia-web-governance/features/seo) - [統計情報](/jp/products/acquia-web-governance/features/statistics) - [アドオン](/jp/products/acquia-web-governance/features) - [同意管理ツール](/jp/products/acquia-web-governance/consent-manager) - [データプライバシー](/jp/products/acquia-web-governance/data-privacy) - [ヒートマップ](/jp/products/acquia-web-governance/heatmaps) - [PageAssist™](/jp/products/acquia-web-governance/pageassist) - [PageCorrect™](/jp/products/acquia-web-governance/pagecorrect) - [パフォーマンス](/jp/products/acquia-web-governance/performance) - [インテグレーション](/jp/products/acquia-web-governance/integrations) - [使用事例](/jp/products/acquia-web-governance/use-cases) - [リソース](/jp/resources?product%5B0%5D=432141) - [ブログ](https://www.acquia.com/blog/series/accessibility-and-inclusion) - [お客様の声](https://www.acquia.com/resources/case-studies?industry=&product=432141&page=0) - [ウェブアクセシビリティ入門](/jp/web-accessibility) - [アクセシビリティ関連法制の概要](/jp/accessibility-legislation-overview) - [ベンチマークレポート](/jp/products/acquia-optimize/resources/benchmarks) - [ツール](/jp/products/acquia-web-governance/tools) - [サポート・トレーニング](/jp/products/acquia-web-governance/support) - [料金](/jp/products/acquia-web-governance/pricing) [無料スキャンを受ける](/products/acquia-web-governance/get-scan) [ログイン](https://login.monsido.com/) ## Breadcrumb 1. [Home](/jp) 2. [Products](/jp/products) 3. [Acquia Web Governance](/jp/products/acquia-web-governance) 4. [Tools](/jp/products/acquia-web-governance/tools) 5. カラーコントラストチェッカー # **カラー****コントラストチェッカー** アクセシビリティのための背景色とテキスト色のコントラスト比をテストします。ウェブコンテンツアクセシビリティガイドライン（WCAG）および国際的なアクセシビリティ法令に準拠した、ウェブサイトデザインの様々な色の組み合わせを視覚化するためにご利用ください。 [無料スキャンを実行](/jp/about-us/contact/web-governance-request-a-demo "デモをリクエスト Acquia Web Governance") ## **カラーコントラストツール ガイド** 背景色と前景色をRGB形式または16進形式で入力するか、カラーセレクターを使用して色を選択してください。色を選択すると、明度レベルを調整できます。 --- ## **カラーコントラスト比の解釈方法** **最小コントラスト比の要件** WCAG 2.2 レベルAA 通常テキスト：最小コントラスト比 4.5:1 大きなテキスト：最小コントラスト比 3:1 WCAG 2.2 レベルAAA 通常テキスト：最小コントラスト比 7:1 大きなテキスト：最小コントラスト比 4.5:1 大きなテキストは、14ポイント（18.67px）以上の太字、または18ポイント（24px）以上のテキストと定義されています。 ## 追加のサポートが必要ですか？ 適切なコントラストを持つウェブサイトデザイン要素の構築は、アクセシブルなウェブサイトの実現に向けた重要なステップの一つです。当社のプラットフォームは、あらゆる訪問者にとって完全に準拠した使いやすいウェブサイトを確実に構築するために必要なツールとデータを提供します。 [無料アクセシビリティスキャンを受ける](/products/acquia-web-governance/get-scan "Get a Free Scan") ![Illustration of Product UI with a dashboard identifying progress for WCAG's A, AA, and AAA compliancy](/sites/default/files/styles/flex_header_desktop/public/media/image/2024-04/Accessibility%20Scan.png?h=8b526752&itok=1kDNK2p9) ## **カラーコントラストチェッカーを使用する理由** コントラストは、Webアクセシビリティの問題の中でも特に一般的でありながら、最も修正しやすい問題の一つです。米国ウェブデザインシステム（USWDS）によると、米国人口の4.5%が何らかの色覚異常を持ち、色相の区別や認識が困難となっています。色覚異常や弱視の方々は、背景とコントラストが不十分なテキストを読むことが困難な場合があります。テキストと背景の間に最低限の輝度コントラスト比を確保することで、色の全範囲を識別できないユーザーがテキストを読みやすくなり、色を全く認識できない稀なユーザーにも役立ちます。Acquia Web GovernanceのWebカラーコントラストチェッカーを使用して、色の組み合わせを素早く確認し、ブランドコンテンツアセットやデザイン要素がすべての人にアクセシブルであることを確保してください。また、ADAコントラストチェッカーとして、その他の法規制に準拠した色彩コントラストのテストにもご活用いただけます。 よくあるご質問 カラーアクセシビリティとは何ですか？ カラーアクセシビリティとは、色覚に障害のある方や視覚に制約のある方を含む、すべてのユーザーが色彩情報を適切に認識・理解できるようにするデザインの考え方です。これには、十分なコントラスト比の確保、色のみに依存しない情報伝達、色覚多様性への配慮などが含まれます。ウェブサイトやアプリケーションにおいて、誰もが等しく情報にアクセスできる環境を提供するための重要な要素となっています。 色は、個性を表現し、注意を引きつけ、アクションを象徴し、重要性を示すために使用されるWebデザインの極めて重要な要素です。色は視覚的な魅力と意味の伝達において大きな意味を持つため、ユーザーがWebページ上の異なる色のコンテンツを認識できることが不可欠です。カラーアクセシビリティは、低視力や色覚異常などの視覚的障がいを持つユーザーが、コンテンツ要素を適切に区別し、効果的に読み取り・閲覧できるよう支援するため重要なのです。 カラーコントラストチェッカーとは何ですか？ カラーコントラストチェッカーは、Webサイトやデジタルコンテンツにおいて、テキストと背景色の間のコントラスト比を測定・評価するツールです。このツールは、視覚的なアクセシビリティを確保し、視覚障害のあるユーザーを含むすべてのユーザーがコンテンツを読みやすくするために使用されます。 WCAG（Web Content Accessibility Guidelines）の基準に準拠し、適切なコントラスト比が保たれているかを確認することで、より包括的で使いやすいデジタル体験の提供を実現します。 カラーコントラストチェッカーは、2つの色の知覚輝度の差を測定し、視覚障害や色覚異常のあるユーザーにも認識できるようにするためのツールです。 カラーコントラスト比はどのように計算されますか？ 差異は、1:1（白地に白）から21:1（白地に黒）までの比率尺度で測定されます。WCAG レベルAAによると、テキストおよびテキスト画像の視覚的表示において色が持つべき最小コントラスト比は4.5:1です。 WCAG（Web Content Accessibility Guidelines）で推奨される色のコントラスト比は以下の通りです： \*\*通常のテキスト：\*\* - AA基準：4.5:1以上 - AAA基準：7:1以上 \*\*大きなテキスト（18pt以上または14pt太字以上）：\*\* - AA基準：3:1以上 - AAA基準：4.5:1以上 \*\*非テキスト要素（アイコン、グラフィック要素など）：\*\* - AA基準：3:1以上 一般的に、AA基準への準拠が推奨されており、多くの企業や組織がこの基準を採用しています。AAA基準はより厳しい要件ですが、すべてのコンテンツに適用するのは困難な場合があります。 アクセシビリティを確保するため、デザイン段階でコントラスト比チェッカーツールを使用して、これらの基準を満たしているかを確認することが重要です。 WCAG 2.1 レベルAAでは、テキストおよびテキスト画像の視覚的な表示において、最低4.5:1のコントラスト比が求められています。ただし、大きなテキストについては最低3:1のコントラスト比が基準となります。WCAG 2.1 レベルAAAでは、通常のテキストで最低7:1、大きなテキスト（14ポイント以上の太字、または18ポイント以上）で4.5:1のコントラスト比が必要です。 画像はWCAGの色彩コントラスト要件に準拠する必要がありますか？ 画像はWCAGのコントラスト要件を満たす必要があります。テキストを含む画像では、画像の背景とテキストの間に十分なコントラストを確保する必要があります。特に、画像の品質が低い場合や、画像を拡大する必要がある場合は注意が必要です。テキストを含む画像では、最小コントラスト比4.5:1を満たす必要があります。 テキストを含まないが意味を伝える画像についても、画像全体が知覚できるよう、画像構成要素に十分なコントラストが必要です。WCAG 2.1レベルAAでは、アイコン、チャート、グラフ、ボタン、フォームコントロール、フォーカスインジケーター、アウトラインなどのグラフィカルオブジェクトや作成者がカスタマイズしたインターフェース構成要素について、最低3:1のコントラスト比を規定しています。