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 16 pixels and requires a minimum Contrast Ratio of 4.5:1.
- Large-sized text is 18 pixels or larger and requires a minimum Contrast Ratio of 3:1.
- 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
Text Contrast
Do
Text
4.5:1 Contrast ratio
Do
Text
3.78:1 Contrast ratio
Don’t
Text
1.49:1 Contrast ratio
User Interface Contrast
Do
9.77:1 Contrast ratio
Do
3.13:1 Contrast ratio
Don’t
1.02:1 Contrast ratio