Generate beautiful color palettes for your design system.
Color Generator – Kigen
Generate beautiful color palettes for your design system.
コントラストについて改めて考える｜LINEヤフーDESIGN 公式note
こんにちは、LINEヤフーでアクセシビリティの啓発と改善を行っている中野です。 ウェブコンテンツのアクセシビリティにおいて、コントラストは重要な要素です。私たちが日々目にするウェブサイトやアプリケーションのデザインにおいて、どのようにコントラストが担保されているかは、視認性と可読性に直接影響を与えます。この記事では、コントラストの重要性とその基準の変遷について掘り下げていきます。 なお、この記事は2025年6月30日と7月1日に開催された技術カンファレンス、Tech-Verse 2025で発表した「文字コントラストを改めて考える」の内容を再構成した記事です。SpeakerDeckで公開している資料と共にご覧ください。 視覚的な困難さとはウェブコンテンツは視覚情報が多くなっているため、文字の「見やすさ」「読みやすさ」がそのまま利用のしやすさに直結します。まず、視覚的な困難さについて考えてみま
配色に迷ったらこれ！配色イメージを言語化して論理的に伝えられるスケールがめちゃくちゃ役に立つ「語彙力ない私にうってつけ」
リンク www.ncd-ri.co.jp イメージシステム | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所 日本カラーデザイン研究所はオリジナルのカラーシステム「HUE&TONEシステム」やイメージ分析システム「イメージスケール」を開発、発展させてきました。 62 users かたおか＠LP専門Webデザイナー＆著者 @kataokadesign 「Webデザインを学び始めたばかりで配色がうまく決められない」という悩みがあるなら、日本カラーデザイン研究所のイメージスケールを活用すると良いでしょう。 各キーワードに関連する配色が体系化されているので、配色で大失敗する可能性はひとまず減らすことができます。 ncd-ri.co.jp/about/image_sy… pic.twitter.com/QTfzBpQ2EL 2020-12-
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
大雨警戒レベルの配色 色が見分けにくい人に配慮し統一 | NHKニュース
大雨に関する防災情報の5段階の警戒レベルについて、国はレベルごとの色を新たに定めました。色が見分けにくい人にも配慮したもので、今後、自治体やメディアなどに統一した色を使うよう求めています。 このうちすでに災害が発生していることを示すレベル5は「黒」で、特別警報や氾濫発生情報などが発表され、命を守る行動を取る必要があります。 次に、避難指示や勧告が出され、危険な場所から避難する段階のレベル4が「紫」、高齢者など、避難に時間がかかる人が避難する段階のレベル3が「赤」などとなっています。 また、これまでレベル4で取るべき行動を示すキーワードを「全員避難」としていましたが、災害のリスクが無い場所にいる人まで避難が必要だという誤解が生じたとして、新たに「危険な場所から全員避難」と改めました。
新海カントク『面白い分析ですね』／／ 新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。
あいうち＠サークルスイミー @Aiuti01 【プロイラストレーターが多用する明度彩度の領域】 複数人のプロイラストレーターの作品で、明度彩度だけサンプリングした結果、見えてきた明度彩度の傾向となぜその領域が使用されるかの分析をしてみた。 pic.twitter.com/mnJ4QY0cKY 2020-05-20 15:40:38 あいうち＠サークルスイミー @Aiuti01 昨日バズった『プロイラストレーターが多用する明度彩度の領域』ですが、新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 商業イラスト（ソシャゲ・ラノベ表紙・キャラデザ）などを請け負うプロイラストレーターの方と、新海誠監督が多用する明度・彩度の領域がここまで違うとは… pic.twitter.com/Kn4msZqxse 2020-05-22 17:07:11
Case Study on Color Ratio and Accessibility | Bounteous
Orange You Accessible? A Mini Case Study on Color Ratio I recently completed work for a client who used orange heavily in their branding: it was in their print ads, brochures, posters, and signage, and they wanted to incorporate it on their website. This led to a comparison of orange buttons. Can you guess which button is more accessible? If you guessed the left button, congrats! You are an access
文字色と背景色のコントラスト
コントラストに配慮した色の指定 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する 明度差 （color brightness difference） を求める計算式 色の差 （color difference） を求める計算式 計算例 － コントラスト計算例 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する 文字の色とその背景色のコントラスト（色の差、明度差）を十分にすると、文字の読みやすさが良くなります。すなわちアクセシビリティの面で考慮しなければならないことです。 適切なコントラストを適用するには、2000年4月26日付けで W3C 草案 （Working Draft） として公開されている 「Techniques For Accessibility Evaluation And Repair Tools」 のなかで紹介されて
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
【配色 - デザイン ★★★★★】 - 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
株式会社日本カラーデザイン研究所
世界で初めてイメージを測るモノサシを開発 サンプルボタン オリジナルシステムを使ったソリューションを提供 企業情報 About NCD 商品案内 Merchandise サンプルボタン ORIGINAL SYSTEM イメージスケール Image scale Hue&Toneシステム Hue&Tone system サンプルボタン NEWS 2025.08.25 『イメージ情報』第89号 発刊のお知らせ 2025.03.07 イメージスケールを活用した美容師向けの書籍が発売されました 2025.02.25 『イメージ情報』第88号 発刊のお知らせ 2025.02.17 お問い合わせフォーム復旧のお知らせ 2025.02.14 【重要】お問い合わせフォーム不具合のお詑びとご案内 お知らせ一覧 法人向けソリューション 情報誌『イメージ情報』 住宅関連レポート ソフトウェア・アプリ 新イメージス
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)
新しい配色トレンド「カラーブレンド」の効果的な使い方と参考サンプル例30個まとめ | PhotoshopVIP
ブラジルの国鳥であるオオハシのくちばしは、鮮やかで発色のよいマルチカラーとなっています。今回は、この色の組み合わせについて詳しくみていきましょう。グラデーションではありません。カラーブレンド（英: Color Blends）の世界へようこそ。 カラーブレンドって一体なに？ まずは以下のSlackロゴを見て見ましょう。 このロゴでは何色が使われているでしょう。4色ですか。いいえ違います、もっとよく見てみましょう。 ここでは、4つのベースカラーが重なり合っています。重なっているところには、新しい色「ブレンド（英: Blend）」が作成され、合計8色が使われています。カラーブレンドは、2つの重なり合う色を交差させることによって作成されます。 ある意味では、グラデーションの逆と言えるでしょう。グラデーションは２つのカラーが段階的に変化するのに対し、ブレンドは2つの異なる色の重なり方によって配色が変
色覚異常補正レンズを買った
私は先天性の色覚異常である（wiki先生によると色覚多様性という言い方もあるらしい）。 もっとも、「最後の赤と緑、赤い方を切れ！そうすれば爆発を回避できる！」……みたいな経験もないので、仕事や日常生活にはさほど困ってはいない。 ただ、興味本位と日常の些細な問題（靴下の色を取り違える、焼けてない肉を食べそうになる etc.）から、先日、色覚補正用レンズを購入した。 色覚異常を持つ人は男性で約5%の割合でいるそうだ。強弱はともあれ、佐藤・鈴木・高橋姓を足した人数くらい、先天的にその特性を持っているはずである。 まぁ、日常生活で気付くことはまず無理だし、赤の他人から指摘するのも（たぶん）躊躇われるし、で同様に困ってる人にはまだリアルで遭遇していない。 自身の場合は母方祖父がそうだったため、家族からの指摘で比較的早い段階で気付くことが出来た。 早い段階で気付けたことと、見分けのつきにくい色もバンバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS Color Generator | UI Colors
Scale — color scale generator
http://www.asahi-net.or.jp/~gx4s-kmgi/page04.htm
CUDガイドブック.pdf
カラーユニバーサルデザイン推奨配色セットガイドブック