先日APCA何もわからないという記事を書きました。
WCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムについて、欧文フォントを基準にフォントサイズとウェイトの基準値が定められているので、日本語のフォントでどうなるのだろう？という問題提起の雑文でした（そうだったのか）。
まぁ、まだAPCAは開発中でもあり、WCAG 3.0が正式にリリースされるまでも結構かかりそうなので焦ることはない気はしますが、気になったものはしょうがないので、日本語フォントでシミュレーションできるツールを作成してみました。
APCAコントラスト日本語フォント検証
https://apca-ja.studio-ito.net/
使いかた
まずテキストカラーとバックグラウンドカラーを設定します。
すると、初期設定されているフォント（Noto Sans JP）とフォントサイズ（18px）、フォントウェイト（400）がサンプルに反映され、チェック結果が表示されます。
コントラストはLightness contrast（Lc）という単位で計算されます。
APCAではフォントサイズとウェイトに対して、基準となるLcがあり、この値以上であれば基準値をクリアしているということになります。
RatingについてはWCAG 3.0 - 3.5 Visual contrast of textのRating for Luminance contrast between background and textに書かれています。基準としてどういう感じに落ち着くのかは、ちょっと理解できていませんが、まぁ４が最高で０以下はダメという感じなのかなぁ。
※（2023年8月14日）W3C Accessibility Guidelines (WCAG) 3.0のWDが更新され、Working Draft 24 July 2023にてAPCAとRatingsに関する記述がいったん無くなっています。個別の項目についてアウトラインにいったん戻して整理している感じのようですが。
また、フォントサイズとウェイトによっては「本文に推奨できる」とか「コピーライトや著者名のみ」といった利用に関する推奨も表示されます。
なお、背景が暗くテキストが明るい場合には、Lcがマイナスの値で計算されますが、基準に対しては絶対値で評価されます。
例文も変更できますので、フォントやサイズ、ウェイトなどとあわせて変更してみて、表示や評価がどのように変わるか確認してみてください。
その下の「推奨値サンプル」は、設定されたカラーのLcにおいて、ウェイトが200、400、700の場合に推奨されるフォントサイズと、その値で表示したサンプルになります。
ユースケースと基準値のより詳しい説明はAPCA in a Nutshellを参照してください。
ラテンフォント例と90%表示例について
APCAはラテンフォントを基準にしている、ということから設定値で欧文が表示された場合の文字サイズを確認するために「ラテンフォント例」のチェックボックスをつけています。オンにすると同じカラーとフォント設定で欧文を表示した場合の例が表示されます。（欧文の文章は変更できません）
これを見ると、欧文より日本語のほうが全体に文字が大きめであることに気づくと思います。
漢字・ひらがな・カタカナのキャラクターの特性から欧文より「フォントサイズ」と「実際の文字のサイズ」の差が小さいことによる現象です。
そのため「９０％表示例」を表示する機能をつけて、オリジナルと比べられるようにしています。
一般的に大きい方が視認性が高いわけなので、APCAの基準をクリアしていれば日本語でも読みやすいコントラストになっているはずですが、日本語の場合は若干過大な基準値になるのではないか？というのがこのシミュレーターを作成した動機になります。
これは日本語に限らない課題だと思いますが、APCAで推奨されているフォントサイズとウェイトは言語の特性により、サイズの微調整は必要になる可能性がある。このツールでそれを確認できたらと思っています。
「文字詰め」機能とフォントについて
フォントにプロポーショナル情報がある場合に文字詰めを有効・無効にして見比べられるように、CSSの「font-feature-settingsプロパティ」のpalt：プロポーショナルメトリクス（自動文字詰め設定）をスイッチできる機能を追加しました。
Webフォント４種類、Noto Sans、Noto Serif、BIZ UD、M PLUS Rounded 1cのうち、有効なのはNoto Sansのみのため、それ以外のフォントを選択した場合には利用できません。
BizUDの２つのフォントについては最初からプロポーショナルなので、文字詰めが自動的に有効になっています。
游ゴシック、游明朝は最近のWindowsおよびMacにプリインストールされているプロポーショナル情報を持ったフォントです。スマホ等インストールされていない環境ではデフォルトのフォントが指定されます。
システムUIはシステムフォントを明示的に指定する設定です。
注意事項
なるべく丁寧に仕様などを読み込んだつもりですが、誤りがある場合があります。
APCAの正式な仕様については、本家APCAのサイトおよび、公式のAPCA Contrast Calculatorを確認してください。
また、このツールを制作した時点のバージョンは、Beta 0.1.7（2022-05-27）ですので、本家が更新された場合に結果にずれが生じる場合があります。
なお、実装にあたりContrast toolsも大いに参考にさせていただきました。
推奨値のテーブルは、こちらが一番見やすかったので、これをもとにJSONのデータを作りました。ありがとうございます。
個人的な所感とアンケートについて
制作するにあたりいろいろな設定を試してみた限り、コントラストの基準として複雑だけれど良さそう、という感触です。
ライブラリがあり、機械的な判別もできそうですし（計算量が大きい問題はありそう）、日本語に適応しても悪くはなさそうです。ただ、私は老眼が入りつつありますがロービジョンや色覚特性を持たないため、多様な色覚特性を持つ方に見ていただいて意見をいただきたいなと思っています。
しかし、適切なアンケート項目を設計したり広く意見を募るために広報の準備を整えるのは結構かかりそうです。
私はちょっと作ったものを死蔵しがちなので、それを待っていると公開せずに終わってしまう可能性があるため、一旦ここまでで公開してご意見を頂きつつ、アンケートについては然るべき団体やワーキンググループのお力を借りたいなと思っております。
最後に
あけましておめでとうございます。
本年もよろしくお願いいたします。
いろいろご協力いただきたいと思っておりますので、本当にお願いいたします。