パレット全体をN×Nの監査表にまとめ、前景×背景のすべての組み合わせでWCAG比とAPCA Lcを一目で確認できます。
| fg ↓ / bg → | |||||||
|---|---|---|---|---|---|---|---|
Ag1.0Lc0 | Ag4.2Lc+35 | Ag3.8Lc+31 | Ag5.2Lc+42 | Ag8.4Lc+62 | Ag1.2Lc0 | Ag17.4Lc+104 | |
Ag4.2Lc-33 | Ag1.0Lc0 | Ag1.1Lc0 | Ag1.3Lc0 | Ag2.0Lc+25 | Ag5.0Lc-34 | Ag4.2Lc+67 | |
Ag3.8Lc-29 | Ag1.1Lc0 | Ag1.0Lc0 | Ag1.4Lc+10 | Ag2.2Lc+30 | Ag4.6Lc-30 | Ag4.6Lc+72 | |
Ag5.2Lc-40 | Ag1.3Lc0 | Ag1.4Lc-11 | Ag1.0Lc0 | Ag1.6Lc+18 | Ag6.3Lc-41 | Ag3.3Lc+60 | |
Ag8.4Lc-61 | Ag2.0Lc-27 | Ag2.2Lc-32 | Ag1.6Lc-20 | Ag1.0Lc0 | Ag10.2Lc-62 | Ag2.1Lc+40 |
行=テキスト色(前景)、列=背景。各セルには実際の前景と背景の組み合わせが表示され、WCAG比(本文のAA基準は≥4.5、大きなテキストのAA基準は≥3.0)とAPCA Lc(本文テキストは75以上、大きなテキストは60以上)の2つのアクセシビリティ指標が示されます。
すべての候補色をN×Nマトリックスにまとめ、前景×背景のすべての組み合わせのアクセシビリティを一度に確認できます。
ブランドカラー、意味カラー、ニュートラルカラーを最大10個まで追加できます。行は前景、列は背景に対応します。
各セルにはWCAG比とAPCA Lcが表示されます。ドットが点灯します:本文テキストはLc 75以上、大きなテキストは60以上が必要です。
ボタンのペアと本文のペアをデザイン仕様に記録し、出荷前に不適格な組み合わせを排除します。
フルマトリックス監査における3つのよくある質問です。
適格なペアを意味的なパレットと仕様に取り込みます。
任意の前景色と背景色の間のWCAG 2.1準拠コントラストを検証します。
8種類の色覚障害をシミュレートしてアクセシビリティを確認します。
学術出版の事実上の標準である、Okabe-Ito(Nature Methodsが推奨)、Paul Tolシリーズ、Nature NPGジャーナルパレット、知覚的に均一なViridis。すべてのスウォッチにAPCAコントラストグレードが付属し、下部にある8種類の色覚シミュレーターが各パレットをリアルタイムで検証します。
1つのブランドカラーを入力すると、プライマリ/セカンダリ/サクセス/ウォーニング/デンジャーが生成され、Tailwind設定とCSS変数としてエクスポートされます。