Colours with Good Contrast – Accessibility Tips

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

• Understanding 1.4.3 Contrast (minimum)
• How to meet 1.4.3 Contrast (minimum)

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!