Area
Monitoring message and action labels
Colors
Light slate and gray text on dark blue surfaces
Contrast
9.7:1 to 11.6:1
Accessibility note
Passes AA for normal text. Baseline for core copy.
Monitoring Bar + Contextual Menu
Monitoring will stop at 10:00 AM
Accessibility
Monitoring bar color and contrast notes
Area
Action icon inside chip
Colors
Teal icon on darker blue icon chip
Contrast
About 6.7:1
Accessibility note
Keeps the icon readable without depending on the surrounding row background.
Area
Overflow trigger button
Colors
Orange text and border on the blue monitoring bar
Contrast
About 6.4:1
Accessibility note
Action item.
Area
Chevron and secondary indicators
Colors
Muted slate icon on dark blue chip
Contrast
High contrast in current implementation
Accessibility note
Secondary icons quieter than labels, while easy to see at a glance.
Area
Decorative borders and dividers
Colors
Blue border on slightly different blue surface
Contrast
About 1.5:1
Accessibility note
Fine for decoration only. Do not rely on these low-contrast edges to communicate state, focus, or action.
Area
Recording in-progress animation
Colors
Animated waveform
Contrast
Do not rely on animation alone
Accessibility note
Use the moving waveform as a supporting cue only. Pair it with persistent text such as 'Monitoring is active' so people who cannot perceive motion still get the same status.
Area
Status communication
Colors
Text status, icon, and menu action labels together
Contrast
Keep status text at AA contrast
Accessibility note
The current copy already names each state. Keep that text visible so pause, start, and stop timing are never conveyed by color or animation alone.
Area
Menu trigger and actions
Colors
Visible button chrome plus text or icon labels
Contrast
Keep controls above non-text contrast expectations
Accessibility note
The trigger has an accessible name, but the menu pattern should also support keyboard entry, visible focus, Escape to dismiss, and predictable focus movement between actions.
Area
State updates after selection
Colors
Updated bar message after an action is chosen
Contrast
Announcement matters more than color
Accessibility note
If this pattern becomes production UI, consider announcing the new monitoring state with a polite live region so screen reader users hear the change immediately after choosing an action.
| Area | Colors | Contrast | Accessibility note |
|---|---|---|---|
| Monitoring message and action labels | Light slate and gray text on dark blue surfaces | 9.7:1 to 11.6:1 | Passes AA for normal text. Baseline for core copy. |
| Action icon inside chip | Teal icon on darker blue icon chip | About 6.7:1 | Keeps the icon readable without depending on the surrounding row background. |
| Overflow trigger button | Orange text and border on the blue monitoring bar | About 6.4:1 | Action item. |
| Chevron and secondary indicators | Muted slate icon on dark blue chip | High contrast in current implementation | Secondary icons quieter than labels, while easy to see at a glance. |
| Decorative borders and dividers | Blue border on slightly different blue surface | About 1.5:1 | Fine for decoration only. Do not rely on these low-contrast edges to communicate state, focus, or action. |
| Recording in-progress animation | Animated waveform | Do not rely on animation alone | Use the moving waveform as a supporting cue only. Pair it with persistent text such as 'Monitoring is active' so people who cannot perceive motion still get the same status. |
| Status communication | Text status, icon, and menu action labels together | Keep status text at AA contrast | The current copy already names each state. Keep that text visible so pause, start, and stop timing are never conveyed by color or animation alone. |
| Menu trigger and actions | Visible button chrome plus text or icon labels | Keep controls above non-text contrast expectations | The trigger has an accessible name, but the menu pattern should also support keyboard entry, visible focus, Escape to dismiss, and predictable focus movement between actions. |
| State updates after selection | Updated bar message after an action is chosen | Announcement matters more than color | If this pattern becomes production UI, consider announcing the new monitoring state with a polite live region so screen reader users hear the change immediately after choosing an action. |