What Is a Good Color Contrast Ratio?

The ratios that matter most

For normal text, 4.5:1 is the common WCAG AA target and 7:1 is the stricter AAA target. For large text, AA starts at 3:1 because bigger letters are easier to read.

For meaningful non-text UI, such as input borders, active tabs, icons, focus rings, and button outlines, 3:1 is the key baseline. Decorative marks that do not communicate meaning are handled differently from controls people need to understand.

• Normal text: 4.5:1 for AA and 7:1 for AAA
• Large text: 3:1 for AA and 4.5:1 for AAA
• Meaningful UI components and icons: 3:1

Why ratios vary by text size

Small text needs stronger foreground and background separation because fine letter shapes are harder to distinguish. A color pair that feels clear in a heading can become tiring or unreadable when reused for body copy.

That is why teams should test the actual component state, not only the brand palette. Labels, helper text, placeholder text, and secondary buttons often use lighter colors than the main examples in a design file.

What good looks like in real UI work

A good contrast ratio is one that fits the job. For a paragraph, aim for at least AA and use AAA when readability is central to the experience. For a primary button label, treat 4.5:1 as the practical minimum unless the label qualifies as large text.

For dashboards, forms, and operational tools, test more than the default state. Hover, focus, disabled, selected, and error states can change both foreground and background colors enough to create a failure.

A fast checking workflow

Start with the final text color and final background color. Check normal text first, then large headings, then icons and controls. If the pair fails, adjust lightness before changing hue so the visual identity stays close to the original palette.

After a pair passes, save it as a documented token or component rule. Reusing tested combinations is faster and safer than rechecking isolated colors every time a new screen is built.