The quick answer
Choose the text color and the background color that will actually appear together, then calculate their contrast ratio. For WCAG 2.2 Level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. Level AAA uses 7:1 for normal text and 4.5:1 for large text.
You can enter both colors in the Color Contrast Checker and see all four results at once. The calculation runs in your browser.
Passing those thresholds is useful, but it does not mean a page or website is fully WCAG compliant. Color contrast is one requirement within a much broader accessibility standard.
What a contrast ratio measures
A contrast ratio compares the relative luminance of a foreground color with its background. The scale runs from 1:1 for identical colors to 21:1 for black against white.
The calculation is about light and dark contrast, not whether two colors have different names. Blue text on a red background may look dramatically different but can still have poor luminance contrast. This is also why simply converting a design to grayscale can sometimes reveal readability problems.
The W3C explains the Level AA text thresholds in Success Criterion 1.4.3. Values below a threshold do not pass by being rounded up: 4.49:1 is still below 4.5:1.
How to check two colors
1. Identify the real foreground and background
Use the final CSS colors, not a rough visual guess. If text sits on a solid background, copy both hex values. The Color Picker can help when you are starting from an image, while the HEX to RGB Converter is useful when another workflow needs RGB values.
2. Enter both colors
Open the contrast checker and enter six-digit hex values such as #111827 and #FFFFFF. The preview helps confirm that foreground and background have not been reversed.
3. Read the ratio and four results
The tool reports the exact ratio and checks:
- AA for normal text: 4.5:1 or higher
- AA for large text: 3:1 or higher
- AAA for normal text: 7:1 or higher
- AAA for large text: 4.5:1 or higher
WCAG defines large-scale text as at least 18 point, or at least 14 point when bold, with equivalent sizes for other writing systems. Thin or unusual typefaces may remain difficult to read even when their underlying colors technically pass.
4. Adjust the weaker color
If the pair fails, make the dark color darker, the light color lighter, or both. Recheck the final values instead of assuming a small change is enough.
Test real interface states, not one static sample
A palette can pass in a design file and fail in the finished interface. Check text in each state where the adjacent colors change:
- default, hover, focus, active and disabled states
- cards placed on different page sections
- text over gradients or photographs
- placeholder, helper and validation text
- light and dark themes
- responsive layouts where text moves over another part of an image
For text over an image, test the least favorable area the text may cover. A translucent overlay can help, but the combined rendered colors still need testing.
Contrast is not the same as complete accessibility
A passing text/background ratio addresses one success criterion. It does not test whether someone can use the page with a keyboard, understand heading structure, operate controls with a screen reader, see focus, zoom and reflow content, or obtain alternatives for images and media.
It also does not cover every color-related requirement. Important controls and graphical objects can be subject to non-text contrast requirements, and information should not rely on color alone. Error messages, for example, need more than a red outline: include clear text or another programmatically determinable cue.
Treat the contrast checker as a focused design and QA tool. A complete accessibility review needs automated checks, keyboard testing, assistive-technology testing where appropriate, and human judgment across all applicable WCAG criteria.
A practical review routine
- Check body text and links against every background they use.
- Check headings, labels, hints, errors and placeholder text.
- Check hover, focus, selected and dark-theme variants.
- Review non-text controls and focus indicators separately.
- Test keyboard operation, semantics, alternatives, zoom and reflow.
- Recheck after design-token or theme changes.
Color contrast is an excellent early filter because it is objective and quick to measure. It works best as one repeatable step inside a broader accessibility process.
Frequently asked questions
Does black text on white always pass?
Yes, pure black on white has the maximum 21:1 ratio. You do not need to use pure black, however; many near-black colors also pass comfortably and can fit a softer visual system.
Can I rely on a browser screenshot?
Use the actual CSS values when possible. Screenshots can be altered by scaling, compression, color profiles and anti-aliasing, so sampled pixels may not match the authored colors exactly.
Is AAA required for every website?
The required conformance level depends on the applicable policy, contract or regulation. AAA can still be a useful target for important reading experiences even when Level AA is the formal requirement.
Does the tool certify WCAG compliance?
No. It calculates color contrast for the two values you enter. It does not inspect a complete website or certify conformance.