[B! Color][accessibility] herakuresのブックマーク

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

herakures 2024/01/22

リンク

やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー

少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を

herakures 2022/01/17

リンク

「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog

「Ameba」は2020年に16周年を迎える長寿サービスです。プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。今回はそのデザインシステムの中でも真っ先に取り組んだ要

herakures 2020/09/16

リンク

『いらすとや』の素材を色覚障がいの視点から見てみた

いらすとやのイラストのこだわりを軽視したらダメ。いらすとやの素材は反転して使用しても違和感が無いように人物素材に服のボタンやポケットが書かれていない。色々な髪型の、色々な服装の、複数の人物が存在する。種類の豊富さもすごい。誰にでも親しまれるイラストを書くことの難しさよ。 — 理央 🎊ゆかりっくフェス10/6参戦 (@Rio_M) October 27, 2018 実際に反転してみると、たしかに違和感がない！ではそんなにこだわっているのなら、色の方はどうなのかな？と思ったわけです。色覚を変えて見てみる使った素材はこの３つ。３つめは半分趣味です。できれば、いつも色覚を変換するときは、TOYO INKの『UDing®』を使うのですが、マシンを新しくしたら使えなくなってしまい…。 P型とD型だけですが、フォトショップの『色の校正』機能で変換しました。ラーメンを食べる男麺の部分と洋

herakures 2018/10/30

リンク

Contrast Ratio - WCAG Color Contrast Checker

Contrast Ratio A contrast ratio checker to easily calculate color contrast ratios and pass Web Content Accessibility Guidelines (WCAG). ? ⇋ Swap colors How to use As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the dif