APCAコントラスト日本語フォント検証

WCAG 3.0にて 検討が進められているテキストの視覚的コントラスト基準である APCAについて、日本語フォントに適応した場合の検討を行うためのツールを提供しています。

コントラスト シミュレーター

カラーを選択すると設定フォントサイズとウェイトでの表示例と、APCA基準値によるチェック結果が表示されます。
透明度なども考慮した基準値のシミュレーションはオリジナルのAPCA Contrast Calculatorを利用してください。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

チェック結果

コントラストはLcの絶対値で評価されます。

  • APCAコントラスト 88.6 Lc
  • 推奨コントラスト undefined Lc （コントラスト不足）
  • WCAG 2.1の達成基準 1.4.3 コントラスト (最低限) 4.5:1（AA）以上と同等。

評価についての詳しい説明は APCA in a Nutshell を参照してください。

推奨値表示サンプル

計算されたAPCAのコントラスト値から、ウェイトに対する必要なフォントサイズの設定例です。

Weight: 200
Font size: 49px

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

Weight: 400
Font size: 21.5px

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

Weight: 700
Font size: 14.625px

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

APCAと基準値について

本サイトではAPCAそのものの説明はしません。
本家サイトのAccurate ContrastUsing the APCAなどからリソースを参照してください。

適応したAPCAコントラスト基準は以下の通りです。

  • 適応基準：SILVER
  • バージョン：Beta 0.1.7 (G)
  • 改訂日：2022-05-27

公式サイトのフォントサイズとウェイトの適合テーブルからデータを作成していますが最新化されていない場合があります。（APCAは開発中であることに注意してください）
最新の基準はAPCA Contrast Calculatorを参照してください。

ライセンス

本シミュレーターのAPCAコントラスト値の計算は、APCA™ for W3C & WCAG3の提供するNode moduleを利用しています。
利用制限などがありますので、詳細についてはAPCA™ for W3C & WCAG3のライセンスを参照してください。
APCA™ for W3C & WCAG3 LICENSE

日本語フォントNoto Sans、Noto Serif、BIZ UD、M PLUS Rounded 1cはGoogle Fontsを利用しています。
個々のフォントのライセンスは、Open Font Licenseで提供されています。

游ゴシック、游明朝はシステムにプリインストールされている想定のため、インストールされていない環境ではデフォルトのフォントが指定されます。
システムUIはシステムフォントを明示的に指定する設定です。

その他の部分は、本サイト構築のフレームワークであるAstroに習いMITライセンスとします。
リソースはGitHubに公開していますので、質問やバグの報告はGitHubのイシューを利用していただけると幸いです。
APCAコントラスト日本語フォント検証 GitHubリポジトリ