Accessibility · Foundation
Color Contrast
Text and essential graphics need enough contrast to remain perceivable.
5 minute field note
Helps create
More readable interfaces
Overview
Make the interface carry more of the effort.
Choose color combinations that remain readable across vision conditions, displays and environmental lighting.
Human impact
Why it matters
Text and essential graphics need enough contrast to remain perceivable. When the interface does not account for this, people spend effort interpreting the product instead of completing the task. Applied with context, the principle supports more readable interfaces without removing meaningful choice or control.
Design hypothesis
If we apply Color Contrast to the decision point, people should reach more readable interfaces with less avoidable friction.
Mechanism
How it works
Notice where the task currently asks people to wcag or color without enough support.
Choose color combinations that remain readable across vision conditions, displays and environmental lighting.
Make the smallest change that should improve more readable interfaces, then compare the task before and after.
Interactive experiment
Which interface states remain perceivable across themes?
Invoice ready to review
Check the amount, due date and customer details before sending.
Ratios describe the demonstration colour pair only. Component conformance also depends on text size, boundaries, state and applicable WCAG criteria.
Turn the experiment into a decision
What happened
Body text, controls, focus and disabled states need separate checks because one passing pair does not prove the whole component.
Why it happened
Each state uses different foreground, background and boundary colours with different functional meaning.
Where to apply it
Design tokens, buttons, inputs, status badges, themes and interactive component states.
How to validate it
Measure the exact colour pairs, then test zoom, forced colours and real task recognition with people.
Decision guide
When to use it
Apply it
Practical checklist
Test normal and large text against its actual background.
Check icons and controls needed to identify an action.
Do not communicate meaning through color alone.
Retest combinations in every theme and state.
Watch for
Common mistakes
Testing brand swatches without their real background.
Making disabled text impossible to read.
Assuming dark mode automatically improves contrast.
Accessibility considerations
Treat WCAG contrast thresholds as a baseline, not a visual optimum.
Test high-contrast and forced-color modes where relevant.
Evidence plan
How to test it
Combine an objective check with human use.
Check the relevant WCAG success criterion and technique, then complete the real task with keyboard, zoom and an appropriate assistive technology. Automated checks can support this work but cannot prove the whole experience is accessible.
Observe
Whether names, roles, states, focus and recovery remain understandable throughout the task.
Decide
Pass only when the requirement is met and a person can complete the intended task without avoidable loss of information or control.
Use with judgment
Limits and trade-offs
Color Contrast is a decision lens, not a universal prescription. Context, frequency, expertise and consequence can change the right implementation.
Optimising only for more readable interfaces can create new costs elsewhere. Recheck access, comprehension, user control and business constraints together.
A polished prototype can still fail in real use. Validate consequential decisions with representative people and realistic content.
Design responsibly
Better outcomes must also be honest outcomes.
Use the principle to reduce avoidable effort, not to pressure people into a choice.
Keep price, risk, consent and irreversible consequences visible before commitment.
Record what evidence supports the decision and what remains an assumption.
Evidence
Sources and interpretation
Design principles are lenses, not automatic answers. Apply them in context and validate consequential decisions with users and accessibility testing.
Keep close
Key takeaways
Text and essential graphics need enough contrast to remain perceivable.
Test normal and large text against its actual background.
Pass only when the requirement is met and a person can complete the intended task without avoidable loss of information or control.