step4 property
Color
step4
For UI component backgrounds.
Step 4 is for hover states.
For call-to-action components that you want to draw particular attention to, you can bump the color one step higher to step 5
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 step4 => this[4]!;