EightShapes Contrast Grid
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2F2F2 #DDDDDD #CCCCCC #888888 #404040, Charcoal #000000, Black #2F78C5, Effective on Extremes #0F60B6, Effective on Lights #398EEA, Ineffective Use distinct rows & columns values Use the same rows & colum
Reasonable Colors
Rose Raspberry Red Orange Cinnamon Amber Yellow Lime Chartreuse Green Emerald Aquamarine Teal Cyan Powder Sky Cerulean Azure Blue Indigo Violet Purple Magenta Pink Gray Reasonable Colors is free and open source. The annotated source-code is available on Github (mirrored on Gitlab) and released under the MIT license. Anyone can use these colors for anything. Reasonable colors are accessible. The co
Exploring Color-contrast() For The First Time | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here. As far as I know, no other browser supports this yet and I have no idea when stable Safari will ship it, or if any other browser ever
Color Name & Hue – Colblindor
It is always a problem for me to assign a certain color to a main hue. If you struggle also with this because of your color blindness, Color Name & Hue might help you. Try it out. With this little tool you can either enter RGB (Red-Green-Blue) values, HSB (Hue-Saturation-Brightness) numbers or a hexadecimal code for a color, to find its closest match of a named color and its corresponding hue. It
Adobe Color | アクセシビリティツール
Web 上で視覚的に利用可能なカラーテーマを作成して、Creative Cloud ライブラリに保存し、クリエイティブな作業で使用する方法を説明します。 人々のためにデザインする時は、誰もが使えるようにすることを考えるべきです。 これはカラーにも当てはまります。 一般的に「色覚多様性」と呼ばれる人が世界の人口の 3 ～ 8 ％ を占めることは、驚くべき事実かもしれません。 通常それは、女性より男性に多く見られる、ある遺伝子によって引き起こされます。 白人を例にとると、色覚多様性の割合は男性で 12 人に約 1 人であるのに対し、女性では 200 人にわずか 1 人となります。つまり、選択したカラーに対して誰もが同じように認識するわけではないということです。 選択したカラーをユーザーがどのように認識する場合があるかを理解することは、自分のデザインが必ずしもすべての人に対応しないことに気付いた
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
There is no “Myths of Color Contrast Accessibility”
You are here: Creative Juiz › User Experience › There is no “Myths of Color Contrast Accessibility” Also available in: Français When you need to work on interfaces, color contrast is a real thing you have to take into account to make it accessible. You have the right to be afraid of losing part of the aesthetics of your beautifully well designed interface, and you are right if you are used to poor
Khroma - The AI color tool for designers
A personalized algorithm By choosing a set of colors, you'll train a neural network powered algorithm to generate colors you like and block ones you don’t, right in your browser. Creates infinite combos Khroma has learned from thousands of the most popular human-made palettes accross the internet to produce great combos which you can view as typography, gradient, palette, or custom image. Which yo
Colorblind Web Page Filter Testing Tool & Simulator | Toptal®
What are color blind anomalies? Please indicate a resource to be viewed, and a color filter to be applied to that resource. Use the Colorblind Colorlab to select safe colors earlier in the design process. Learn more about colorblindness in this Wikipedia entry. This tool is still in development, but feedback is welcome while we work on it. If you only use one filter, use the greyscale filter which
Color contrast checker, analyser and color suggestions | Polypane
How does the color contrast checker work?The Polypane color contrast checker checks against values defined by the WCAG 2 (Web Content Accessibility Guidelines) or APCA (the Accessible Perceptual Contrast Algorithm). WCAG give a formula to calculate the contrast, ranging from 1 (no contrast) to 21 (black on white). APCA has a range from minus ~106 to plus ~106. The Polypane contrast checker takes o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Huemint - AI color palette generator
Huetone • Make colors accessible
https://omatsuri.app/color-shades-generator
Sass Color Generator
Pantone 2021: Working on an Accessible Color Palette
A DRY Approach to Color Themes in CSS | CSS-Tricks
Color stuck? Try the color palette finding technique graphic designers love
How to Choose UI Colors for Mobile and Web Design Wisely
Quick Tips for High Contrast Mode | Sarah Higley
Parametric Color Mixer
