The following SDS components support applying the full range of SDS colors simply by using the class suffix:
Colors should only be used if it is decorative only (i.e. do not use the –color-red if it is an alert/error, use the visual state instead).
- 950 dim
- 900 darkest
- 800 darker
- 700 dark
- 600 shade
- 500 (color)
- 400 mid
- 300 light
- 200 lighter
- 100 lightest
- 050 bright
Colors referenced using the number suffix are immutable - and do not change if dark mode is enabled.
Colors referenced using the named suffix will changed to the opposite numbered value if dark mode is enabled.
Soracom are committed to complying with the WCAG AA standard for contrast ratios to ensure all our products and services are accessible to all users. To achieve this, careful consideration should be used when applying colors through our products.
The primary color celeste (
) does not pass WCAG AA color contrast standards when used for text on a white background, or when white text is used on a celeste background.
To meet accessibility requirements, celeste-600 (
) should be used in those situations.
The following table shows the compliant and non-compliant combinations.