誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 ※注:このテストはjavascriptで計算を行っています。スクリプトが利用できない環境では動作しません。下記のテストの方法を参照し、計算するなどしてご自身でご確認ください。 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名(CSS2の色名+SVGの色名、計147色)およびrgb()の表現が使えます(初期値は、読みにくい例が入っています)。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行いません。※なお、入力色を使ったサンプル表示はスタイルシートを使っていますので、スタイルシートが有効でない場合は視覚的に確認することができません。
[ 113] 色の組み合わせチェック - 読みやすい前景色と背景色
[引用サイト] http://www.kanzaki.com/docs/html/color-check
|