Stroop Effect

When the label and the color disagree.

Reading is automatic; naming a color is not. When a label and its color carry different meanings — a green Delete button, a red success badge — the two readings collide and the person slows down, hesitates, and misclicks more often.

John Ridley Stroop
Origin

John Ridley Stroop published the experiment in the Journal of Experimental Psychology in 1935, as part of his doctoral work at George Peabody College. Participants named the ink colors of words, and when the word named a different color the task took them far longer than naming the colors of plain squares.

The explanation that stuck is automaticity: reading a familiar word happens whether you intend it or not, so the printed meaning arrives before the color does and has to be suppressed. The finding is among the most replicated in psychology, and it transfers to any interface where two channels of meaning point in different directions.

The Effect

When two signals about the same element carry conflicting meanings, the reader has to resolve the conflict before acting, and that resolution costs time and accuracy. On screen the two signals are usually the words and the color.

Origin
John Ridley Stroop (1935)
Source
Journal of Experimental Psychology
In practice
Make the color agree with the word
When to Use
How to Use
The classic case 01 / 10

The Green Delete Button

Green says proceed and safe; Delete says stop and think. Put them on the same button and every person meets a small contradiction they must resolve before clicking.

Best for
Destructive actions
Use when
Color carries a convention
Avoid when
The action is genuinely neutral
Channels 02 / 10

Color Is a Second Label

A color is not decoration on a control; it is a second statement about what the control does. Choose it as deliberately as the words, because people read both.

Best for
Button and badge systems
Use when
Palette carries semantics
Avoid when
Color is purely brand
Dashboards 03 / 10

Status Colors That Lie

A red badge reading Healthy, or an amber row labelled Resolved, forces a double take on exactly the screens people scan fastest. Status color and status word must say the same thing.

Best for
Monitoring and admin screens
Use when
Rows are scanned, not read
Avoid when
There is no status semantics
RelatedData Visualization
Conventions 04 / 10

Borrowed Meanings

Red for destructive, green for confirm, amber for caution: these are conventions people bring with them. Breaking one to fit a brand palette moves the cost onto every user, every time.

Best for
Design systems
Use when
Defining semantic colors
Avoid when
The domain has its own convention
RelatedJakob’s Law
Beyond color 05 / 10

Icons That Contradict

The same interference appears between an icon and its label: a download arrow beside the word Upload, a trash can labelled Archive. Two channels, one contradiction, the same pause.

Best for
Icon and label pairs
Use when
Icons carry known meanings
Avoid when
The icon is purely decorative
RelatedUniversal Icons
Culture 06 / 10

Color Is Not Universal

Red marks a fall in Western markets and a rise in Chinese ones; white reads as clean in some cultures and funereal in others. A conflict-free palette in one locale can conflict in the next.

Best for
Products shipped in many locales
Use when
Color encodes direction or value
Avoid when
The audience is one market
Accessibility 07 / 10

Color Alone Is Not a Label

Eight percent of men have some form of color vision deficiency, so a meaning carried only by color is missing for them. Pair every color signal with a word, an icon, or a shape.

Best for
Any status or feedback
Use when
Color carries the meaning
Avoid when
The signal is already redundant
RelatedWCAG and POUR
Testing 08 / 10

Audit the Conflicts

Walk the screens and list every place where a color and a word could disagree: buttons, badges, toasts, charts, empty states. The conflicts are easy to find once you look for them.

Best for
Design review
Use when
A palette is being set
Avoid when
The system has one accent only
✦

Stroop in the Age of AI

Generated interfaces choose colors from style, not from meaning, so the agreement between a label and its color is now something to check rather than something to assume.

✦ AI Era 09 / 10

Palettes Chosen Without Meaning

A model asked for a pretty interface will happily give a destructive action the accent color. Pass the semantics in with the request, then check the output against the labels.

Shift
Style → semantics
Use when
Generating UI from a prompt
Watch for
Accent colors on destructive actions
✦ AI Era 10 / 10

Coloring Confidence

Systems increasingly color-code how sure they are. If the badge is green while the sentence hedges, people believe the color and skip the caveat.

Shift
Text → color signal
Use when
Showing model certainty
Watch for
Reassuring color over hedged words
Further Reading

Original

Wikipedia

Reference