Skip to content

24 ways to impress your friends

Designing with Contrast

7 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Erwin Heiser

This, a 1000 times this – as someone who often front-ends other people’s designs I can’t recall the number of times I pointed out low contrast and tiny fontsizes to designers.

Chris

Years before there was the other extreme to set everything to the maximum of contrast when Design had a hard stand against a very technical approach of web design. What we see now is the other extreme, and wrong too. But at the end its simple. One has to wisely choose which elements can be set on lower contrast and which elements should be of higher contrast. There are little helpers like https://www.paciellogroup.com/resources/contrastanalyser/ that make it easy to check weather a contrast fulfils accessibility depending on the level.

The decisions are not always so easy as one might think. We have a lot of discussions, e.g. weather a button or input field needs to have high contrast on both text and border. Depending on the context high contrast on everything might even lower usability. I am sure that some strict rules in accessibility could also transform and learn from design.

I would wish to stick again to the fact that contrast is an important principle of design. Therefore it is right and necessary to use different contrast. Readability is important too. The right combination of both might help to create an accessible and visually attractive user experience.

John Cooper

Everything old is new again. In the first dot com bubble, light grey text on white backgrounds at 10pt font size was the the rule not the exception. Its interesting to see how generationally design thinking comes around to similar roadblocks and Im always interested in how this batch of designers address the problem.
Play on!

Mark Mitchell

Chris
Great points. You’re right to note that very high contrast can also cause problems. When all objects demand equal attention, the visual hierarchy is weakened in similar ways to a very low contrast approach. We should always try to strike a balance.

Brett
I would suggest using AAA standards as a long-term goal. There is no reason to not meet AA requirements, as most are quite sensible and practical. Then, we can strive to meet AAA in our work where possible. A great brand, designed well, shouldn’t have to compromise on accessibility.

Legibility and usability is more than meeting accessibility standards. While it is absolutely something that must be a part of our design process — WHO estimates that 285 million people worldwide are affected by a visual impairment — we need to design for other considerations as well. I work on a Macbook Pro (with retina screen). However, most of the time it is attached to a nine-year-old Apple Cinema Display. Thin fonts that are legible on the retina screen suffer terrible aliasing on the older screen, and light greys are nearly invisible. The technology that we design on is often not the hardware that our users have an opportunity to use. Reflection and glare on even the newest and best monitor will wash away a low contrast design. Rendering differences on browsers and mobile devices can compromise text legibility.

I quite like how Heydon Pickering summarizes accessibility: “Accessibility is not just about addressing specific disabilities, but making sure as many people as possible have access to the same information.”

George Hannuneh

This seems to be the future trend, in all what was said you touched the surface of all aspects to truly match the message the product sends with its design.

It might be a good chance to wrap a whole framework around this!

Wanted to take the chance to Thank you for sharing…

Dave

Totally agree with this. I admit, I’ve done some of this back in my younger design days, we probably all have until someone twice your age tells you it may as well be invisible. You start to realize not everyone uses and views the web the same way you do. That’s what younger designers need to realize (especially those with excellent eyesight). The web is no longer a luxury, it’s a necessity end it needs to be accessible to all.

Brett O'Donnell

While I appreciate the authors intent, I find the patronizing of designers frustrating. Design is functional, but it is also subjective. As a fully unimpaired user, I ENJOY designs that don’t satisfy AAA usability standards. Several of the designs negatively listed in the article I would site as sites that are very well designed both from an aesthetic sense and from a communicative sense. It is both limiting and foolish to conclude all design should meet all accessibility standards.

A similar analogy may be drawn concerning food stating “all food should be delicious”. To whom? I like salty food so someone who doesn’t like salt would not find the food I appreciate delicious. Answer? Make it bland and then expect me to add salt. The trouble with this thinking is that in design, I can’t just add salt. I am stuck with whatever the designer came up with to compromise between what they found most visually appealing and communicative of their brand and what would be accessible. True, there are cases where the two can be melded without ill effect but this article seems to argue that accessibility should always take precedent over everything else. Just because there is a desire to make something usable does not mean that the gap between unimpaired users and impaired users doesn’t exist. Also, failing to recognize that the vast majority of users are not impaired is also unfair. There should be balance to our approach. This article seems to recommend all design become blander for the sake of consumption. I strongly disagree.

Impress us

Be friendly / use Textile