🍊

見やすいVSCode色設定考(副題:色弱のためのVSCodeカラーコンフィグ)

2025/01/31に公開

概要

  • この記事は,私個人が色をカスタマイズする中で考えたことのまとめ.
  • 特に error・warning に重きを置いた設定.
  • 個々人が色設定をしやすくなるように.
  • 色設定をなんらかのルールに基づいて設定する.
  • ルールを破る.
  • VSCode色設定の全ては把握できておらず,この記事は一部の設定に限定される.
  • 絶対的な正解はない

人によって持つ色覚特性は様々あり,万能で最強のカラーテーマはおそらくない.
すなわち,個々人にとってより良いようにカスタマイズできることが重要であり,この記事もカスタマイズの方針を示すものになる.

この記事で扱う色は改正JIS安全色を主に使用する.改正JIS安全色は色覚特性について考慮したうえで定められているからである.

カスタマイズの一例として,私自身向けに設定したものを示す.

背景・課題

どこでエラーが起きているのかが見づらい.

私は軽度の色弱[1]を持っている.VSCodeでダークモダンテーマを使用しているが,赤色のエラーメッセージが非常に見づらい.ライトテーマは眩しいので使用していない.

前提

  • VSCodeのSetting.jsonを編集する.
  • VSCodeのカラーテーマはダークモダンであるものとして記事を記述する.

VSCodeは左下の歯車アイコンから設定を開ける.さらに,設定画面の右上にあるファイルに矢印がついたアイコン,「設定(JSON)を開く」をクリックすると,設定ファイルを直接編集できる.
この設定ファイルを編集していく.

カラーテーマはダークモダン以外のものでも,役に立つ内容だと考えている.

追加で設定している拡張機能

デフォルトで設定可能な値に加え,上記の拡張機能の色についても設定している.

多様な色覚に合わせた色設定とは

万人にとって見やすい,完璧で究極なVSCodeカラーテーマはおそらく存在しないと考えている.これは人によって色覚の感じ方が異なるからである.例えば,私の場合は軽度の色弱で,黒と濃い赤色を区別しにくかったり,白と淡いピンクを判別しにくかったりする.その他にも,世の中には色盲で特定の色を感じられない人や,色覚に過敏でチカチカして見えるといった多様な人がいることだろう.

そのため,個々人にあった設定を行いやすいことが重要だと考える.エディタのカラーテーマのようなものの場合,使う個人にとっての最適を目指せば良いからだ.

どう色設定をしていくか

ではどうすれば個人に合った設定をしやすいのか.それは,

  • 基本となるルール(色)を選ぶ.あるいは定める.
  • そのルールを適切に破る

ことだと考えている.

基本となるルール(色)を選ぶ

最も簡単なのは,既に色覚について考慮され規格化された色を選ぶことだ.もちろん自分で定めてもよいだろう.しかし,私は定め方はあまりわからないので,論じない.

私は改正JIS安全色を採用した.他にもカラーユニバーサルデザインの推奨配色セットが考えられるが,エディタに対して22色もの色は必要ないだろうと判断した.もちろんカラーユニバーサルデザインの配色をベースにしても問題ない.

改正JIS安全色は,RGBでは以下のように定義されている.どのような色合いかは上記のリンク先を確認してほしい.

色名 16進数RGB値 主な意味
#ff4b00 禁止
黄赤 #f6aa00 危険
#f2e700 注意 警告
#00b06b 安全
#1971ff 指示
赤紫 #990099 放射能

本記事ではerror・warningの見やすさに重きを置いているため,その2種の色をメインに決めればよい.
安全色の意味を基にして,

  • error:赤
  • warning:黄赤
  • その他:黄,緑,青,赤紫
    とルールを決めた.

また,黄と緑,青と赤紫が隣り合わないようにした.比較的近い色の組み合わせだからである.

ルールをもとに設定する.

setting.jsonの編集内容の一例は以下のようになる.

editor.tokenColor...,textMateRules...,scope: invalidの部分が指し示すのは,無効なコードを書いた場合,以下のように表示されるaaaaaaaaaaaという部分の色のことである.
おかしなjsonを書いたことにより,jsonの一部が赤文字で表示されている

{
    // 色のカスタマイズ
    "workbench.colorCustomizations": {
        // エラーの色をJIS安全色の赤に
        "errorForeground": "#ff4b00", // エラーメッセージ全体の色
        "minimap.errorHighlight": "#ff4b00", //ミニマップにでるエラー箇所強調
        "editorOverviewRuler.errorForeground": "#ff4b00",
        "editorError.foreground": "#ff4b00", //エラー波線の色

        // warningの波線の色をJIS安全色の黄赤に
        "editorWarning.foreground": "#f6aa00",

        // エラーレンズ拡張機能の色もJIS安全色に
        "errorLens.errorForeground": "#ff4b00",
        "errorLens.warningForeground": "#f6aa00",

        // インデント時に出る線の色を設定
        "editorIndentGuide.background1": "#00b06b", //緑
        "editorIndentGuide.background2": "#1971ff", //青
        "editorIndentGuide.background3": "#f2e700", //黄
        "editorIndentGuide.background4": "#990099", //赤紫
        "editorIndentGuide.activeBackground1": "#fff",
        "editorIndentGuide.activeBackground2": "#fff",
        "editorIndentGuide.activeBackground3": "#fff",
        "editorIndentGuide.activeBackground4": "#fff",

        // ブラケットの色を設定
        "editorBracketHighlight.foreground1": "#00b06b", //緑
        "editorBracketHighlight.foreground2": "#1971ff", //青
        "editorBracketHighlight.foreground3": "#f2e700", //黄
        "editorBracketHighlight.foreground4": "#990099", //赤紫
    },

    // エラーなどによってコードの色が変わるアレ
    "editor.tokenColorCustomizations": {
        "[*Dark*]": {
            "textMateRules": [
                {
                    "scope": "invalid",
                    "settings": {
                        "foreground": "#ff4b00",
                    }
                }
            ]
        }
    },

    // indent raibowの色を変更
    // JIS安全色のうち
    // 緑,青,黄,赤紫 の順に設定した
    "indentRainbow.colors": [
        "#00b06b1f",
        "#1971ff1f",
        "#f2e7001f",
        "#9900991f",
    ],
}

ルールを破る

ルールを定めたので,これを破ることができる.これをどう破るかは個人の特性によって変わるだろう.私の場合の例を示す.

errorが赤色だというルールを破ることにする.これまでの改正JIS安全色に従った設定で,前よりも幾分見やすくなった.しかし,さらにerrorについて強調したい.私にとっては黒背景に赤は,やはり比較的見づらい.そこで,errorをJIS安全色の黄に変更することで,より私個人の見やすさに特化した設定を目指す.

黄にした理由としては,黄もJIS安全色で注意や警告を意味し赤と比較的近い意味であること,VSCodeで黄を使用した色があまりないこと,十分に黄赤と黄の区別がつくことである.黄赤と黄は似ているのではないか?と思うかもしれない.確かに似ているが,私にとって黄は黄赤と比べて明らかに目に刺さるような痛さを感じるため,十分に区別がつく.

もしもこの記事を他の分野に応用しようとしている場合,そのルールの破り方が許されるかは十分考える必要がある.エディタの色は個々人の最適を目指せば良いので,どうルールを破っても良いだろう.しかし,例えばこれがWebページのデフォルト設定や公共物のデザインなどである場合,errorを赤から黄に変更するのは許されないはずだ.

ルールを破って設定する

以下のように設定した.

{
    "workbench.colorCustomizations": {
        // エラーの色をJIS安全色の黄に
        "errorForeground": "#f2e700",
        "minimap.errorHighlight": "#f2e700",
        "editorOverviewRuler.errorForeground": "#f2e700",
        "editorError.foreground": "#f2e700",

        // warningの色をJIS安全色の橙色に
        "editorWarning.foreground": "#f6aa00",

        // エラーレンズ拡張機能の色もJIS安全色に
        "errorLens.errorForeground": "#f2e700",
        "errorLens.warningForeground": "#f6aa00",

        // インデント時に出る線の色を設定
        "editorIndentGuide.background1": "#00b06b",
        "editorIndentGuide.background2": "#1971ff",
        "editorIndentGuide.background3": "#f2e700",
        "editorIndentGuide.background4": "#990099",
        "editorIndentGuide.activeBackground1": "#fff",
        "editorIndentGuide.activeBackground2": "#fff",
        "editorIndentGuide.activeBackground3": "#fff",
        "editorIndentGuide.activeBackground4": "#fff",

        // ブラケットの色を設定
        "editorBracketHighlight.foreground1": "#00b06b",
        "editorBracketHighlight.foreground2": "#1971ff",
        "editorBracketHighlight.foreground3": "#f2e700",
        "editorBracketHighlight.foreground4": "#990099",
    },

    "editor.tokenColorCustomizations": {
        "[*Dark*]": {
            "textMateRules": [
                {
                    "scope": "invalid",
                    "settings": {
                        "foreground": "#f2e700",
                    }
                }
            ]
        }
    },

    // indent raibowの色を変更
    // JIS安全色のうち
    // 緑,青,黄,紫 を設定した
    "indentRainbow.colors": [
        "#00b06b1f",
        "#1971ff1f",
        "#f2e7001f",
        "#9900991f",
    ],
}

まとめ

本記事では私がVSCodeの色設定を行った中で考えたことを記述した.改めてまとめると

  • 基本となるルール(色)を選ぶ.あるいは定める.
  • そのルールを適切に破る

ことが重要だと考えている.

この記事で示した例はあくまで私個人に合わせた設定に過ぎない.ぜひ,個々人に合わせた設定を行って,より快適なコーディングができることを願う.

もしもこの記事に対して意見・訂正があれば,ぜひコメントをお願いします.

参考文献

脚注
  1. 言葉の使い方は様々あろうかと思いますが,ここでは色弱という語を使用します ↩︎

Discussion