UX Contrast Issues? Here’s What I’ve Learned so Far
Color contrast is often seen as the bane of the existence of novice UX designers (myself included). While it can be easy to forget about contrast when coming up with new designs, it is imperative that all designers take contrast into account. It can be the make-or-break component of your product. Here are some things to be mindful of during your creation process to make your workflow streamlined and more efficient.
Check Contrasts Before Application-
While it can be tempting to keep your delusions of grandeur, I would suggest checking color contrasts immediately when deciding to move forward with a palette. There are plenty of convenient ways to check for contrast within multiple design toolkits. I am using the “Stark” plugin for Figma, and I can check for the contrast standards and color-blind options while within my toolkit.
Drastic Times Call for Drastic Measures-
Although you may feel attached to some colors in your palette, odds are you will need big contrast changes if you are not passing various WCAG standards (AA & AAA). See which two colors have the least contrast.
Other Considerations-
Logos and non-essential parts of the product don’t always need to pass every contrast test. You should consult with your team lead and group to discuss what is/isn’t necessary to contrast. These logos are where you can be a little more creative and forging when it comes to contrast.
Text size affects contrast. The larger and more prominent the text is in the foreground, the more contrast will be made against its background. The AA Large, AA, AAA Large & AAA standards are applicable to specific font sizes. AA Large is the least optimal as it works for text 18pt or higher. Whereas regular AA can apply to fonts under 18pt. Typefaces that are obscure, too thin, or too chunky may make the elements more difficult for users to see. Letter shapes and sizes vary dramatically between typefaces. It is critical to use typefaces that make following these guidelines easier. It is important to note that AA and AAA Large have the same contrast ratio of 4.5.
These WCAG standards are set in place to help the various, and plentiful, groups of people with visual deficiencies, disorders, and problems. It is more common than you think. Over 3% of adults are considered legally blind. That’s over 3 million people in the United States. It is imperative to have good accessibility within modern apps and software.
Legal action can and has been taken against many large companies that did not oblige to WCAG standards. AAA standards are where we should aim. This 7.0 contrast effectively aids a majority of people in accessing the product’s features.
