1. 確認方法を選ぶ
画像・PDF、カメラ、または色コードの直接入力から確認方法を選びます。
How to use
基本の使い方
2. 文字色と背景色を指定する
画像上の範囲を選ぶか、前景色と背景色を入力します。
3. 判定を読む
コントラスト比と、通常文字・大きな文字・UI部品に対する目安を確認します。
4. 改善候補を試す
現在の配色に近いまま基準を満たす色候補を比較します。
Tips
うまく使うためのポイント
- 通常サイズの本文は、大きな見出しより高いコントラストが必要です。
- 写真背景は場所によって明るさが変わるため、文字が重なる範囲全体を確認してください。
- 数値上の合格だけでなく、フォントの太さ、文字サイズ、背景の模様も合わせて判断します。
Engineering
裏側で起きていること
操作を単純に見せるために、ブラウザやバックエンドでは複数の処理を組み合わせています。
コントラスト比
sRGBの色を相対輝度へ変換し、明るい側と暗い側の比率を計算します。単純なRGB値の差ではなく、人の明るさの知覚に近づけた計算です。
最小変更色
現在の色相や印象をできるだけ維持しながら、目標のコントラスト比に到達する候補を探索します。白か黒へ一律に置き換えるのではなく、変更量を抑えることを優先します。
画像・PDFの扱い
解析対象は端末内で描画し、選択範囲から代表色を取得します。自動抽出には写真やグラデーション由来の誤差があるため、結果を設計判断の補助として提示します。
FAQ
よくある質問
合格なら必ず読みやすいですか？
いいえ。コントラスト比は重要な指標ですが、文字サイズ、書体、背景模様、利用環境も影響します。
WCAGとは何ですか？
Webコンテンツを幅広い人が利用しやすくするための国際的なアクセシビリティ指針です。
PDFや画像は送信されますか？
確認処理は端末内で行い、解析目的で外部へアップロードしません。
体験の背景
この体験をどう設計したか
何か良さそうなスライドほど、読めない。
雰囲気はいいのに、何が書いてあるのか分からない。発表を聞く前にスライドを読むだけで終わる、あの虚無な時間をなくすために考えたこと。