Cursor guidelines
Cursor
Description
Default (Arrow)
Use the default cursor for non-interactive components like status light.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Info and relationships, Identify purpose
A, AAA
Status lights should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.
Use of color
A
Color is never used as the sole way to convey meaning in status lights. While color is used to reinforce their meaning, every status light also includes a clear text label that communicates the status.
Text contrast minimums
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
Visual presentation
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Non-text contrast
AA
The visual presentation of the status light dot has a contrast ratio of at least 3:1.
2 . Operable