道具

資料の配色パレット：デジタル庁の色をもとに

デジタル庁デザインシステムの色から、資料でよく使う役割ごとに色を選びました。白い背景とのコントラスト比も載せています。色の四角を押すと、色の番号(16進数)をコピーできます。

基本の6色(どの資料にも)

文字・背景・線の色を決めてから、強調の色を1つだけ足します。

本文の文字

#1a1a1a　Gray-900相当

白との比 17.4:1　文字にも使える

補足の文字

#4d4d4d　Gray-700

白との比 8.5:1　文字にも使える

線・区切り

#cccccc　Gray-200

白との比 1.6:1　背景や面だけに使う

薄い背景

#f2f2f2　Gray-50

白との比 1.1:1　背景や面だけに使う

強調(1か所だけ)

#0017c1　Blue-900

白との比 11.1:1　文字にも使える

強調の面(表の列・帯)

#e8f1fe　Blue-50

白との比 1.1:1　背景や面だけに使う

グラフ用(青1色+灰色)

見てほしい1本だけ青、ほかは灰色。灰色は2段階まで。もっと薄い灰色(#cccccc など)の棒を使うときは、白との差が小さい(3:1未満)ので、数字を棒の横に直接書いて、色だけに頼らないようにします。

見てほしいデータ

#0017c1　Blue-900

白との比 11.1:1　文字にも使える

比べる相手

#767676　Gray-536

白との比 4.5:1　文字にも使える

その他

#949494　Gray-420

白との比 3.0:1　線・棒・大きな文字に使える

目盛り線

#e6e6e6　Gray-100

白との比 1.2:1　背景や面だけに使う

良い・悪いを示すとき

色だけに頼らず、「+」「−」や言葉も添えます。赤と緑だけで区別しないこと。

良い・達成

#259d63　Green-600

白との比 3.5:1　線・棒・大きな文字に使える

悪い・未達

#ec0000　Red-800

白との比 4.6:1　文字にも使える

注意

#fb5b01　Orange-600

白との比 3.2:1　線・棒・大きな文字に使える

基準・目標

#0017c1　Blue-900

白との比 11.1:1　文字にも使える

色の組み合わせを自分で確かめるときは、色のコントラスト確認を使ってください。

出典：デジタル庁デザインシステムウェブサイト(https://design.digital.go.jp/dads/)の色の値を参考に、資料なおし帳が役割ごとに選んで加工しています。デジタル庁とは関係ありません。