WCAG contrast ratio on Mac: AA and AAA explained
The contrast ratio is a gate, not a design opinion. Use it to catch weak UI color pairs early, then inspect the real state before calling the design accessible.
For most UI text, the WCAG contrast ratio you should remember is 4.5:1. That is the Level AA minimum for normal text. Large text has a lower AA threshold of 3:1. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
The ratio is useful because it turns "this looks a little faint" into a concrete check. It is not the whole accessibility review. A passing number can still hide problems with tiny text, thin type, image backgrounds, focus states, disabled states, or color-only meaning.
Disclosure: I build teenytool. This guide uses TeenyTool's local Contrast Checker for the Mac workflow, but the thresholds come from W3C WCAG 2.2.
Quick answer
| UI case | AA target | AAA target |
|---|---|---|
| Normal text | 4.5:1 or higher | 7:1 or higher |
| Large text | 3:1 or higher | 4.5:1 or higher |
| Meaningful icons, borders, controls, chart marks | Use non-text contrast guidance as the first gate. | Inspect the component and make sure color is not the only cue. |
| Hover, focus, selected, disabled, dark mode | Retest each state separately. | A default-state pass does not cover every state. |
01What the contrast ratio means
A WCAG contrast ratio compares the relative luminance of two colors. The result is written as a ratio such as 4.5:1 or 7:1. Black on white has the highest possible contrast ratio, 21:1.
TeenyTool's Contrast Checker follows the standard shape: convert foreground and background hex values to RGB, linearize the color channels, calculate relative luminance, then divide the lighter value plus 0.05 by the darker value plus 0.05.
You do not need to do that math by hand. You do need to choose the right two colors. A correct formula with the wrong background is still a bad check.
02AA is the practical default for UI handoff
For everyday UI work, AA is the default target. Normal body text, labels, links, button text, form text, and navigation items should pass 4.5:1 against their actual background.
Large text has a lower AA threshold of 3:1 because size and weight help legibility. Do not assume a heading qualifies as large. Confirm the rendered size and weight, especially on responsive layouts.
If a pair lands at 4.51:1, it passes the number but leaves almost no room for antialiasing, font changes, design edits, or a slightly different background. I treat borderline passes as fix candidates before handoff.
03AAA is useful, but not always the product target
AAA targets are stricter: 7:1 for normal text and 4.5:1 for large text. They are worth aiming for in dense reading interfaces, settings screens, data tables, dashboards, docs, and long-form text.
AAA is not always realistic for every brand accent, disabled state, or decorative treatment. When a pair does not hit AAA, make sure it still meets AA when the content matters.
Write this down in the handoff. "AA pass, AAA fail" is useful. "Looks fine" is not.
04Check the exact state, not the ideal one
Contrast failures hide in states. A default button may pass. The disabled button may fail. A light-mode label may pass. The dark-mode label may fail. A focus ring may be invisible against one card background but clear against another.
Run separate checks for hover, focus, selected, active, disabled, warning, error, dark mode, high-contrast mode, and image-backed states. If a color appears over a gradient or photo, sample the area behind the text, not a clean background from somewhere else.
The related TeenyApps hub is the Mac UI color accessibility checklist. Use it when the contrast number is part of a broader handoff.
05Where TeenyTool fits
TeenyTool is useful when contrast checking is one step in a local Mac utility workflow. Its Contrast Checker accepts foreground and background hex values, shows a preview, and marks AA normal text, AA large text, AAA normal text, and AAA large text.
The same app also includes nearby color tools such as Color Converter, Tint and Shade, Complementary Colors, Color Palette, Palette Generator, Random Color, and Gradient Generator. That keeps quick color work out of browser tabs when the source material is private.
If your colors start as sampled screen values rather than written hex values, use TeenyColor's palette export workflow to name and save the values before you test pairs.
Mac contrast check workflow
- Collect the foreground and background values from the actual UI state.
- Open TeenyTool from the menu bar and choose Contrast Checker.
- Paste the foreground hex and background hex.
- Read the ratio and AA/AAA rows for normal and large text.
- Repeat the check for hover, focus, disabled, selected, error, and dark-mode states.
- Write down the result: ratio, threshold, UI state, text size assumption, and next action.
Common mistakes
| Mistake | Why it breaks the check | Better move |
|---|---|---|
| Testing against white by habit | The real component may sit on a tinted card, gradient, or image. | Use the actual rendered background behind the text. |
| Testing one state | Disabled, focus, selected, and hover states often use different opacity or color. | Check each state separately. |
| Trusting a borderline pass | Small rendering changes can push the pair below the threshold. | Improve the pair before handoff when the pass is fragile. |
| Using color as the only error signal | A contrast pass does not make color-only meaning accessible. | Add text, shape, iconography, position, or another visible cue. |
Sources checked
- TeenyTool claims were checked against the TeenyTool homepage and local Swift source for
ContrastCheckerView.swift,ColorMath.swift, and the color tool inventory. - W3C WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum).
- W3C WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast.
- TeenyApps Mac UI color accessibility checklist for the connected color handoff workflow.
- TeenyColor palette export guide for collecting sampled color values before contrast checks.
FAQ
What WCAG contrast ratio should normal text pass?
WCAG 2.2 sets the Level AA minimum for normal text at 4.5:1. Level AAA for normal text is 7:1.
What contrast ratio should large text pass?
WCAG 2.2 sets the Level AA minimum for large text at 3:1. Level AAA for large text is 4.5:1.
Does a passing contrast ratio guarantee accessible UI?
No. A passing ratio is a useful gate, but full accessibility still depends on text size, state, focus, semantics, keyboard behavior, and whether color is the only signal.
Check the ratio before review.
teenytool keeps color contrast, conversion, text tools, encoders, formatters, image tools, and small developer utilities in one local Mac menu bar app.