ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webのアクセシビリティは大事な考え方です。誰もが使いやすいWebサイトを目指す上で、文字の大きさや背景色とのコントラスト、リーダー対応など様々な観点があります。

今回紹介するアクセシビリティカラーヘルパーは背景と文字のコントラスト比を維持するためのカラーパレットになります。

アクセシビリティカラーヘルパーの使い方

利用しているところです。背景色を選んで、その色と指定したコントラスト比以上の色を提案してくれます。

緑系の場合、コントラスト比が9.97だそうです。

背景色を明るくしたり(逆に暗くしたり)、コントラスト比を高くすれば選択できる色数は減ります。

見やすさだけを考えれば白と黒が最もコントラスト比が高い状態になるでしょう。しかしデザインや装飾を考える上で色を選択する必要があります。そんな時の一助になるでしょう。カラーテーマなどを考える際にも参考になりそうです。

アクセシビリティカラーヘルパーはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

アクセシビリティカラーヘルパー

指定した色から、コントラスト比を維持できる色を抽出したカラーパレット生成するツール · azusa-tomita/accessibilitycolorhelper Wiki

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2