UI fundamentals · 6 min read
Color & contrast for everyone
Use color to guide attention — without leaving people out who see differently.
Explained like for kids
Color is like crayons in a coloring book. Pretty colors are fun, but if the crayon is too light on white paper, nobody can read the words. Good UI makes sure every “crayon mark” is clear.
Examples
Each example has a kid-friendly “why,” then a clear Don't and Do with a real UI mock so you can see the difference.
Readable text first
Like for kids: Light gray pencil on white paper looks “fancy,” but your teacher can’t read it. Same for UI text.
Don’t
Pale gray text on white (or dark gray on black)
Fails contrast for many eyes, especially outdoors or with low vision.
A handmade laptop stand crafted from walnut veneer. Ideal for home or office use with improved ergonomics.
Hard to read, especially outdoors
Do
Stronger text colors that still feel soft, not pure black
Readable and comfortable. Check contrast with a tool when unsure.
A handmade laptop stand crafted from walnut veneer. Ideal for home or office use with improved ergonomics.
Free shipping · 5.0 (23 reviews)
Color is not the only clue
Like for kids: If “wrong answers” are only marked in red, a color-blind friend might miss the warning. Add a word or icon too.
Don’t
Error shown only by turning a border red
Hue-only signals fail for color-vision deficiency.
Color-only error — easy to miss without the hue
Do
Pair color with text, icons, or patterns
Everyone gets the message, not only people who see that hue.
Enter a complete email, like name@site.com
One brand accent
Like for kids: If every button, link, and badge uses a different rainbow color, the page looks like a sticker explosion.
Don’t
Many competing accent colors everywhere
Hierarchy collapses. Nothing feels important.
Do
One brand color on interactive things
People learn “this blue = I can click it.” Consistency builds trust.
On/off without red vs green
Like for kids: Traffic lights are special. In apps, “on” should look bright and “off” should look quiet — not a red/green puzzle.
Don’t
Red off / green on as the only difference
Red-green color blindness makes them look similar.
Red vs green fails for many eyes
Do
High-contrast “on” + neutral “off”
Luminance (bright vs dull) works for more people than hue alone.
Remember these
- Text and UI chrome need enough contrast to stay readable.
- Never use color alone to mean something (also use icons or text).
- One brand color is often enough for interactive elements.
- Avoid red/green-only differences — many people can’t tell them apart.
Inspired by Practical UI — Colour chapter (Adham Dannaway). Rewritten in plain language for learning — not a reprint of the originals.