webアクセシビリティ、デザイン面での最初の難題「緑オレンジ問題」を考える｜加藤朋義
「このボタンは目立たせたいから、オレンジにしよう！」 そう思ってデザインすると、「このオレンジはアクセシビリティ未達です」と指摘が入る。 目立つ色を使ったのに、アクセシビリティに達していない。そんなちょっと腑に落ちない経験をしたことないでしょうか。 ここではデザイナーさんがひっかかりやすいwebアクセシビリティ問題No.1（個人調べ）といえる緑オレンジ問題を詳しくみていき、解決方法を考えます。 「緑オレンジ問題」とは冒頭のように、ボタンを目立たせようとしてオレンジ色を選んだ瞬間、アクセシビリティ上で問題が発生する可能性があります。 ↓ 以下のボタンをご覧ください。 良い感じのオレンジだと感じる人が多いかと思います。 しかし、このオレンジはアクセシビリティ基準をクリアしていません。 （ここでいう「アクセシビリティ基準」とはWCAG2.2レベルAAを元にします。初心者の方は「なんかみんなが基準
Color Hunt - Color Palettes for Designers and Artists
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
LCHは、UIにベストなカラースペース｜hirotoarakawa
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
Colorable
Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. “If one says ‘Red’ (the name of the color) and there are 50 people listening, it can be expect
2024年のトレンドカラーは癒やしのカラー！ やさしさに満ち溢れた桃色「ピーチファズ（Peach Fuzz）」、HTMLのコードは「#FFBE98」
2024年のトレンドカラーがPantoneから発表されました。 トレンドカラーは心と体を豊かにするビロードのようなやさしい桃色「ピーチファズ（Peach Fuzz）」、人に寄り添う親切な雰囲気を作り出します。 桃の産毛やたんぽぽの綿毛をイメージしたような桃色で、心地が良い癒やしのカラーです。
カラージェネレーター | Ionic日本語ドキュメンテーション
#444444:root { --ion-color-primary: #0054e9; --ion-color-primary-rgb: 0,84,233; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; --ion-color-secondary: #0163aa; --ion-color-secondary-rgb: 1,99,170; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255,255,255; --io
やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を
ウェブサイトの配色で気を付けたい9つのこと | knowledge / baigie
ウェブサイトやアプリケーションにおいて配色の持つ役割は大きく、その設計は使いやすさに強く影響を及ぼします。今回は基本的ではあるけれど覚えておくと役立つ、配色にまつわる9つのトピックについて解説します。 なお、本記事では、配色が与える情緒的な印象の話は出てきません。印象論的な配色理論は、数多く存在する他の書籍や記事に譲るとして、主にユーザビリティやアクセシビリティ、ビジネス上の課題解決に繋がる、基本的なポイントに絞って解説していきます。 1. メインカラーに赤を安易に採用しない 色を知覚する視細胞の中で、赤錐体（赤に反応する視細胞）は緑や青のものより数が多いという研究結果があります。 人間の目は赤に対して敏感であるという現象は、いくつかの学術的な裏付けにより証明されている事実と言えるでしょう。 色覚のしくみ – 多様な色覚に対応したデザインと社会の改善 特定非営利活動法人カラーユニバーサルデ
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる
フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しいプロパティ「accent-color」 「accent-color」にサポートされている要素 コントラストの確保 他の要素のカラーを変更するCSS 今後の可能性 CSSの新しいプロパティ「accent-color」 現在のHTMLフォーム要素は、カスタマイズが難しいと言われています。カスタムスタイルをほとんどまたはまったく使用しないか、inputのスタイルをリセットして一から作り直すかのどちらか
Color Library
Color Library – Convert color images in multi-channel for printing devices
デザイナーじゃなくても知っておきたい色と配色の基本｜ベイジの図書館
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
PANTONEが選ぶ2020年の色「Classic Blue」を使った配色例
PANTONEが選ぶ2020年の色「Classic Blue」を使った配色例毎年恒例、PANTONEによる「来年の色」が発表されました！2020年は夕暮れの空を連想させる「Classic Blue」です。穏やかで安心感のある落ち着いた色ですね。そんな「Classic Blue」に注目してみたいと思います。 2020 年は夕暮れの空を連想させる「Classic Blue」。広大で永遠に続くような夜空や海の深い青。寒色ですが、見ているだけでスッと心が安定する優しさも感じられますね。様々な色と組み合わせやすいベースカラーとしての役割もできそうです。 色の具体的な数値は以下の通り： PANTONE：19-4052 Classic Blueカラーコード：#0F4C81RGB：R15, G76, B129CMTK：C100, M76, Y25, K0「Classic Blue」色の写真素材Adobe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Huemint - AI color palette generator
AI Color Palette Generator - ColorMagic
Colorbase
Alphredo — Alpha colors generator
Sass Color Generator
Colorbase