-
Notifications
You must be signed in to change notification settings - Fork 0
指定した色から、コントラスト比を維持できる色を抽出したカラーパレット生成するツール
この記事はWebアクセシビリティ Advent Calendar 2019の10日目の記事です。
アクセシビリティカラーヘルパー
特定の色に対して、WCAGの基準を満たす色のみを抽出したカラーパレットを生成するツールを作りました。
例えば白背景#FFFに対して、テキストカラーとして使えるWCAGの基準を満たす色を確認したいようなケースを想定しています。 (衝動的に作ってjsffidleで公開したものの、バグがあったとこを修正したり見た目を調整したものです）
最初に書いたとおり、#FFFの場合に基準を満たす色を知りたかった。
コントラストチェッカーは多くの場合2色をあらかじめ指定する必要があるので、色の目星をつけてチェッカーにかけて違ったらまたやり直し、みたいなことを繰り返していたのが面倒くさかった。
HSLの3要素を 360 x 100 x 100でループをぶん回して1色づつコントラスト比を計算しています。力こそパワー
1刻みだと処理が帰ってこないので、ある程度間引いた形（パレットサイズ大:5、中:10、小:20刻み）で表示しています。
最初に表示されているテキストボックスに色を入れるだけ。
その下のパレットに表示される色が、基準を満たした色になります。
色を選択すると、右側にサンプルテキストでのプレビューが表示されます。
色が表示されなければ、設定を変更してください。
初期値でコントラスト比が7以上の色が絞り込まれます。
これは レベル AAAである達成基準 1.4.6 コントラスト (高度) で求められるコントラスト比なですが、これより低い基準で求めたい場合は、4.5なり3なりに変更してください。
当然0にすればすべての色が表示されます。きれい。
パレットに表示される色の詳細さを変更できます。前述の通り、大:5、中:10、小:20でhslの数値を変化させた色が表示されます。
hslのl(lightness)値です。デフォルトの50が純色で、100に行くほど明るく、0に行くほど暗くなります。 100と0は色相/彩度に関係なく白/黒になるので表示からは省きました。
macのchrome78で確認しています。
動作がおかしいブラウザがあった場合は、プルリクいただければ「多分動くと思うからリリースしようぜ」の精神で取り込みます
適当な色をいれて明度のスライダーをぐりぐりするだけでも面白いと思うので使ってみてください。 #F00 ってコントラスト比7を満たす色が存在しないんだなーとか意外な（当たり前？）発見がありました。
バグ報告、改善要望などは https://github.com/azusa-tomita/accessibility_color_helper に何かしら入れていただければ反応すると思います。