色のコントラスト比の簡単な確認方法

この記事は PowerCMS X Advent Calendar 2021  の第21日目の記事です。

PowerCMS Xとは？

PowerCMS Xは日本国内で導入実績 3,000 サイトを超える、高性能・高機能のハイエンド CMS「PowerCMS」のノウハウを活かして、全くゼロベースで設計・実装された新しいCMSです。 PowerCMS X は、開発言語 PHP で書かれ、従来比およそ20倍高速に動作し、これまでにない先進的な機能を備えています。

HTML_CodeSniffer プラグイン

このPowerCMS X には、「HTML_CodeSniffer プラグイン」というアクセシビリティをチェックするプラグインが提供されています。
今回は「警告」として出てくる、色のコントラスト比の簡単な確認方法をご紹介します。

JIS X 8341-3:2016の達成基準の1つ、「コントラスト (最低限):
達成基準 1.4.3」では、文字色と背景色のコントラスト比が少なくとも 4.5:1である必要があります。

チェックは、プレビューボタンの横にある「JIS X8341-3 検証」にチェックを入れてプレビューを押します。すると別ウィンドウでプレビュー画面が開き、「HTML_CodeSniffer」とともに表示されます。
色のコントラスト比については、背景色や色がCSSで指定されていることもあり、確認事項となっています。

コントラスト比をブラウザ機能でさっと確認

本文内で色を変更した場合などは特に、コントラスト比を確認するようにしましょう。アプリを開いて色の数値を入れたり、ピックアップして…というやり方もありますが、今回はウェブブラウザでさっと確認します。
ここからは動画でご説明します。

いかがでしたか？
色のチェックは自分では難しい、というイメージがありますが、ブラウザの機能を使うことで簡単に確認できました。

ColorTester

図を作ったりする場合は、弊社のツール「ColorTester」を使ってみてください。画像ファイルをウィンドウにドラッグ&ドロップして色を自動的に推測してコントラスト比をチェックしたり、カラーピッカーを利用してディスプレイ上の色を選択することができます。

見えやすさは情報を得る上で、とても重要

ページや図版を作った場合は、作る工程や確認の際に利用し、コントラスト比を確保します。そして、可能な限り、誰にでも見えやすい文字を表示させるようにしましょう。