- $ui-red#E62C20
Usage
- 'Error' state for UI components
- Anything else
Accessibility
White
- Contrast ratio 4.03:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Use UI red on white
Use white on UI red
Grey
- Contrast ratio 2.78:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Failed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on grey
Avoid grey on UI red
Background blue
- Contrast ratio 3.34:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on background blue
Background green
- Contrast ratio 3.1:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on background green
Background red
- Contrast ratio 3.05:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on background red
Background grey
- Contrast ratio 3.42:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on background grey
Background yellow
- Contrast ratio 3.83:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on background yellow
Background cream
- Contrast ratio 4.26:1
- WCAG 2 AA Compliant Failed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Failed
- WCAG 2 AAA Compliant(18pt+) Failed
Avoid UI red on background cream
