Color Contrast Ratio Calculator
無料計算ツールテキストと背景色のWCAGコントラスト比をチェックし、読みやすくアクセシブルなデザインにしましょう。
100%プライベート
ブラウザ内で動作します — 数値がデバイスの外に出ることはありません。
あなたの色（RGB）
テキスト色の赤チャンネル。
テキスト色の緑チャンネル。
テキスト色の青チャンネル。
背景色の赤チャンネル。
背景色の緑チャンネル。
背景色の青チャンネル。
コントラスト比
15.43 : 1
WCAG AAは4.5:1（大きな文字は3:1）、AAAは7:1が必要です。
使い方
colorContrast.how.s1.title
colorContrast.how.s1.desc
colorContrast.how.s2.title
colorContrast.how.s2.desc
colorContrast.how.s3.title
colorContrast.how.s3.desc
colorContrast.how.s4.title
colorContrast.how.s4.desc
本当に読めるスクリーンショットをデザイン
ReverzeはApp Storeのスクリーンショットを、読みやすく成果の高いクリエイティブに作り直します。
カラーコントラストが重要な理由
コントラスト比は、テキスト色が背景とどれだけ異なるかを1:1（同一）から21:1（白地に黒）までの尺度で表します。ウェブコンテンツアクセシビリティガイドライン（WCAG）は、弱視や色覚特性のある人でもコンテンツを読めるよう、最小比率を定めています。通常のテキストはAAを満たすために少なくとも4.5:1が必要で、大きな文字（およそ18pt、または14ptの太字）は3:1で足ります。
より厳格なAAAレベルでは、通常のテキストに7:1、大きな文字に4.5:1を求めます。この計算ツールは公式のWCAG相対輝度の式をRGB値に適用するため、公開前にどんなテキストと背景の組み合わせも確認できます — 目視で判断する必要はありません。