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

アクセシビリティのために背景色とテキスト色のコントラスト比をテストします。ウェブ・コンテンツ・アクセシビリティ・ガイドライン(WCAG)や国際的なアクセシビリティ法規に準拠した、さまざまな色の組み合わせを可視化できます。

無料スキャンを試す

カラーコントラストツールガイド

背景色と文字色を RGB、16進数で入力するか、カラーセレクターで色を選択します。色が選択されると、明度レベルを調整することができます。


カラーコントラスト比の見方

コントラスト比の最低条件

WCAG 2.2 Level AA

通常のテキスト:最小コントラスト比4.5:1
大きい文字:最小コントラスト比3:1

WCAG 2.2 Level AAA

通常のテキスト:最小コントラスト比7:1
大きい文字:最小コントラスト比4.5:1

大きい文字とは、14ポイント(18.67px)で太字以上、または18ポイント(24px)以上

ヘルプが必要ですか?

適切なコントラストでウェブサイトのデザイン要素を構築することは、アクセシブルなウェブサイトへの道のりの第一歩です。当社のプラットフォームは、お客様のウェブサイトが完全に規格に準拠し、すべての閲覧者にとってユーザーフレンドリーであることを保証するために必要なツールとデータを提供します。

無料でアクセシビリティスキャンを試す

Illustration of Product UI with a dashboard identifying progress for WCAG's A, AA, and AAA compliancy

カラーコントラスト・チェッカーを使う理由

コントラストは、ウェブ・アクセシビリティの問題で最も一般的なものの1つですが、修正が最も簡単なものでもあります。米国のウェブデザイン・システム(USWDS)によると、米国人口の4.5%は、色相の違いを区別したり認識したりすることが難しい、何らかの色覚異常を持っているそうです。色覚過敏や弱視の人は、背景とのコントラストがないテキストを読むのが困難なことがよくあるのです。テキストとその背景の間に最小限の輝度コントラスト比を提供することで、フルレンジの色が見えないユーザーでもテキストを読みやすくすることができ、まれに色を認識しないユーザーにも役立ちます。Monsido のウェブカラーコントラストチェッカーを使って、色の組み合わせを簡単にチェックし、コンテンツや デザイン要素を誰もが見やすいものにしましょう。また、ADA のコントラスト・チェッカーなど、他の法規制との色のコントラストをテストするためにも使用できます。

よくある質問
カラーアクセシビリティとは?
色は個性を伝えたり、注目を集めたり、行動を表したり、重要性を示したりするために使われ、ウェブデザインの重要な要素です。色は視覚的に美しく、また意味を伝える上で重要な意味を持つため、ユーザーはウェブページ上のさまざまな色のコンテンツを知覚できなければなりません。カラーアクセシビリティは、弱視や色覚異常のような視覚障がいを持つユーザーがコンテンツ要素を適切に識別し、効果的に読んだり見たりできるようにするためにとても大切です。
カラーコントラストチェッカーとは?
カラーコントラストチェッカーは、2つの色の知覚輝度の差を測定し、視覚や感覚に障がいのあるユーザーが知覚できることを確認するツールです。
色のコントラスト比はどのように計算されますか?
その差は、1:1(白地に白)から21:2(白地に黒)までの比率で測定さ れます。WCAG レベル AA によると、テキストやテキストの画像を視覚的に表示するために色が持つことができる最小コントラスト比は4.5:1です。
WCAG で許容される色のコントラスト比は?
WCAG 2.1レベル AA では、テキストとテキストの画像の視覚的表示には、コントラスト比が少なくとも4.5:1であることが要求されます。WCAG 2.1レベル AAA では、通常のテキストは少なくとも7:1、大きなテキスト(14ポイントで太字以上、または18ポイント以上)は4.5:1のコントラスト比が必要です。
画像は WCAG のカラーコントラスト要件に準拠する必要がありますか?
画像は WCAG のコントラスト要件をパスしなければなりません。テキストを含む画像は、画像の背景とテキストとのコントラストが十分であることを確認する必要があります。特に、画像が低画質である場合や、画像を何らかの方法で拡大する必要がある場合は、注意が必要です。テキストの画像は、最低4.5:1のコントラスト比が必要です。 テキストを含まないが意味を伝える画像の場合、画像全体が知覚できるよう、画像の構成要素には十分なコントラストがなければなりません。WCAG 2.1レベル AAでは、アイコン、チャート、グラフ、ボタン、フォーム・コントロール、フォーカス・インジケータ、アウトラインなど、グラフィカル・オブジェクトや作成者がカスタマイズしたインターフェース・コンポーネントは、少なくとも3:1のコントラスト比を持つことが規定されています。