Learn by doing · 3–5 minutes
Contrast states lab
Which interface states remain perceivable across themes?
Skill you will practise
Evaluating text and control contrast
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.
Connect the evidence