Spectrum
Spectrum
An online store designed so the 1-in-12 men who can't fully trust the colours on a screen can still shop with confidence — by never letting colour be the only thing that carries meaning.
A storefront where colour informs but never decides.
Most websites are built as if everyone sees colour the same way. They lean on red and green to signal meaning, name products "Damson" or "Sunstreak Yellow," and hide colour filters behind unlabelled swatches. For someone with a colour-vision deficiency, that turns a simple purchase into guesswork — or a phone call to someone who can see the difference.
Spectrum is my investigation into a single question: does designing for colour-blind users measurably improve how usable an eCommerce site is? I researched the condition, ran a survey and interviews with colour-blind shoppers, distilled the literature into concrete rules, and built a functioning store that follows every one of them.
What I set out to answer
Where exactly does a purchase break down when colour can't be trusted?
Separating evidence-based practice from accessibility folklore.
Without looking clinical, broken, or "for disabled people only."
8% of men and 1 in 200 women can't fully trust the colours they see online.
Colour blindness rarely means seeing in grey. It's a reduced ability to tell certain colours apart — most often red from green, because the cones that detect them overlap. It's inherited, permanent, and far more common than designers assume. Yet web accessibility law still doesn't formally count it as a visual impairment.
Four principles became the spine of every decision.
Readable
Body text and links sit at a contrast ratio that holds up for low-vision and CVD users alike — never trendy low-contrast grey-on-grey.
Labelled
Every colour swatch and filter carries its name in plain words. "Light pink," not an unlabelled pink dot.
Redundant
Meaning is coded twice — colour plus an icon, asterisk, position, or text — so no single channel is load-bearing.
Minimal
A small, deliberately CVD-safe palette. The fewer colours in play, the less there is to confuse.
Twenty years of WCAG — and barely a paragraph of new guidance on colour.
WCAG 1.0
Sets the core rule: information must not be conveyed by colour alone.
WCAG 2.0
A major rewrite — yet on colour it largely restates 1.0.
WCAG 2.1
Adds one new colour criterion: a 3:1 contrast minimum for UI components.
The gap
Colour-blindness still isn't legally a disability. Spectrum treats it as one anyway.
Benchmarking the big stores against two axes that matter.
- The field
- Even careful retailers cluster mid-table — strong in one dimension, weak in the other. Walmart names colours but uses red/green cues; eBay's swatches have no labels at all.
- Spectrum's target
- Redundant cues and high contrast together — the under-served top-right quadrant.
A survey of 29 people and three interviews gave the work a face.
"Ravi" · composite persona
Software engineer · red-green CVD- Vision
- Deuteranomaly since childhood — struggles most with dark green vs dark brown.
- Frustration
- Complex, multi-colour UIs and made-up colour names he's never heard of.
- Workaround
- Asks his wife to confirm a colour, or avoids buying anything colour-specific.
- Wants
- The colour written in plain text, and pictures he can actually read.
"Colours are confusing so I give up."
"Colour of the item isn't always in the description. Or the name is something creative like 'champagne' — not gold or light blue."
"I might need to get my wife to confirm a colour if it's in the dark green / dark brown range."
"Referring to the actual name of the colour is very helpful — an indication of the particular shade would be fantastic."
A colour-accessible storefront — built for everyone, not a separate "accessible mode."
The palette is the proof. Switch on a deficiency and watch what survives.
Under red-green colour-vision deficiency, these four colours begin to flatten toward one another, making visual distinctions far less obvious. What may appear instantly recognizable to most users can become ambiguous or even indistinguishable. Without labels or supporting cues to provide context, status indicators such as “in stock” and “sold out” can become a matter of guesswork, turning a simple decision into a frustrating coin toss and increasing the likelihood of user errors.
The azure/amber pair stays distinct across every deficiency — and even if it didn't, the written names and the "*Required" tag carry the meaning on their own.
What the rules look like once they're wired into a real storefront.
The original store is a PHP / CodeIgniter build from 2019–20, so rather than dredge up dated screenshots I've rebuilt the key views as annotated wireframes — same structure, same copy, same colour-accessible palette. Numbered pins tie each screen back to the design moves below.
01 · Home & storefront
Landing · discoveryRedundant coding
"Promoted" is a word, not a wash. Sponsored cards are marked with a text badge — a subtle colour tint alone would disappear for some shoppers.
Move 06
Minimal palette, everywhere. The whole store runs on two CVD-safe accents — azure and amber — over neutrals. Fewer colours, fewer ways to be misread.
02 · Catalogue & filters
Product listing · sidebar filtersMoves 01 · 02
Colour filters are named. Each option pairs a swatch with its common colour name — "Light pink," "Dark blue" — so the label carries the meaning, not the dot.
Redundant coding
Stock is never colour-only. "In stock" and "Sold out" read as text with a tick/cross, so availability survives any kind of colour vision.
03 · Product detail
Single product · buy flowMove 01
The colour is spelled out. "Dark blue" sits in the product facts as plain text — not "Midnight," not a bare swatch a shopper has to decode.
Move 05
Preview through your own vision. The photo can be re-viewed through each deficiency — try the toggle; the same CVD filters from the simulator run live on the image.
04 · Image adjustments
Product photo · self-serve filtersNine independent controls — desaturate a busy shot, push contrast, or rotate the hue to separate two colours that read the same to you.
Move 05
The dial is handed to the shopper. Where the product page offers three fixed CVD previews, this is nine continuous, combinable controls — each person re-processes the photo to whatever their own vision needs, not a preset someone chose for them.
Redundant coding
Every setting is a number, not a position. Each control states its value as text — "Grayscale 40%" — right next to its handle, so the tool never depends on reading a slider's spot or a colour alone.
05 · Ratings & reviews
Social proof · product detailRedundant coding
Stars never travel alone. Every rating carries the numeral beside it — 4.9, 5.0, 4.0 — so the score is readable without depending on the gold fill.
Move 04
Legible distribution. The rating bars use one high-contrast azure fill on a neutral track, and every row is labelled with its count in text.
06 · Seller shop
Profile · seller storefrontMove 01
The colour rides in the title. Even in a dense seller grid, "dark blue," "light pink," "slate-grey" live in the product name — not just the thumbnail.
Redundant coding
Seller trust reads in text. The shop's 4.9 rating sits as a numeral next to the star, and stock still shows as a word on every card.
07 · Checkout & forms
Shipping details · validationOrder summary
Move 03
No colour-only forms. Required fields carry a "Required *" text tag, and errors pair an icon and a message with the amber outline — so the colour only ever reinforces, never decides.
Move 04
High-contrast throughout. Dark text on a bone surface, generous label sizing, and an azure primary action keep the whole flow legible for low-vision users too.
08 · List a product
Seller · create listingBefore you publish
Move 01 · owner side
Colour is named at the source. Sellers pick from common colour names when they list, so the accessible label is baked in from the very first step — designing for the shop owner, not just the shopper.
Move 03
The listing form is redundant too. Required fields are text-tagged and validation states pair an icon with a message — the same rules the storefront follows.
09 · Your library
Account · downloads & ordersRedundant coding
Order status is text first. "Purchased" and "Awaiting payment" each carry an icon and a word — a red/green dot alone would leave colour-blind buyers guessing where their money went.
Move 04
Dashboards get contrast too. The account area holds the same high-contrast type and clear azure actions as the shopfront, so it stays readable for low-vision users.
10 · Order confirmed
Checkout · success stateRedundant coding
Even success doesn't lean on green. The original build used a green-only tick; here the check is paired with the word "confirmed" and the order number, so the outcome is unmistakable without relying on colour.
Move 06
Minimal to the end. One icon, one accent, plain next-steps — the calm, low-noise palette carries all the way through the funnel.
Common colour names
Plain "dark blue" or "light pink" over invented marketing names that mean nothing at a glance.
Labelled filters
Every colour filter shows its name as text — never a bare swatch the user has to decode.
No colour-only forms
Required fields use an asterisk and text, not a red outline that vanishes for CVD users.
High-contrast type
Body and link contrast tuned for low vision; no trendy low-contrast greys.
On-page image filters
A live tool lets shoppers desaturate, adjust contrast and re-tint product photos themselves.
Minimal palette
Two safe accents plus neutrals — fewer colours, fewer chances to confuse.
The literature's advice held up — in front of real colour-blind users.
I evaluated Spectrum with two red-green colour-blind engineers and an ophthalmologist, plus the wider survey panel. The colour recommendations from the research measurably improved readability and usability for colour-blind participants — and, critically, didn't degrade the experience for people with standard vision.
Participants singled out the written colour names and the clearer product imagery as the things that finally let them decide for themselves instead of relying on someone else.
A palette tuned only for colour-blindness can start to read as unprofessional — and a store that looks untrustworthy loses everyone. The real win wasn't "use safe colours," it was never let colour work alone. That keeps the store credible and accessible at the same time.
What I'd do with more time
Sample size
The biggest limitation. Colour-blind participants are hard to recruit, and a global curfew during the build made it harder. The findings replicated across two rounds, but a larger panel would strengthen them.
Scope of testing
I focused on UI and reading usability. Search, performance and the full checkout deserve their own dedicated accessibility passes.
Built-in CVD preview
Ship the simulator above as a real store feature, so any shopper can preview a product through their own type of vision.
A colour-safe theme kit
Package the rules as a reusable theme so other small merchants can be accessible by default.