ColorTester (JIS X 8341-3:2010 に基づき背景色と前景色のコントラストチェックを行うソフト)を公開します。 - アルファサード株式会社
ColorTester (JIS X 8341-3:2010 に基づき背景色と前景色のコントラストチェックを行うソフト)を公開します。 ColorTester - JIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づき背景色と前景色のコントラストのチェックを行うソフトウェア ※9月6日(土)更新 : 更新しました(Ver. 1.0 r33)。より正確に画像から色を取得できるようになりました。 ColorTesterは2色のコントラスト比を計算し評価するツールです。コントラストの評価はJIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づきます。Mac OS X及びWindowsに対応しており、日本語と英語に対応しています。 コントラスト比 - ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 Mac OS (OS X 10.7以
【検証】クリックされるボタンの色は？ | WebNAUT
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
FWD勉強会vol.1資料公開
2007年10月27日に開催された「PHP in Fukuoka ＆ 福岡Webデザイナーズ合同勉強会」で使用した資料を公開します。 FWD勉強会vol.1資料公開［PDF:1.4MB］ 当日伝えきれなかったことや、良い忘れていたこと、準備不足だった部分を補う意味で、付録を追加してから公開しようと思っていましたが、時間がかかりそうだったので、後日余裕ができてから公開したいと思います。 今回は「いろのはなし」というタイトルで、色彩調和をテーマに話をさせていただきました。学生の頃に色についての授業を受けているはずですが、あまり勉強をしていなかったので詳しいわけではなく、少し知っている程度でした。そこでいろんな本を読んだりしながら勉強をし直すことになりました。 色の話はとても範囲が広く、調べていくうちに全体をカバーすることなど到底無理であることが判ってたので、要望のあった「色彩調和」に絞ることに
ブラックベースの暗いウェブデザインで気をつけたいポイント
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
ウェブページのカラーコントラストをチェックする -Check My Colours
ウェブページに使用されている全てのテキストと背景のカラーコントラストが充分であるかどうかチェックしてくれるオンラインサービス「Check My Colours」を紹介します。 カラーコントラストをチェックした結果画面 当サイトを試したところ、上記のようになりました。 テキストと背景の判定はスタイルシートから行っているようで、各要素ごとに使用している色とそのサンプル、コントラストが充分かが一覧で表示されています。 テキストが無い箇所や色指定が無い箇所の判定も行うため、一覧は長くなりますが、エラー箇所のみ表示することも可能です。
[Think IT] 第2回：Webデザイナが使う配色の裏側 (1/3)
Webデザイナは知っていた 第2回：Webデザイナが使う配色の裏側 著者：シンクイット制作部 公開日：2008/02/21（木） Webデザイナはどうやって色を決めてるの？ 「第1回：エンジニアだって色にこだわりたい」では具体的な例をあげて、色を決める際のノウハウを紹介しましたが、全てのWebデザイナが色彩感覚に優れているわけではありません。 他の職種の方々はデザイナはセンスだけで色を決めれると思っているかもしれませんが、Webサイトやツール、そして書籍を見て参考にしながら勉強しているわけです。Webデザイナ向けの雑誌でも年に1度は色についての特集が組まれるぐらいです。 今回は配色を決めるために色の特別な知識がなくても、簡単に色を決めることができるツールとそのポイントを紹介していきます。 Webサイトやツールを作る時には複数の色を使う場合が多く、そんな時でも全体的に整って見えるように配色を
窓の杜 - 【NEWS】Web上の文字の読みやすさを判定する「カラー・コントラスト・アナライザー」
Webページ上の文字の読みやすさをW3C（World Wide Web Consortium）の基準で判定する「カラー・コントラスト・アナライザー」v2.0 日本語版が、10日に公開された。Windows 2000/XPに対応するフリーソフトで、現在（株）インフォアクシアのWebサイトからダウンロードできる。 「カラー・コントラスト・アナライザー」は、Webページの配色を支援するソフト。文字色と背景色の組み合わせを指定すると、W3Cが定める基準をもとに、指定条件下での文字の読みやすさを判定してくれる。判定対象の色はカラーパレットから選択したり、16進数のRGB値などで指定できるほか、内蔵のカラーピッカー機能を利用してデスクトップ画面上の色を取得することも可能。 判定基準は2種類あり、色差と明度差を測定する方法か、輝度のコントラスト比を測定する方法を選択できる。判定結果は配色のプレビューとと
ウノウラボ Unoh Labs: 色覚異常を考慮してWebColor216色を選択できる便利なサービス
こんにちは！ やまもと＠テスト番長です。 このところ段々と秋らしくなってきて、ウノウでも風邪をひくスタッフが目立つようになってきました。皆さんもお体にはお気をつけ下さい。 さて、テストネタからちょっと離れますが、便利なWEBサービスがありましたのでご紹介します。 Color Laboratory -- AWARE Center -- HTML Writers Guild Color Laboratory posted by (C)フォト蔵 ここでは色覚異常の場合の色の見え方を考慮しつつ、WebColor216色のカラーパレットから色の組み合わせを試してみることが出来ます。 右上のフレームでBaseline Gamma（OSの違いによるガンマ補正設定）を選択すると、色覚異常のタイプ設定が出ます。タイプを選択すると、操作にあわせて左上のフレームにあるカラーパレットが変化し、どんな風に見えてい
色に関する便利WEBサービスいろいろ:phpspot開発日誌
COLORS TOOLBOX: 20 Tools For Working With Colors Sometimes all you need to get inspired to build a site is picking a color scheme, or even if you get stuck later in development you need some color help. 色に関する便利WEBサービスいろいろ。 WEBデザインに色は重要ですが、その色をWEB上でブレンドしたり、探したり、色合いをまとめたサイトなど便利なサイトがいろいろあります。 Color Blender - 2種類の色をブレンドできるサービス。色と色の間の色を調べる場合に便利。 Color-Inspirator - ランダムな色合いの生成が可能。共有することもできます。 colordb -
あなたのサイトを色盲の人がどう見ているか教えてくれる『Colour Blindness Simulator』 | P O P * P O P
色盲の人にとってあなたのサイトは見えにくいかもしれません。 そこで便利そうなのが「Colour Blindness Simulator」。 このサイトでは指定した画像を色盲の人がどう見ているかを教えてくれます。 以下に使い方をご紹介。 ↑ とりあえずこのサイトのスクリーンショットでテストします。 ↑ ファイルと色盲の種類を指定します。 ↑ 変換結果。ちょっと小さいですが、まったく違う色になっちゃってますね・・・。 指定できるファイルは100KB以内および、1000ピクセル×1000ピクセル以内のJPEGなのでサイトなどで試すときは気になる部分だけで試してみると良さそうですね。 アクセシビリティに注意しなくてはいけない方はご利用になられてはいかがでしょうか。 » Colour Blindness Check – Etre
ウェブのテキストがもっとも読みやすい文字色と背景色は？ | POP*POP
1997年の研究ではありますが、「ウェブ上のテキストがもっとも読みやすいのはどういうとき？」なるものが紹介されていました。 » Web page readability: Green text on yellow works the best この研究では、フォント、色、スタイルをいろいろ変えてどの組み合わせが読みやすいかを調べたようです。 いくつか参考になりそうな結果があったのでご紹介していきます。 では早速その研究結果から。 もっとも読みやすかったのは「黄色の背景」に「緑の文字」だそうです。ただしフォントが斜体のArialのときはこの組み合わせは最悪だそうです。 Times New RomanのほうがArialより読みやすい。 フォントも合わせて考えると「Times New Romanで、斜体で、黄色の背景で、緑の文字」が一番読みやすかったそうです。 ↑ こんな感じですね・・・。 「グ
jmblog.jp - Web2.0っぽいグラデーションのコツ
そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン（ちょっと言い方を変えてみた）では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。 » A Gradient Tutorial » 9rules Network Official Blog こちらのサイトでは、グラデーションを作る際のポイントが説明されています。 さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。 ちなみに僕は、次のようにしてグラデーション
シニア向けウェブサイトの色 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
シニア層を対象にウェブサイトのユーザーテストをしていると、色使いによって見えない文字、見える文字が出てくる。 文字が小さすぎるともしくは行間が狭いと、それは壁の落書きのようなものであり、「最初から読む気がない」。 たとえば、その点について「○○とありましたが、そこについてはお気づきでしたか」と笑顔で言うと「あっらー、そんなこと書いてあったの?やっだー、こんな小さい文字、気づかないわよぉ」となる。 気難しい？男性の場合は「君は、こんな小さい文字、見せる気ないね」と逆切れされる。いやいや、私に怒られても。 しかし、文字の小ささをここで言うのではない。 読まれないのは文字の小ささもさることながら、全体的な配色もシニア層の「読みたい心」を誘うためにとても重要な項目である。 特に女性は。 ＜４６＞ 目の老化とともに青が黒にみえる？より引用 個人差はありますが、目の老化は４０歳ぐらいから始まるのが普通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite公式ブログ:CSS Nite in Osaka, Vol.5 フォローアップ情報（2）坂本 邦夫さん
http://www.color-fortuna.com/web_color/color_check.html
caramel*vanilla » 日本の伝統色のPhotoshop用カラーパレット
caramel*vanilla » 見ているサイトのカラーパレットを瞬時に作る方法
http://www.tom.sfc.keio.ac.jp/~next/tdiary/?date=20061018