Aa
Closest passing text color#112A468.42:1
Accessibility tool
WCAG color contrast checker.
Compare foreground and background colors, preview real text sizes and weights, check AA and AAA targets, and apply closer accessible alternatives.
Contrast checker
Test text and interface colors with live accessibility guidance.Contrast ratio8.42:1Normal text
The quick brown fox jumps over the lazy dog.
Example button previewAA normal text: PassAA large text: PassAAA normal text: PassAAA large text: PassYour current text: Pass
Aa
Closest passing background#ACC8E58.42:1
Recommended accessible color pairs
Ready-to-use combinations that pass WCAG AA for normal text.
AaReadable color pair
Body text
Closest AA correction
#112A46 on #ACC8E58.42:1AaReadable color pair
Interfaces and articles
Accessible neutral
#0F172A on #F8FAFC17.06:1AaReadable color pair
Primary buttons
Confident blue
#FFFFFF on #1D4ED86.70:1AaReadable color pair
Success messages
Reliable green
#FFFFFF on #1665347.13:1AaReadable color pair
Warnings and callouts
Warm highlight
#422006 on #FEF3C713.09:1Accessible color pairs
Check contrast before a color reaches production
A contrast ratio describes the luminance difference between foreground and background colors. Use the result to improve text, controls, links, focus indicators, and other interface elements.
How to use this tool
- 1Choose foreground and background colors
Enter HEX values or use the visual pickers for the text and surface you want to evaluate.
- 2Set the text context
Select a representative font size and weight so the preview reflects the intended component.
- 3Review AA and AAA results
Check normal-text, large-text, and interface guidance rather than relying on a single pass badge.
- 4Apply or copy a recommendation
Use a suggested accessible pair, copy the values, and continue testing the complete palette.
Useful for
- Body text and page backgrounds
- Buttons, links, labels, and form controls
- Design-system token validation
- Accessible palette reviews
How to interpret the ratio
Higher ratios indicate a larger luminance difference. A passing pair may still need clear labels, focus states, icons, or patterns so meaning is not communicated by color alone.
Important limitations
- Contrast checking covers individual pairs, not the accessibility of an entire product.
- Color must not be the only visual signal for errors, selection, or status.
- Final interfaces should be tested with keyboard navigation, zoom, real content, and assistive technologies.
Common questions
Answers before you export.
What is the difference between AA and AAA?
AAA uses a higher contrast target than AA. The appropriate target depends on the text size, component, product requirements, and accessibility policy.
Does a passing contrast ratio make a page accessible?
No. Contrast is one requirement among many. Structure, labels, keyboard access, focus visibility, alternative text, and interaction behavior also matter.
Can I test a whole palette?
Yes. Open the Palette Readiness Score and Compatibility Matrix in the Color Playground to evaluate many foreground and background combinations together.
Color Guides
Browse all guides Learn with practical color guides
Color Contrast Ratio: A Practical WCAG GuideUnderstand AA, AAA, normal text, large text, and UI boundaries.How to Build an Accessible Color PaletteConnect contrast with roles, focus, states, and non-color cues.How to Design Colors for Dark ModeTest readable text, accents, and component states on dark surfaces.