カラーコントラストチェッカーの使い方

使い方

1. チェッカー入力欄に「背景の色」と「文字の色」をそれぞれ16進数6ケタで入力してください。「参考8色」の英数字と同じ形式です。
   
2. このとき、色はWebセーフカラー216色の中から選ぶようにしてください。「カラーパレットで色を選ぶ」ボタンを押すと新しいウィンドウに216色のカラーパレット画面が開き、色を確認しながら選ぶことができます。
3. 「結果を表示」ボタンを押してください。
   
4. チェックの結果が表示されます。
5. 調整が必要な場合は、「戻る」ボタンかブラウザーの戻る機能で元の画面に戻ってください。
6. 配色が決定するまで、繰り返し調整してください。

Webセーフカラー216色とは

パソコンのモニタやOS、ブラウザの違いに依存しない色で、WindowsとMacintoshのシステムパレットに共通する216色のことです。Webデザインをする際にこの216色で色構成をすると環境が違っても同じ色で表示されます。

結果の見方

1. 「色覚異常の見え方」には、指定した配色が第一色盲・第二色盲・第三色盲の場合どのように見えるかが表示されます。
   By Safe web colours for colour deficient vision
   
2. 赤と緑系統の配色の場合、第一色盲と第二色盲ではコントラストが弱くなってしまうことがあります。
   その場合は、明度や色差で調整してみてください。青色の度合いを少し増すと改善される場合が多いようです。
3. 「明度差と色差の判定」には、背景色と文字色のコントラストを数値化し、適正を評価した結果が表示されます。
   基準明度差(125)、基準色差(500)で計算されます。
   By Techniques For Accessibility Evaluation And Repair Tools
   
4. 明度差、色差それぞれの結果を参考に配色を調整してください。表示されている「補正した色合い」は、単純計算した数値なので、参考程度にお考えください。
   

サンプル結果

【背景色：#00CCCC】【文字色：#FF6600】
で配色した場合の結果画面です。
カラーコントラストチェッカー結果（サンプル）

カラーパレットとは

• Webセーフカラーの216色から配色を選べるようにしてあります。
• 動作確認　IE４以上／Opera／NN6以上（NN4.7 では一部サポートしていない機能あり）
• JavaScriptを使用しています。

カラーパレットへ

更新情報

• 2009年11月24日
  カラーパレットは別ウィンドウが開くため、その表示を追加。
• 2007年04月23日
  「基準明度差と基準色差」の表示を動作結果と逆に説明していた文章を訂正し、
  サンプル結果の図も入れ替えました。
  正しくは基準明度差（125）・基準色差（500）
  カラーコントラストチェッカー自身の動作は変更ありません。
• 2003年12月10日
  「明度差と色差の判定」機能を追加公開
• 2001年10月31日
  運用開始

リンクについて

• カラーコントラストチェッカーへのリンクはご自由に貼っていただいて結構です。
• 紹介記事を掲載する場合は出典表示として「有限会社アイ・クリエイツ」または「アイ・クリエイツ」の表示をお願いいたします。
• バナー画像が必要な場合は以下の画像をお使いください。
  
  127×40ピクセル、1657バイト
  <a href="https://i-create.jp/accessibility/color-checker.shtml">
  <img src="CCCmark.gif" alt="カラーコントラストチェッカー"></a>