
✓この記事でわかること
- 1同じ文字画像を使い、弱い補正と強い補正の表示を比べる
- 2明るさを上げすぎると文字と背景の両方が白になって消える
- 3CSSプレビューとCanvasでのシャープネス処理を分けて確認する
文字画像の補正では、明るさを上げることと、文字と背景の差を広げることを分けます。同じ800×600pxの文字画像を使い、設定を変えたときの表示を比べます。読み取れない数字を補正結果だけから確定せず、元の資料も確認してください。
1. 固定の文字画像で、弱い補正と強い補正を比較する
比較素材は自作のPNGです。背景のRGBは176・176・176、文字・下線・長方形は128・128・128で、文字には架空の請求日、金額、コードを使っています。元画像、コントラスト+10、コントラスト+40、明るさ+100を同じ表示幅で比較します。彩度とシャープネスはすべて0です。




この比較はブラウザのCSS表示で、保存画像の画素測定やOCR認識率の測定ではありません。当サイトの明るさ+100はCSSの200%、コントラスト+40は140%に対応します。元画像では文字と背景の差が小さく、コントラスト補正ではその差が変わります。一方、明るさ+100の例では文字と背景の両方が白へ達して消えます。「明るいほど読める」という判断はできません。
比較用の元PNGを保存し、画像フィルターツールで同じ設定を試せます。設定を1種類ずつ変え、元画像と同じ倍率でコードのハイフンや数字を確認してください。この素材で合う値を、暗い写真や色付き資料へそのまま適用するものではありません。
2. シャープネスは、失われた文字を復元する処理ではない
このツールのシャープネスは、画素と上下左右の差を強調する処理です。例えば灰色128と176の領域が直線で接する説明用の境界を強度30で処理すると、境界の暗い側は114、明るい側は190になります。これは現行の処理関数へ人工的な画素配列を渡して確認した値で、上の文字画像全体の出力測定ではありません。
境界が強調されても、潰れて区別できない文字や画像の外へ切れた文字を復元できるわけではありません。線の周りに不自然な白黒の縁が出る、紙の汚れが目立つ場合は強度を下げます。重要な数字を判読できないときは、解像度の高い原本や撮り直した画像を使います。
3. 無彩色の文字には彩度を足さず、色の意味を保つ
上の素材はRGBの各値が等しい無彩色です。彩度を上げても、文字と背景の明暗差を作る調整にはなりません。赤い注釈などがある資料では、色を変えて別の意味に見せないことも必要です。
ホワイトバランスは、このツールでは画像全体のRGB平均を使う補正です。背景も文字も灰色の素材では、各色の平均が同じなので色の補正係数も同じになります。色かぶりを直したい写真では、白い紙や文字を見ながら試し、正しい色へ戻ったと決めつけないでください。
4. プレビューと保存結果を分けて確認する
明るさ・コントラスト・彩度はCSSプレビューへ反映されます。シャープネスとホワイトバランスは実行時のCanvas処理なので、設定を動かしただけのプレビューで効果を判断せず、処理後の画像を確認します。出力形式の再圧縮も加わるため、保存後に開き直して細い線と小さな数字を比べてください。
まず補正を1種類だけ変え、必要な差が残るかを確認します。元画像を上書きせず別に保存し、補正後だけで判断しないようにします。
参考情報
- MDN:brightness() — 画像へ倍率を掛けるCSSの明るさ補正。
- MDN:contrast() — 100%を基準とするコントラスト補正。
