What this tool does
Contrast Checker compares foreground and background colors against WCAG contrast ratios.
← All Tools
♿ Contrast Checker / WCAG
Check foreground/background color contrast against WCAG AA and AAA text guidelines. Preview normal text, large text, and UI colors before shipping.
Readable preview text
This is normal body text. WCAG AA normal text needs 4.5:1 contrast; large text needs 3:1; AAA normal text needs 7:1.
Why it is useful
It helps catch low-contrast text before publishing UI, documents, marketing pages, or dashboards.
How it works
The browser calculates the luminance contrast ratio between selected colors and compares it with common WCAG thresholds.
Best input
Use the exact text and background colors from the real design.
Accessibility tip
Check normal text, large text, disabled states, links, and buttons separately.
Privacy note
Contrast checking happens locally in your browser.
Important limitation
Contrast ratio is important, but accessibility also depends on font size, weight, state, motion, labels, and assistive technology support.
Quick answers
What passes WCAG AA?
Normal text generally needs 4.5:1; large text generally needs 3:1.
Do brand colors always pass?
No. Brand colors often need accessible variants for text.
Common Use Cases
Check accessible text before launch
Verify that landing page, button, and form colors pass WCAG contrast thresholds.
Pick safer brand color combinations
Test foreground and background pairs while designing a palette or component library.
Copy CSS for approved combinations
Use the generated CSS once a color pair passes the target accessibility level.
CSS Visual Studio workflow
Move between color conversion, palettes, gradients, contrast checks, shadows, radii, buttons, and glassmorphism while keeping generated CSS local to the browser.