個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかる「Colors」

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかる「Colors」

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかるWEBサイトをご紹介します。
WEBデザインで重要なアクセシビリティ。
そのアクセシビリティに基づいたWEBサイト用のカラーと、その配色例がすぐにわかったら便利ではないですか。
今回ご紹介するサイトがまさにそれ。
このサイトがあれば、すぐに目的のカラーや配色を見つけて、自分のデザインに活用できるはず。
WEBデザインの配色のご参考になれば幸いです。

アクセシビリティを考慮したWEBカラーがまとめられた「Colors」

「Colors」はアクセシビリティを考慮したWEBカラーがまとめられたWEBサイトです。
カラーは16色。

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかる「Colors」

HEX値だけでなく、CSSでクラス名だけですぐに利用できるCSSファイルのほか、sass、lessファイルなどもダウンロード可能です。

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかる「Colors」

IllustratorやPhotoshopでも利用できるパレットもダウンロードできます。

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかる「Colors」

「Colors」の配色例90がわかる「A11Y」

上記「Colors」は基本の18色だけでしたが、その基本色を組み合わせた90の配色例も提示されています。
同じ「Colors」サイト内にある「A11Y」というページです。
下記はその配色例の一部です。

アクセシビリティを考慮したWEBカラーと配色例90がすぐにわかる「Colors」

大変参考になるのが、コントラストが具体的な数値で表示されている点です。
当然、数値が高いものほど、コントラストが強くなります。
これはすごく参考になりますね。

Colors
A11Y

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 6

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

カラーを遊べ!16進数のカラーコードのイベンダーゲームでHEX博士だ

カラーを遊べ!16進数カラーコードのイベンダーゲームでHEX博士だ

16進数カラーコードいわゆるHEXをイベンダーゲームで楽しみながら学べる「Hex Invaders」

記事を読む

PANTONE color to the year 2015はMarsalaに!過去のPANTONE color to the yearのクイズも

PANTONE color to the year 2015はMarsalaに!過去のPANTONE color to the yearのクイズも

PANTONE color to the year 2015はMarsalaって色に決まりました。

記事を読む

カラー・色彩心理学【お手軽版】色・カラーがもつ心理的意味がよくわかる

デザインにおいて色・カラーが重要なのは言うまでもないですよね。 さらに重要になってくるのが配色の知

記事を読む

配色が苦手な人必見!違和感のある配色を良い感じのカラーパレットに直してくれる「Cohesive Colors」

配色が苦手な人必見!違和感のある配色を良い感じのカラーパレットに直してくれる「Cohesive Colors」

配色が苦手でも、まとまりのある良い感じのカラーパレットに直してくれるサービスをご紹介します。 便利

記事を読む

2014年夏のトレンドカラー・流行色:Le Cuir発表

2014年春夏の流行色(トレンドカラー)については、前回の記事 「2014年春夏の流行色・トレンド

記事を読む

ブラウザ上で、色・カラーをすばやく分析・変換してくれるChrome機能拡張「Colorpeek」

Chrome機能拡張で色・カラーの分析・変換をすばやく行ってくれる「Colorpeek」が便利だった

記事を読む

ポケモンのキャラからカラーパレットを生成できる「pokepalettes」

ポケモンのキャラからカラーパレット/配色を生成できる「pokepalettes」

ポケモンのキャラからカラーパレット/配色を生成できる「pokepalettes」をご紹介。 ポケモ

記事を読む

デザイナー必携!現場でトレンドとなっているカラーのPhotoshop&Illustrator用無料スウォッチ1600+

デザイナー必携!現場でトレンドとなっているカラーのPhotoshop&Illustrator用無料スウォッチ1600+

現場でトレンドとなっているカラーのPhotoshop&Illustrator用無料スウォッチをコレク

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自

記事を読む

「アナと雪の女王」の配色だってわかる!人気映画のカラー/配色を参考にできる「The Colors of Motion」

「アナと雪の女王」の配色だってわかる!人気映画のカラー/配色を参考にできる「The Colors of Motion」

カラー/配色を決定するのって本当に難しいですよね。 皆さんはどんな方法で決定しているのでしょうか。

記事を読む