A bold title, but in my experience very true. I don’t have the numbers and I doubt there is a research out there that I could refer to. It has something to do with the fact that Web Content Accessibility Guidelines seems to be content and code-oriented at first sight.
Color contrasts in designs out there are worsening according to studies, and I think selecting “good” colors is the basic for any design – therefore designer has to define them. And they sure do define colors, but designer must also check how the colors “work” together, so what is the contrast ratio between foreground and background and also what is the contrast when comparing neighboring user interface (UI) elements.
The status of this is improving, I can see it with my own eyes, and we can thank all the tools that are now encouraging the designers to consider best practices right from start.
But we need more focus on the element states and their colors too; it is very often that designers have a background from print and there is no need for defining state of the element. So focus, hover, selected, disabled, invalid, valid, … states has to be defined, tested that their contrast is good and that they will also be useful.
I like the definition from material design;
States communicate the status of UI elements to the user. Each state should be visually similar and not drastically alter a component, but must have clear affordances that distinguish it from other states and the surrounding layout.
Material Design (opens in new window)
Let me list some possible states for you (not all can be applied to all elements though);
- active,
- checked,
- disabled,
- enabled,
- focus,
- hover,
- invalid,
- optional,
- read-only,
- required,
- valid,
- visited
So – when a developer gets the design (s)he needs also the design for all the states that has to be implemented for all active elements. It is often forgotten and then a developer must get in touch with the designer and use some time to go through all small changes.
Design systems to the rescue
If we dissect designs into a smart collection of small elements (components), set them to be independent and define all their states and special modes, then we can talk about design system.
Design system is a very efficient solution for both developer and designer. They must work on it together and when accessibility is build-in from start the whole product using those components is for sure more accessible at the end.
When cooperating on the design system, designer and developer share their thoughts, knowledge and experiences and next project can for sure benefit from such team work by default.
But it is important for designer to drop the “each page is a work of art” mode and get more into the engineer-designer mode. So that we do not get tens or hundreds of different variations of same component at the end (and so that whole solution is more consistent at the end).
Designer should not treat every screen they add as a new masterpiece. Yes, they create art, but it is more effective to use a system and limit the different element versions as much as possible. Or – in the end – you wind up with hundreds of call to action buttons and dozens of different text styles.
me, after thinking about my past experiences
Yes, design is art. But when building for web – we must not think one of a kind art-pieces but we must be a bit less art oriented when we must build digital solutions.
Main benefit of consistent designs is the power of centralized updates, and centralized accessibility of the components. Consistency saves time and time is money!
