Visual design & handoff

Color accessibility

Colton Schweitzer
October 20, 2020

While accessibility is a vast subject and can get incredibly complex, knowing color accessibility is one of the essentials that will make you a better designer.

Poor color contrast can negatively impact how millions of people understand, perceive, and use your product.

The standard for accessibility is called WCAG, short for Web Content Accessibility Guidelines. WCAG provides a set of best practices and guidelines that will enable almost everyone to use digital products.

WCAG’s four principles are:

Perceivable: Can users actually see the content?

Operable: Is the content navigable and usable to users?

Understandable: Does the content and use of the interface make sense?

Robust: Can the content be used on all web browsers and assistive technology? 

For color accessibility, the first principle is what matters: “Is the content perceivable by users?”

With that in mind, let’s talk about color contrast standards. WCAG’s guidelines are useful to know if your color contrast is high enough for your users to perceive it. 

So what is color contrast?

It’s the visual distinction between a foreground and background color. Basically, it’s the ability to distinguish one color when it’s layered on top of another. 

If the contrast between foreground and background colors is too low, some users will have a hard time understanding and using the interface because there isn’t enough contrast to allow them to distinguish certain elements on screen.

Contrast ratios range from 1:1 to 21:1.

1:1 means that there is absolutely no contrast between the foreground and background color. For example, white text on a white background. This is a super effective way to pass secret messages. 

At the other end of the spectrum, 21:1 provides the highest amount of contrast possible: black text on a white background or vice versa. If you’re trying to be sneaky, this won’t do it. 

To meet minimum standards, normal text must have a contrast ratio of at least 4.5:1, while large text and graphical objects only require a minimum of 3:1. 

There are two useful tools to test the color contrast, WebAIM.org and the Stark plugin for Sketch and Figma.

Making colors accessible requires some careful attention, but it’s worth it. It benefits everyone and it makes you a stronger designer. Ensuring accessibility is all about having empathy for all types of people. It’s about being inclusive.

Back to vault

403

Back to vault

403

What is UX?

2
Getting started

Why is UX important?

3
Getting started

What is the UX process?

4
Getting started

What is design thinking?

5
Getting started

What do UX designers do?

6
Getting started

UX vs UI

7
Getting started

Do UX designers need to know how to code?

8
Getting started

Recommended UX books

9
Getting started

UX university programs: Pros & cons

12
Getting started

UX bootcamps: Pros & cons

13
Getting started

6 brutal truths aspiring UX designers don't want to hear

14
Getting started

Difference Between Graphic Designer vs UX Designer vs UI Designer

15
Getting started

Intro to research & understanding

101
Research & understanding

Finding a problem to solve

102
Research & understanding

SWOT analysis

103
Research & understanding

Competitive analysis

104
Research & understanding

Heuristic evaluation (usability evaluation)

105
Research & understanding

Task analysis

106
Research & understanding

Stakeholder interview

107
Research & understanding

Framing the problem

108
Research & understanding

Research plan

109
Research & understanding

Survey

110
Research & understanding

User interview

111
Research & understanding

Card sorting

112
Research & understanding

Customer journey map

113
Research & understanding

Empathy map

114
Research & understanding

Affinity diagram

115
Research & understanding

Personas

116
Research & understanding

Contextual inquiry

117
Research & understanding

Diary study

120
Research & understanding

Eye tracking

121
Research & understanding

Intro to IA

201
IA & wireframing

Layout + CRAP

203
IA & wireframing

Site map

204
IA & wireframing

Scenarios

205
IA & wireframing

Storyboards

206
IA & wireframing

Low vs high-fidelity

207
IA & wireframing

Sketching

208
IA & wireframing

Wireframes

209
IA & wireframing

User flows

210
IA & wireframing

Intro to usability testing

301
Prototyping & usability testing

Usability testing plan

302
Prototyping & usability testing

Prototypes

304
Prototyping & usability testing

Research report

305
Prototyping & usability testing

Typography basics

401
Visual design & handoff

Color basics

402
Visual design & handoff

Color accessibility

403
Visual design & handoff

Pixels vs points

404
Visual design & handoff

Layout + 8pt grid system

405
Visual design & handoff

Design system

406
Visual design & handoff

UX writing

408
Visual design & handoff

"Final" usability test

409
Visual design & handoff

UX portfolio basics

501
UX portfolio

Your portfolio is just another UX project

502
UX portfolio

Choosing a site builder for your UX portfolio

503
UX portfolio

UX portfolio inspiration

504
UX portfolio

5 tips for junior UXers asking for portfolio feedback

505
UX portfolio