Button hierarchy carried by colour alone
- Forbidden
- A blue primary beside a green secondary, identical in every other respect
- Instead
- Weights differ in structure — solid fill, outline, underlined text — not just hue. Two buttons differing only in colour are the same button to a colour-blind user, and if their contrast against each other is under 3:1 they are the same button to a low-vision user too.
What this rule looks like
Why this rule
This also means a button's fill or border is not decorative: it is the thing identifying the element as a button, so it carries the 3:1 non-text floor.
- Kind
- Rule
- Section
- Things to avoid
- Group
- States and interaction
- Bucket
- judgment
- Severity
- note
- Since
- v0.1.0