Color contrast is the difference in relative luminance between foreground content and its background. WCAG 2.2 Success Criterion 1.4.3 defines minimum ratios for text; a quick visual judgment is not a reliable substitute for calculating the pair.
WCAG 2.2 contrast thresholds
- AA, normal text: at least 4.5:1.
- AA, large text: at least 3:1. Large means at least 18 point, or 14 point bold.
- AAA, normal text: at least 7:1.
- AAA, large text: at least 4.5:1.
These are threshold values, not rounded targets. A result just under the threshold does not pass. WCAG defines additional exceptions, including text that is part of an inactive control, incidental, or part of a logo; check the criterion rather than assuming every case is covered by the table.
A practical color-pair check
- Use the actual foreground and background values from the interface.
- Check normal or large text using its rendered size and weight.
- Fix a failing pair by changing one or both colors, then test again.
- Verify the result in the component, including hover, focus, disabled, and error states.
For meaningful non-text indicators such as control boundaries and state graphics, WCAG 2.2 has a separate 3:1 requirement in Success Criterion 1.4.11. A text contrast result does not cover that check.
What a contrast checker can and cannot tell you
A calculator tests the two color values you enter. It cannot inspect an entire page, identify every text state, account for complex images behind text, or confirm keyboard and screen-reader behavior. Treat a passing ratio as one useful check, not a complete accessibility audit.
Read the normative guidance for WCAG 2.2 Success Criterion 1.4.3 and Success Criterion 1.4.11. You can also test a foreground and background pair.