highlight.js のスタイルのコントラストをテストする

1. このページの目的

highlight.js のスタイルのコントラストをテストする。

2. スタイルの色を見て、コンソールをテストする。

(1) スタイルの色を確認する。

(2) コントラストをテストする。

➡ Color Contrast Accessibility Validator に、現在のURLをセットしてコントラストをチェックする。

addEventListener('load', function() {
  const codes = document.querySelectorAll('pre code');
  codes.forEach((code) => {
    // nohighlight クラスが指定された要素は対象外とする
    if (code.classList.contains('nohighlight')) return;
    // これがないと背景色がつかない！！
    code.classList.add('hljs');

    const worker = new Worker('worker.js');
    worker.onmessage = (event) => { code.innerHTML = event.data; }
    worker.postMessage(code.textContent);
  });
})

3. 結果

※ 明らかにダメそうなのはテストしてない。

合格したスタイル

• 黒系
  • a11y-dark（悪くない）
  • gml（良い）(No.1)
  • ir-black（悪い）
  • qtcreator_dark（悪い）
  • stackoverflow-dark（良い）
  • sunburst（悪くない）
  • vs2015（悪くない）
• 白系
  • a11y-light（悪くない）
  • googlecode（良い）
  • stackoverflow-light（悪くない）
  • vs（良い）(No.1)
  • xcode（良い）

不合格だったスタイル

• default
• agate
• an-old-hope
• androidstudio
• arduino-light
• atelier-cave-dark
• atelier-dune-dark
• atom-one-dark-reasonable
• codepen-embed
• darcula
• dracula
• gruvbox-dark
• hopscotch
• hybrid
• lioshi
• monokai-sublime
• monokai
• obsidian
• pojoaque
• purebasic
• qtcreator_light
• railscasts
• solarized-dark
• srcery
• xt256
• zenburn

4. 参考

• highlight.js demo
• Color Contrast Accessibility Validator