Why contrast matters
Text and interface elements need enough visual contrast to be perceived by people with different levels of vision and in different viewing conditions. Colour alone should not be the only way to communicate status or meaning.
Understand WCAG contrast ratios
WCAG defines contrast ratios based on relative luminance. For WCAG 2.2 AA, normal text generally needs a contrast ratio of at least 4.5:1, while large text generally needs at least 3:1. Some non-text interface components and graphical objects have separate requirements.
Test actual combinations
Check the exact foreground and background colours used in the interface. A palette can contain attractive colours that do not work together for small text. Test buttons, links, disabled states, focus indicators, and text over images separately.
Design beyond colour
Use labels, icons, patterns, or shape differences alongside colour to communicate errors, success, or selected states. This helps users who cannot distinguish certain colour differences and improves clarity for everyone.
Frequently asked questions
What contrast ratio does normal text need for WCAG AA?
Normal text generally requires a contrast ratio of at least 4.5:1 under WCAG 2.2 AA.
What contrast ratio does large text need?
Large text generally requires at least 3:1 under WCAG 2.2 AA.
Is good contrast enough to make a design accessible?
No. Accessibility also involves keyboard access, semantics, labels, focus states, content structure, and other considerations.
Keep exploring
Browse more branding & graphic design guides or return to the ColourMatching.com home page for more practical colour resources.