Aa
The quick brown fox
Strong contrast17.72:1
- Foreground
- #17181D
- Background
- #FFFFFF
Normal text AA Pass Normal text AAA Pass
Free accessibility color tool
Free Color Contrast Checker for WCAG AA & AAA
Check foreground and background colors instantly. Review every WCAG result, preview real text, and copy production-ready CSS.
- No sign-up
- Instant results
- Runs in your browser
Results you can understand
Built on WCAG 2.2 luminance and contrast-ratio formulas.
Live result
Check your color contrast
WCAG 2.2
HEX · #RGB or #RRGGBB
HEX · #RGB or #RRGGBB
Contrast ratio
17.72:1Passes WCAG AAA for normal text
Calculated from the current foreground and background colors.
Normal Text AABody text under 24px
≥ 4.5:1 PassNormal Text AAAEnhanced body-text contrast
≥ 7:1 PassLarge Text AA24px+, or 18.5px+ bold
≥ 3:1 PassLarge Text AAAEnhanced large-text contrast
≥ 4.5:1 PassUI Components & Graphics AAControls and meaningful graphics
≥ 3:1 PassLive preview
See the colors in context
Normal text · 16px
The quick brown fox jumps over the lazy dog.
Large text · 24px
The quick brown fox jumps over the lazy dog.
UI sample
color: #17181D;
background-color: #FFFFFF;Free to use
No sign-up required
Local-first calculation
WCAG-based results
Real output
A clear answer, not just a number
Each result uses the unrounded contrast ratio for its decision, so a displayed 4.50:1 never hides a value that falls below the threshold.
Aa
The quick brown fox
Needs attention4.18:1
- Foreground
- #767C8A
- Background
- #FFFFFF
Normal text AA Fail Normal text AAA Fail
Three simple steps
From color pair to usable CSS
Make the accessibility decision while the color context is still in front of you.
- 01
Enter two colors
Type a foreground and background HEX value, or use the color pickers.
- 02
Review every result
Compare normal text, large text, and UI thresholds without decoding a score.
- 03
Preview and copy
See the pair in realistic contexts, then copy clean CSS for implementation.
Why AdaptiveView
Built for the decision after the check
A contrast ratio matters only when it helps you understand the standard, fix the interface, and keep moving.
Instant, explainable results
See each AA and AAA threshold separately, with the rule behind every pass or fail.
Developer-ready output
Move from a checked color pair to production-ready CSS in one copy action.
Private by default
Your color values are calculated locally in your browser. No account is needed.
Built for access
Use the checker with a keyboard, screen reader, zoom, or high-contrast settings.
Made for real interfaces
Check contrast where it matters
Use the same transparent thresholds across design exploration, content review, development, and accessibility testing.
Check a color pairUI text and backgrounds
Check body copy, labels, headings, and supporting text before handoff.
Buttons and form controls
Review meaningful boundaries, icons, states, and control labels.
Design-system tokens
Validate semantic color pairs before they spread across components.
Marketing graphics
Test the essential words and actions inside social and campaign visuals.
The standard, in plain language
Color contrast questions
Understand what each threshold covers—and what a single contrast check cannot prove.
Ask another questionWhat is a good contrast ratio?
For WCAG 2.2, normal text needs at least 4.5:1 for Level AA and 7:1 for Level AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA. A higher ratio generally makes text easier to distinguish.
What is the difference between WCAG AA and AAA?
AA is the widely used accessibility target for most digital products. AAA applies stricter contrast thresholds. Not every type of content can meet every AAA criterion, so use the separate result rows to understand the relevant target.
What counts as large text?
WCAG defines large text as at least 18pt (about 24px), or at least 14pt (about 18.5px) when bold. Text below those sizes uses the normal-text thresholds.
Do UI components need 4.5:1 contrast?
Not usually. Meaningful visual information in controls and graphics generally needs at least 3:1 against adjacent colors. Text inside the control still follows the applicable text contrast requirement.
Does passing this test mean my whole website is WCAG compliant?
No. This checker evaluates one color pair against specific contrast criteria. A complete accessibility review also covers structure, keyboard use, focus, names and labels, alternatives, motion, errors, and more.
Are my color values stored?
No. The contrast calculation runs in your browser. AdaptiveView does not require an account or send these color values to a server.