Form design: from zero to hero all in one blog post
Hi there. If we haven’t met before, I’m Adam and I’m obsessed with designing forms. And I have been for almost 20 years. What is it about forms then? Every meaningful interaction on the web is achieved by a form of some sort. Whether it’s letting users renew their passport, send an email or buy something. Basically anything that isn’t just reading content. What’s interesting though is that on firs
Please Stop Using Grey Text
An examination of design for readabilityAnd before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design. Further, Medium prevents their users from selecting black text as a choice. While Medium’s “Fischer-Price-simple” content creation is e
An interactive review of Oklab
Why (and when) a perceptual color space? Most image processing is done using a device color space (most often sRGB), and most libraries and interfaces expose that color space. Even when an image editing tool or a standard (such as CSS) exposes other color spaces, it’s still most common to use the device color space. But for some use cases, a perceptual color space can give better results. Basicall
Interactive color picker comparison
Almost all color pickers are based on HSL or HSV, but that might not be the best choice. Here standard HSV and HSL color pickers are compared with Oklch, Okhsv, Okhsl and Hsluv. For background and more information about the color spaces used, check out the accompanying blog post. The source code is available on Github here.
Accessible Palette: stop using HSL for color systems | Wildbit
Recently, I set out on a mission to reconstruct a color system in Postmark. This project addressed several problems with our design system, involved a lot of research, and even required building a few custom tools. Now that this project is finished, I want to share the most important lessons I learned about color and present a new design and accessibility tool Accessible Palette born out of this w
APCA Contrast Calculator
Click on a color patch next to "Text" or "Background" above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list). PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. This is the APCA
Two new color spaces for color picking - Okhsv and Okhsl
Okhsv and Okhsl Two new color spaces for color picking This post has an accompanying interactive comparison of color pickers. I would recommend checking out the interactive demo first, then return if you are interested in the background and technical details. Picking colors is a common operation in many applications and over the years color pickers have become fairly standardized. Ubiquitous today
It's time for a more sophisticated color contrast check for data visualizations - Datawrapper Blog
A few days ago on the internet, I stumbled upon a person who criticized what I took for granted: The W3C Accessibility Guidelines (WCAG) for color contrast. If you’ve been choosing colors and you or your organization cares about accessibility, you’ve seen the infinite number of color contrast checkers — 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, etc. They all answer the question: “Which color should your text
HSLuv - Human-friendly HSL
HSLuv is a human-friendly alternative to HSL. Here you can see CIELUV, a color space designed for perceptual uniformity based on human experiments. When accessed by polar coordinates, it becomes functionally similar to HSL with a single problem: its chroma component doesn't fit into a specific range. HSLuv extends CIELUV with a new saturation component that allows you to span all the available chr
Color.js: Let’s get serious about color • Color.js
Fully color space aware Each color belongs to a color space; operations are color space agnostic. Modules for a wide variety of color spaces, including Lab/LCh, OKLab/OKLCh, sRGB and friends (HSL/HSV/HWB), Display P3, Jzazbz, REC.2100 and many more. Doesn't gloss over color science Actual gamut mapping instead of naïve clipping, multiple DeltaE methods (76, CMC, 2000, Jz), multiple chromatic adapt
The State Of Usability In 2023 🎊 — Smashing Magazine
That’s how people behave on the web in 2023. Some observations from real usability testing on what people do and what they don’t do on the web. From disabled copy-paste to magic link sign-in. Many projects start with assumptions. We assume that users understand hamburger icons and how mega-menus work; that they understand how to deal with disabled buttons; that they safely store passwords and acce
Usability Guidelines For Better Carousels UX — Smashing Magazine
In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in “Smart Interface Design Patterns”, a 10h-video course with 100s of hand-picked examples, curated by Vitaly. Carousels don’t have a good reputation, and rightfully so. They have plenty of accessibility issues, they often exhibit low click-through rates, can be very disr
「競技プログラマーハンドブック」和訳される | スラド デベロッパー
Antti Laaksonen氏の作成した「競技プログラマーハンドブック（原題：Competitive Programmer’s Handbook）」が和訳され、1月7日からGithub上にて公開されている。同書は、競技プログラミングの入門のために執筆されたもので、アルゴリズムを学んでおり、国際情報学オリンピック（IOI）や国際大学対抗プログラミングコンテスト（ICPC）に参加したいと考えている学生を対象とした内容となっている（Akira KANAI氏のツイート、競技プログラマーハンドブック[PDF]、GitHub - recuraki/cphb-ja: (JA)Competitive Programmer's Handbook）。 翻訳をおこなったAkira KANAI氏のツイートによると、基本的テーマから発展的テーマが300ページ超に渡って触れられている内容で、『「こんなのあるんだ!」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home – GOV.UK Design System
Why APCA as a New Contrast Method?
OK LCH, I’m Convinced