Today colours play a big role in design. It’s important to ensure that there is sufficient contrast between foreground and background. For regular text, there should be minimum ratio of 4.5:1. Be especially careful while dealing with light color shades of gray, orange and yellow
WCAG Success Criteria: 1.4.3 Contrast (minimum) Level AA
Exceptions
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Tools to analyze
- Color Contrast Checker by WebAIM
- Color Contrast Analyzer by The Paciello Group
- Chrome Extension: Color Contrast Analyzer
Choose right and neat colours!
