Alternatives to Low-Contrast Text NNgroup English English (auto-generated)

Alternatives to Low-Contrast TextYouTube↗ IA↗(long shot)
Science & Technology 4.7K views 223 likes 1 dislikes 28 Aug 2020

NNgroup 252K subscribers United States YouTube↗

Click to Play Video

- I want to you about something.

I want to talk to you about something

But can you hear me okay?

but can you hear me okay oh no you can't

Oh no, you can't? Oh, maybe that's because I'm whispering. (clears throat)

oh maybe that's because I'm whispering

Is that better?

mm-hmm is that better it was kind of

It was kind of annoying, wasn't it?

It was hard to hear me?

wasn't it it's hard to hear me maybe you

Maybe you had to turn up your volume

had to turn up your volume or you leaned

or you leaned in, checked your speakers.

in checked your speakers sorry about

Sorry about that.

that but I also wanted to make a point

But I also wanted to make a point.

whispering is sort of an audio

Whispering is sort of an audio equivalent

equivalent of low contrast text

of low-contrast text. Whispering makes it hard for people to hear.

whispering makes it hard for people to

Just like text that doesn't stand out enough

hear just like text that doesn't stand

from its background makes it hard for people to read.

out enough from its background makes it

So if that's the case, why is it so common

hard for people to read so if that's the

and what are designers doing instead of low-contrast text

case why is it so common and what are designers doing instead of low contrast

to offer a better experience?

text to offer a better experience

Lowering the contrast of text

lowering the contrast of text like this

like this infamous medium gray and a dark gray background,

infamous medium gray and a dark gray

you know what I'm talking about,

background you know what I'm talking

it was a way to keep content on the page

about it was a way to keep content on

while at a glance making it look less busy.

the page well at a glance making it look

It was also used a lot because other well-known sites

less busy it was also used a lot because other well-known sites were doing it so

were doing it so maybe people thought, ah,

maybe people thought ah probably fine

it's probably fine. Not so my friends.

not so my friends let's do a quick

Let's do a quick review of some of the main reasons

review of some of the main reasons why

why it's bad before we get to the alternatives.

it's bad before we get to the

Okay, you know this part, it makes the text harder to see.

alternatives okay you know this part it makes the text harder to see which means

Which means the options you're displaying

the options you're displaying are less

are less discoverable. Those low contrast x-to-close buttons

discoverable those low contrast X to

on the sign-up overlay, people can't find them.

close buttons on a signup overlay people

Even if people can see the text it makes it harder to read.

can't find them even if people can see the text it makes it harder to read this

This is especially true on a mobile device

is especially true on a mobile device or

or if it's small text it's even worse.

you know if it's small text it's even

We don't want users to have to struggle

worse we don't want users to have to

to read text on a page.

struggle to read text on a page this

This effort can increase cognitive strain.

effort can increase cognitive strain it

It can even create false cues

can even create false queues and make

and make some text look inactive.

some text look inactive another big

Another big reason it's not great

reason it's not great is because it's

is because it's not accessible for people

not accessible for people who have

who have visual or cognitive and attentional impairments.

visual or cognitive and attentional

Now the good news is, a lot of sites and apps

impairments now the good news is a lot

are pulling back from extreme low contrast.

of sites and apps are pulling back from extreme low contrast

Maybe that's because UX is being more prioritized

maybe that's because UX is being more

but whatever it is it shows that designing

prioritized but whatever it is it shows

with sufficient contrast, it can be done, and it must.

that designing with sufficient contrast it can be done and it must here are some

Here are some alternative approaches

alternative approaches to handling low

to handling low-contrast text. First, adjust the color combination

contrast text first adjust the color

between the foreground and the background.

combination between the foreground and

Use a color-contrast checker to guide you.

the background use a color contrast

Sometimes a slight difference makes all the difference.

checker to guide you sometimes a slight difference makes all

If you can't change the colors,

the difference if you can't change the

can you make the font large enough

colors can you make the font large

to be comfortably read?

enough to be comfortably read sometimes

Sometimes colors have insufficient contrast

colors have insufficient contrast at one

at one size but are fine

size but are fine and a slightly larger

at a slightly larger size. Be very careful though, the answer to every design problem

size be very careful though the answer

is not just make it bigger, okay, use that sparingly.

to every design problem is not just make it bigger okay

If a design uses low-contrast text

use that sparingly if a design uses low

to avoid competing with something else on the page,

contrast text to avoid competing with

can you reposition elements to reduce that composition,

something else on the page can you reposition elements to reduce that

increasing the contrast after you move that?

composition increasing the contrast

If you do that, just make sure that the new layout

after you move that if you do that just

still supports the users and their goals.

make sure that the new layout still supports the users in their goals and

And lastly, explore reducing

lastly explore reducing the information

the information density on the page.

density on the page if the design is

If the design is using light gray on a white background

using light gray and a white background

because there's so much else on the page,

because there's so much else on the page

well maybe some of that other stuff

well maybe some of that other stuff

doesn't actually need to be there.

doesn't actually need to be there if

If you're just going to whisper it,

you're just going to whisper it should

should it even be on the page?

it even be on the page it comes down to

It comes down to what's important for your users to know

what's important for your users to know

in order to accomplish their goal.

in order to accomplish their goal in

In conclusion, the web is already

conclusion the web is already an

an obstacle course in many ways.

obstacle course in many ways between

Between dodging coupon overlays and log-in walls

dodging coupon overlays and login walls

or text that's too small or distracting animations,

or text that's too small or distracting

people are dealing with a lot.

animations people are dealing with a lot

Having sufficiently high-contrast text

having sufficiently high contrast text

is an easy way to give people a break.

is an easy way to give people a break

Let's hope the trend of low-contrast text

let's hope the trend of low contrast

fades into the background, background, background, background.

Similar videos:

Design Principles 101
NNgroup
10.1K views 233 likes 2 dislikes 22 May 202034% match

4 Things to Do When Designing for Seniors
NNgroup
1.4K views 33 likes 0 dislikes 14 Feb 202032% match

Why Service Design
NNgroup
5.4K views 71 likes 1 dislikes 18 Oct 201932% match

Don't Listen to the Customers
NNgroup
8.6K views 248 likes 5 dislikes 17 Jan 202032% match

DesignOps 101
NNgroup
5.2K views 104 likes 5 dislikes 26 Jul 201931% match

UX Portfolios
NNgroup
5.3K views 107 likes 1 dislikes 19 Jul 201930% match

ResearchOps 101
NNgroup
2.3K views 49 likes 1 dislikes 04 Oct 201930% match

Personalization versus Customization
NNgroup
4.1K views 53 likes 1 dislikes 15 Jun 201830% match

Delightful UX Designs for Which to Be Thankful
NNgroup
4.7K views 94 likes 1 dislikes 17 Nov 201729% match

Transitioning from UI to UX
NNgroup
5.3K views 105 likes 1 dislikes 29 Nov 201929% match

Discount Usability 30 Years
NNgroup
2.5K views 52 likes 0 dislikes 20 Sep 201929% match

Design Thinking & Agile
NNgroup
9.8K views 114 likes 6 dislikes 27 Sep 201929% match

5-Second Usability Test
NNgroup
16.6K views 160 likes 2 dislikes 20 Apr 201829% match

How to Test Visual Design
NNgroup
18.5K views 226 likes 1 dislikes 09 Nov 201828% match

Design Thinking is Like Cooking
NNgroup
4.9K views 57 likes 1 dislikes 25 Oct 201928% match

UX Research Cheat Sheet
NNgroup
11.4K views 270 likes 2 dislikes 10 Jan 202027% match

UX Without Users isn't UX
NNgroup
7.4K views 152 likes 2 dislikes 06 Oct 201727% match

Myths About Complex App Users
NNgroup
2.7K views 104 likes 1 dislikes 16 Oct 202027% match

Firm Rules and Goals for UX vs. Balancing Goals
NNgroup
2.1K views 61 likes 0 dislikes 22 May 202027% match

4 Trustworthiness Factors
NNgroup
2.1K views 65 likes 5 dislikes 30 Oct 202027% match

User Interface Design Fails
NNgroup
7.5K views 160 likes 1 dislikes 09 Oct 202027% match

The 3 Response Time Limits in Interaction Design
NNgroup
3.8K views 76 likes 1 dislikes 25 Oct 201927% match

Design for the Elderly
NNgroup
14.4K views 776 likes 1 dislikes 22 Jan 202127% match

Designing for Friction and Flow in Customer Journeys
NNgroup
4.8K views 102 likes 0 dislikes 18 Jan 201926% match

Data Visualizations for Dashboards
NNgroup
2.7K views 90 likes 2 dislikes 11 Dec 202026% match

Creating a UX Design Portfolio Case Study
NNgroup
8K views 280 likes 5 dislikes 08 Nov 201926% match

Design Thinking 102
NNgroup
9.7K views 99 likes 2 dislikes 03 Aug 201826% match

Can UX be 100% Remote?
NNgroup
4.5K views 95 likes 3 dislikes 10 Apr 202026% match

Prototypes vs Wireframes in UX Projects
NNgroup
6.3K views 113 likes 3 dislikes 16 Aug 201926% match

Animations are Distracting!
NNgroup
7.7K views 105 likes 6 dislikes 30 Nov 201826% match

Settings Privacy About Contact Donate