HTML のルート要素では color と background-color をセットで指定すべき

投稿

昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。

……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C)において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。

Firefox の配色設定でテキスト色を白、背景色を黒にしたうえで、試しに官公庁サイト一覧(www.gov-online.go.jp)の各リンク先へアクセスしてみると、まともに文字が読めないサイトが多く存在することが分かります。その中には JIS X 8341-3:2016 の適合レベル AA に準拠していると謳っているサイトもあるのが残念なところです。

サムネイル画像
ブラウザの配色設定を変えてデジタル庁のトップページ(www.digital.go.jp)にアクセスした様子。背景が黒色かつテキストが黒に近い灰色で表示され、文字が読みにくい。オリジナル画像

これを制作者スタイルシートで解消する技術的な方法としては、ページ全体の background-color を設定したうえで、CSS の「継承」を考慮してページ内のすべての要素に color が適用されるようにすることになりますが、そのような難しいことを考えなくてもルート要素には color と background-color をセットで指定することさえ守ればたいていの場合は解決します。

つまりこういうことになります。

/* 🆖 `color` だけ指定するのはダメです */
:root {
  color: #000;
}

/* 🆖 `background-color` だけ指定するのもダメです */
:root {
  background-color: #fff;
}

/* 🆗 `color` と `background-color` を両方指定しましょう */
:root {
  background-color: #fff;
  color: #000;
}

/* ⚠ ページ内に一切の配色指定をしないのならば「どちらも指定しない」もアリですが、通常の Web 制作でそのようなことはまずないでしょう */
:root {
}

/* 🆗 ルート要素に `color` と `background-color` が指定されていれば、そのほかの要素は片方のみの指定でも構いません */
.foo {
  color: #000;
}

ということで解決は難しくない話のはずなのですが、ただ嘆いていても状況は改善しないので、Stylelint(stylelint.io) のプラグインとしてこれをチェックする機能を作りました。

やっていることはとても単純で、ルート要素に color か background-color が指定されていたらもう一方も指定されているかどうかをチェックするだけの機能です。あまりにも単純すぎて今までプラグインを作る発想にも至らなかったのですが、現実問題として WCAG 2.2 達成方法集の F24 を考慮しないサイトが日本・海外を問わず多く存在するので、ツールで解決できればよいのではと今さらながらに思い至った次第です。

Stylelint のプラグインを作るのは初めての経験であることと、公式サイトの開発者向けガイドを読んでもユーティリティー機能(stylelint.io)はドキュメントにメソッドの引数すら書かれていないのもあって、いろいろ自信がなくバージョン 0.0.1 スタートではありますが、よかったら使ってみてください。本ブログでも自分用の Stylelint 設定ファイル(GitHub)に本日から導入しています。