step5 property
Color
step5
For UI component backgrounds.
Step 5 is for pressed or selected states
For call-to-action components that you want to draw particular attention to, you can bump the color one step higher to step 6
For complex components where you need many subtle colors to communicate different meanings, you can get creative and do something like:
-
Step 3 for hovered backgrounds.
-
Step 4 for selected / pressed backgrounds.
-
Step 5 for "unread" backgrounds.
-
Step 6 for hovered "unread" backgrounds.
Steps 11 and 12—which are designed for text—are guaranteed to pass 4.5:1 contrast ratio on top of a step 3 background from the same scale.
Implementation
Color get step5 => this[5]!;