7 ms·

Anyone with any part in designing user interfaces seriously needs to commit their section on color to heart: https://designsystem.digital.gov/design-tokens/col

by EricE 5y ago

Anyone with any part in designing user interfaces seriously needs to commit their section on color to heart: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie... Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose!

Aeolun 5y ago
The contrast on the example images rated as AA is actually quite horrible though. I can read the header, but the normal sized text is almost indistinguishable.
- micromacrofoot 5y ago
  The current color contrast algorithm used by WCAG is sorely in need of an update, it outright fails for certain color combinations.
kingcharles 5y ago
Windows 11 has some infuriating parts like this where the contrast between elements is so small you can't tell what is going on (like.. where is the scrollbar?). Especially when you own some cheap LCD display that's 15 years old with 20 nits of brightness and a contrast ratio of non-existent. Compared to the guy that designed the UI (and I'm guilty of this in the past) who persuaded his boss he needed a $6500 Apple ProRes UltraHDR+++ display that is literally brighter than the noonday sun and has a contrast ratio approaching aleph-zero.
ramenmeal 5y ago
Am I misinterpreting it? To me it makes sense that smaller text would require greater contrast. I'm understanding it that larger text/headings need more contrast. Might be more eye-catching, but that doesn't make sense for accessibility.
tablespoon 5y ago
> Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose! Modern UX design fads appear to be a UX trainwreck. It's kind of sad when the supposed experts choose to badly screw up stuff that had already been figured out. Sometimes it seems UX rule one is: show you're better than your users by invalidating their investment and making your UI harder to use once they've gotten used to it.
- laurent92 5y ago
  It’s boring when UIs have a stark contrast; What makes light contrasts beautiful is rarity. Perhaps in the future, extremely elusive UIs with very faint variations will be the top of the design fashion after using cookies to know the user’s tolerance to light contrast. For example, today’s movies are pitch black because they want to upsell 5000:1 screens. The sole reason it didn’t happen to software yet is because we don’t receive any kickback from screen manufacturers, as opposed to movies.
  - paulryanrogers 5y ago
    Yet UIs are too often services increasingly necessary to live and excel in life. So all these rare and beautiful designs keep out users with vision problems, or at minimum push them to use more tooling to work around that shit.
- datavirtue 5y ago
  Exactly,I seriously can't wait until our modern UIs are made illegal by a modification to the disabilities act. I'll probably throw a party.
  - kj4ips 5y ago
    I vaguely remember a pizza delivery company facing a fine, because its website actively broke screen readers, and therefore was considered as discriminating against the blind. Memory says a blind would-be customer complained loudly, but was ignored before they engaged the authorities with a formal complaint.
jfengel 5y ago
The contrast on that Using Color page seems unexpectedly low to me. The text is dark gray on a light gray background. It's not unreadable, and I assume it follows their own guidelines, but I find it draining to read. There is a dark-gray-on-white area on the front page that I find more pleasant to read.
- lelandfe 5y ago
  The background is nearly white at #fcfcfc, and the body copy is an 80% black color (roughly #323232). That is a contrast ratio of 12.49:1, which far exceeds even the most stringent contrast requirements in WCAG 2.1 AAA of 7:1. The "Color, Color Family, and Grade" callout box has the same color text but an #e6e6e6 background, which produces a contrast ratio of 10.27:1 – also passing. Everyone has different preferences, but in terms of color contrast they're doing great.
darekkay 5y ago
> Especially the contrast/magic number discussion. From a developer perspective, working with color palettes with defined "magic numbers" is really great. I have written a blog post [1] around this topic and wrote a tool [2] to calculate/ensure accessible magic numbers for color palettes. [1] https://darekkay.com/blog/accessible-color-palette/ https://darekkay.com/blog/accessible-color-palette/ [2] https://github.com/darekkay/a11y-contrast https://github.com/darekkay/a11y-contrast
- knowuh 5y ago
  I can't tell you how much I love that your first example of contrast failure is HN. > Our favorite orange website isn't leading by example, either. Some comments are almost unreadable
  - kjeetgill 5y ago
    It's worth pointing out that HNs 's heavily downvoted posts are intentionally hard to read. Thats hardly a gotcha. Now whether they should be is a whole different question.
chockchocschoir 5y ago
> Especially the contrast/magic number discussion Speaking about accessibility, who came up with that name "magic number"? It's already an overloaded term with multiple meanings and even has one negative one (for constants that has seemingly "magic" meaning or not a fully understood one). Even something like "contrast ratio" would be immediate to come up with, and much better name as it actually says something on the tin. > Hey Pete, what is the magic number for our color scheme in article body text? Makes no sense... Replace "magic number" with "contrast ratio" and suddenly it does make sense.
- dylan604 5y ago
  You're forgetting two basic concepts: 1)Naming things is hard, 2)Nothing more permanent than a temporary solution. In this case, both are at play.
- darekkay 5y ago
  Contrast ratio is not a good name to describe this concept. A contrast ratio is a decimal number, while a "magic number" is an ordinal value. Also, a contrast ratio has a clear definition from WCAG perspective, and it would be even more confusing to use the same term for two very related topics (magic numbers are based on WCAG contrast ratios). "Magic number" is not good either, for the reasons you've mentioned. But while doing my research for this topic, I couldn't find any better alternative, nor did I want to come up with my own term. I think this topic is niche enough, so we don't have to overthink it.
alephnan 5y ago
I studied computer science and have been software engineer for almost a decade. Before college I came from a design background. I also went back to design school after I already became a senior engineer. One thing I've noticed is that art students have looked into pivoting into UI/UX design because it pays. There are skills and intuition that transfer, such as designing for visual hierarchy. In fact, there are even systemic ways in design school to do color analysis. One way is to take a screenshot of the page and view it in greyscale in Photoshop. I've seen every corporate designer talk about accessibility, but not a single one of them do something like this. They will spend time coming up with a color theme for the brand, but it's really about their own personal brand, not the company's. The problem becomes when ego takes over and people treat service design as their own aesthetic endeavor. Craigslist is good design. HackerNews is good design. Google was a design innovator under Marissa Meyer. Now it feels like Google's design department is just bikeshedding. Material design is a yawnfest but the whole lexicon around it feels pretentious, bordering on those abstract post-modern descriptions in art museums. "Leveraging fluid streams of irregular forms, the artist manifests environmental concerns to provoke sublinear ethereal emotions latent in time and memory". I remember an architecture class where one of the exam questions was "Check all the following that describe the architectural style of the Byzantine empire". One of the answers was "abstract". Out of 50 questions on the exam, this question was one of the questions that tripped people up the most. The instructor held a session for people to review the exam and express their grievances. Some of the students felt this question was biased towards Westerners, and asked the lecturer what "abstract" meant. The lecturer responded "abstract means abstract". To this day I still dwell on whether this instructor knows what abstracts means. The hardest class I took in university was not Operating Systems, String Theory, nor even graduate level Philosophy. It was modern architecture. The text was harder to read and understand than Kant. Even using Google Translate on some classic Chinese text makes more sense. Maybe Google Translate should add "design" as a language (not to be confused with design language and design systems). Yes, there are ideas being transferred and communicated, but 90% of the content felt like it's not making any substantive or meaningful statement. It literally felt like reading Infinite Jest. And so we end up with bloated CSS. Why use lot CSS when few CSS do trick? HackerNews still has personality and brand, and people who built an HN clone might remember bits of it in their head. In fact, when my girlfriend talks to me she just says "oh, did you read that on The Orange Website?" Designers feel it is business critical and that the product shouldn't launch if we don't have rounded corners with an exact amount of curvature, or the line height is off by 1. Yes, some engineers shouldn't be left to their own accord and build dashboards that look like it was built by engineer. Maybe we can also blame the media perception that Steve Jobs is a perfectionist. He probably is, but most software products are CRUD apps and don't need an academic treatise on design. I've worked at a place where designers always wear black, and as far as a turtleneck. I've considered going back to school for Industrial Design, and having UI/UX design as a fallback, but when I think about the cliquey and political overhead of the day-to-day, I just stay collecting my engineering paycheck so that eventually I don't have to rely on a paycheck and then muddle my personal ego with doing corporate design work. I have designer friends outside of work where I can observe designers out the corporate veil. Their priorities ( corporate politics are different topic ) are not aligned with the user. They treat the work as the pyramid of Giza, or at least something to cement their careers and portfolio. The problem when art students become UI/UX designers is that they view their design as art: "what does the work say/convey?" / "what artistic boundaries is it pushing?". That's not relevant to useful software. This is not unique to designers. Computer Science graduates have a tendency to shoehorn all their academic learnings into the source code. Angular felt like people needing to flex all the design patterns they learned from Gang of Four. At least in my bubble, it felt like frontend engineers always felt an inferiority complex. I don't think that's warranted, but nonetheless frontend engineers need to remind people they have a computer science degree, too. And so the Node ecosystem becomes what it is. Go felt like it was designed by pragmatic programmers, not object oriented philosophers inspired by Plato's theory of form. Designing to be aesthetically interesting is okay, too, insofar that it does not hinder the user experience. It's kind of cruel that Microsoft ended up being more aesthetically interesting than Google. In terms of being original, interesting and aesthetic, Metro is better than Material, and XBox is better than whatever hardware Google cranks out. Then again, Microsoft is more engaged and in-tune open source and the frontend ecosystems nowadays than Google is. Less than decade ago, my Microsoft friends was perplexed why anyone would want to build a web app with HTML5 when they can build native applications with C#. I think Google would be better off if they lower compensation, I might consider rejoining.
causality0 5y ago
Like on Windows where you can't tell where on the top of the window you have to click to drag, where lets you resize the window, and where does nothing at all.
simonh 5y ago
Even basic things like window borders, our Windows 10 desktops at work don’t have them and MS app window backgrounds are white. If several windows are overlapped and there’s a small window in the middle somewhere, good luck trying to find the edges to move it. It’s just a sea of white with text scattered about.

by EricE 5y ago

Aeolun 5y ago

The contrast on the example images rated as AA is actually quite horrible though. I can read the header, but the normal sized text is almost indistinguishable.

micromacrofoot 5y ago
The current color contrast algorithm used by WCAG is sorely in need of an update, it outright fails for certain color combinations.

kingcharles 5y ago

Windows 11 has some infuriating parts like this where the contrast between elements is so small you can't tell what is going on (like.. where is the scrollbar?). Especially when you own some cheap LCD display that's 15 years old with 20 nits of brightness and a contrast ratio of non-existent. Compared to the guy that designed the UI (and I'm guilty of this in the past) who persuaded his boss he needed a $6500 Apple ProRes UltraHDR+++ display that is literally brighter than the noonday sun and has a contrast ratio approaching aleph-zero.

ramenmeal 5y ago

Am I misinterpreting it? To me it makes sense that smaller text would require greater contrast. I'm understanding it that larger text/headings need more contrast. Might be more eye-catching, but that doesn't make sense for accessibility.

tablespoon 5y ago

> Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but buttons that don't look like buttons because they blend into the background are another pet peeve - or have light gray on dark gray. Ugh! Contrast serves a purpose! Modern UX design fads appear to be a UX trainwreck. It's kind of sad when the supposed experts choose to badly screw up stuff that had already been figured out. Sometimes it seems UX rule one is: show you're better than your users by invalidating their investment and making your UI harder to use once they've gotten used to it.

laurent92 5y ago
It’s boring when UIs have a stark contrast; What makes light contrasts beautiful is rarity. Perhaps in the future, extremely elusive UIs with very faint variations will be the top of the design fashion after using cookies to know the user’s tolerance to light contrast. For example, today’s movies are pitch black because they want to upsell 5000:1 screens. The sole reason it didn’t happen to software yet is because we don’t receive any kickback from screen manufacturers, as opposed to movies.
- paulryanrogers 5y ago
  Yet UIs are too often services increasingly necessary to live and excel in life. So all these rare and beautiful designs keep out users with vision problems, or at minimum push them to use more tooling to work around that shit.
datavirtue 5y ago
Exactly,I seriously can't wait until our modern UIs are made illegal by a modification to the disabilities act. I'll probably throw a party.
- kj4ips 5y ago
  I vaguely remember a pizza delivery company facing a fine, because its website actively broke screen readers, and therefore was considered as discriminating against the blind. Memory says a blind would-be customer complained loudly, but was ignored before they engaged the authorities with a formal complaint.

jfengel 5y ago

The contrast on that Using Color page seems unexpectedly low to me. The text is dark gray on a light gray background. It's not unreadable, and I assume it follows their own guidelines, but I find it draining to read. There is a dark-gray-on-white area on the front page that I find more pleasant to read.

lelandfe 5y ago
The background is nearly white at #fcfcfc, and the body copy is an 80% black color (roughly #323232). That is a contrast ratio of 12.49:1, which far exceeds even the most stringent contrast requirements in WCAG 2.1 AAA of 7:1. The "Color, Color Family, and Grade" callout box has the same color text but an #e6e6e6 background, which produces a contrast ratio of 10.27:1 – also passing. Everyone has different preferences, but in terms of color contrast they're doing great.

darekkay 5y ago

> Especially the contrast/magic number discussion. From a developer perspective, working with color palettes with defined "magic numbers" is really great. I have written a blog post [1] around this topic and wrote a tool [2] to calculate/ensure accessible magic numbers for color palettes. [1] https://darekkay.com/blog/accessible-color-palette/ https://darekkay.com/blog/accessible-color-palette/ [2] https://github.com/darekkay/a11y-contrast https://github.com/darekkay/a11y-contrast

knowuh 5y ago
I can't tell you how much I love that your first example of contrast failure is HN. > Our favorite orange website isn't leading by example, either. Some comments are almost unreadable
- kjeetgill 5y ago
  It's worth pointing out that HNs 's heavily downvoted posts are intentionally hard to read. Thats hardly a gotcha. Now whether they should be is a whole different question.

chockchocschoir 5y ago

> Especially the contrast/magic number discussion Speaking about accessibility, who came up with that name "magic number"? It's already an overloaded term with multiple meanings and even has one negative one (for constants that has seemingly "magic" meaning or not a fully understood one). Even something like "contrast ratio" would be immediate to come up with, and much better name as it actually says something on the tin. > Hey Pete, what is the magic number for our color scheme in article body text? Makes no sense... Replace "magic number" with "contrast ratio" and suddenly it does make sense.

dylan604 5y ago
You're forgetting two basic concepts: 1)Naming things is hard, 2)Nothing more permanent than a temporary solution. In this case, both are at play.
darekkay 5y ago
Contrast ratio is not a good name to describe this concept. A contrast ratio is a decimal number, while a "magic number" is an ordinal value. Also, a contrast ratio has a clear definition from WCAG perspective, and it would be even more confusing to use the same term for two very related topics (magic numbers are based on WCAG contrast ratios). "Magic number" is not good either, for the reasons you've mentioned. But while doing my research for this topic, I couldn't find any better alternative, nor did I want to come up with my own term. I think this topic is niche enough, so we don't have to overthink it.

alephnan 5y ago

I studied computer science and have been software engineer for almost a decade. Before college I came from a design background. I also went back to design school after I already became a senior engineer. One thing I've noticed is that art students have looked into pivoting into UI/UX design because it pays. There are skills and intuition that transfer, such as designing for visual hierarchy. In fact, there are even systemic ways in design school to do color analysis. One way is to take a screenshot of the page and view it in greyscale in Photoshop. I've seen every corporate designer talk about accessibility, but not a single one of them do something like this. They will spend time coming up with a color theme for the brand, but it's really about their own personal brand, not the company's. The problem becomes when ego takes over and people treat service design as their own aesthetic endeavor. Craigslist is good design. HackerNews is good design. Google was a design innovator under Marissa Meyer. Now it feels like Google's design department is just bikeshedding. Material design is a yawnfest but the whole lexicon around it feels pretentious, bordering on those abstract post-modern descriptions in art museums. "Leveraging fluid streams of irregular forms, the artist manifests environmental concerns to provoke sublinear ethereal emotions latent in time and memory". I remember an architecture class where one of the exam questions was "Check all the following that describe the architectural style of the Byzantine empire". One of the answers was "abstract". Out of 50 questions on the exam, this question was one of the questions that tripped people up the most. The instructor held a session for people to review the exam and express their grievances. Some of the students felt this question was biased towards Westerners, and asked the lecturer what "abstract" meant. The lecturer responded "abstract means abstract". To this day I still dwell on whether this instructor knows what abstracts means. The hardest class I took in university was not Operating Systems, String Theory, nor even graduate level Philosophy. It was modern architecture. The text was harder to read and understand than Kant. Even using Google Translate on some classic Chinese text makes more sense. Maybe Google Translate should add "design" as a language (not to be confused with design language and design systems). Yes, there are ideas being transferred and communicated, but 90% of the content felt like it's not making any substantive or meaningful statement. It literally felt like reading Infinite Jest. And so we end up with bloated CSS. Why use lot CSS when few CSS do trick? HackerNews still has personality and brand, and people who built an HN clone might remember bits of it in their head. In fact, when my girlfriend talks to me she just says "oh, did you read that on The Orange Website?" Designers feel it is business critical and that the product shouldn't launch if we don't have rounded corners with an exact amount of curvature, or the line height is off by 1. Yes, some engineers shouldn't be left to their own accord and build dashboards that look like it was built by engineer. Maybe we can also blame the media perception that Steve Jobs is a perfectionist. He probably is, but most software products are CRUD apps and don't need an academic treatise on design. I've worked at a place where designers always wear black, and as far as a turtleneck. I've considered going back to school for Industrial Design, and having UI/UX design as a fallback, but when I think about the cliquey and political overhead of the day-to-day, I just stay collecting my engineering paycheck so that eventually I don't have to rely on a paycheck and then muddle my personal ego with doing corporate design work. I have designer friends outside of work where I can observe designers out the corporate veil. Their priorities ( corporate politics are different topic ) are not aligned with the user. They treat the work as the pyramid of Giza, or at least something to cement their careers and portfolio. The problem when art students become UI/UX designers is that they view their design as art: "what does the work say/convey?" / "what artistic boundaries is it pushing?". That's not relevant to useful software. This is not unique to designers. Computer Science graduates have a tendency to shoehorn all their academic learnings into the source code. Angular felt like people needing to flex all the design patterns they learned from Gang of Four. At least in my bubble, it felt like frontend engineers always felt an inferiority complex. I don't think that's warranted, but nonetheless frontend engineers need to remind people they have a computer science degree, too. And so the Node ecosystem becomes what it is. Go felt like it was designed by pragmatic programmers, not object oriented philosophers inspired by Plato's theory of form. Designing to be aesthetically interesting is okay, too, insofar that it does not hinder the user experience. It's kind of cruel that Microsoft ended up being more aesthetically interesting than Google. In terms of being original, interesting and aesthetic, Metro is better than Material, and XBox is better than whatever hardware Google cranks out. Then again, Microsoft is more engaged and in-tune open source and the frontend ecosystems nowadays than Google is. Less than decade ago, my Microsoft friends was perplexed why anyone would want to build a web app with HTML5 when they can build native applications with C#. I think Google would be better off if they lower compensation, I might consider rejoining.

causality0 5y ago

Like on Windows where you can't tell where on the top of the window you have to click to drag, where lets you resize the window, and where does nothing at all.

simonh 5y ago

Even basic things like window borders, our Windows 10 desktops at work don’t have them and MS app window backgrounds are white. If several windows are overlapped and there’s a small window in the middle somewhere, good luck trying to find the edges to move it. It’s just a sea of white with text scattered about.