Pelican Design System
Color Contrast
Color Contrast
Color Contrast is the contrast ratio between colors.
On this page:
Best Practices
- Use the recommended color contrast ratios.
- Normal-sized text is based on browser defaults of 16 pixels and requires a minimum Contrast Ratio of 4.5:1.
- Large text requires a minimum Contrast Ratio of 3:1. (Large-sized text is either: 24 pixels or larger, or 19 pixels and bold.)
- User interface items such as Form Controls require a minimum Contrast Ratio of 3:1. This includes the outlines of Form Controls and the outer edges of Buttons, but is not limited to them.
- When in doubt use WebAIM’s Contrast Checker or TPGi’s Color Contrast Analyzer
Text Contrast
Do
16px Text
4.5:1 Contrast ratio
Do
18px Text
3:1 Contrast ratio
Don’t
16px Text
2.14:1 Contrast ratio
User Interface Contrast
Do
3.15:1 Contrast ratio
Do
3.79:1 Contrast ratio
Don’t
1.01:1 Contrast ratio