100% free · Runs 100% in your browser · No signup needed
A WCAG Contrast Checker measures how easily text stands out against its background, using the official formula from the Web Content Accessibility Guidelines (WCAG). It computes the contrast ratio between any two colors — a number from 1:1 (no contrast at all) to 21:1 (black on white, the maximum possible) — and tells you whether the combination passes the AA and AAA accessibility levels. Designers, developers, and site owners use it to make sure their pages are readable for everyone, including the hundreds of millions of people with low vision, color blindness, or situational limitations like a sunlit phone screen.
Low-contrast text is one of the most common accessibility failures on the web. Light gray body text on a white background may look elegant on a designer's calibrated monitor, but it becomes unreadable on a cheap laptop, an aging tablet, or for anyone with reduced contrast sensitivity. Search engines and accessibility audits flag these issues, and in many countries, accessibility compliance is a legal requirement for commercial websites. Our free checker takes the guesswork out: enter your foreground and background colors and you get an instant, honest verdict.
Everything runs entirely in your browser — no uploads, no sign-up, no data sent anywhere. The math follows the WCAG definition of relative luminance exactly, so the ratios you see here match what professional accessibility tools report. Whether you are picking a button color, auditing an existing page, or settling a debate between two brand shades, you get a clear answer in seconds.
Checking a color pair takes less than a minute:
Launching a new site or refreshing an old one? FistHost web hosting starting at just $0.99 per month comes with a free domain, fast SSD servers, and one-click installs — everything you need to publish a fast, accessible website without overspending.
WCAG defines three tiers that matter in practice. Normal text (below 18pt, or 14pt bold) needs at least 4.5:1 for AA, the level most organizations target. Large text needs only 3:1 for AA, because bigger glyphs are easier to read at lower contrast. AAA, the strictest level, demands 7:1 for normal text and 4.5:1 for large text — excellent for body content but hard to achieve with saturated brand colors.
Since WCAG 2.1, non-text elements have their own rule: the 3:1 minimum also applies to meaningful UI components and graphical objects — form borders, focus indicators, icons that convey information, and chart elements. Our checker evaluates all three categories at once, so one test covers your text, your buttons, and your form fields. If a combination passes 4.5:1, you are safe for text everywhere on the page.
Web designers validating a new palette before handoff, front-end developers checking button and link colors during builds, content editors who pick heading colors in a CMS, brand managers updating corporate guidelines, and anyone responding to an accessibility audit or legal request. If your site has text on a colored background — and every site does — this tool is part of the job.
For body text, aim for 4.5:1 or higher — that meets WCAG AA, the widely accepted standard. Logos and decorative text are exempt from the requirement, but making them legible is still good practice.
AA is the standard conformance level (4.5:1 for normal text, 3:1 for large text and UI components). AAA is enhanced (7:1 / 4.5:1). Most policies and laws reference AA; AAA is aspirational, especially for saturated brand colors.
Yes. Contrast is a relationship between two colors, not a direction — the same math applies to light text on dark backgrounds. The preview box and the page itself adapt to your theme.
Not necessarily. Try it as an accent (large headings, icons) where 3:1 suffices, darken it for body text, or pair it with a darker background. The lighten/darken helpers find the smallest change that passes.
Completely. All computation happens locally in your browser — no colors, no page data, and no usage statistics ever leave your device.
The most frequent failure is decorative gray text — captions, timestamps, and helper text set in #999 or lighter on white, which rarely reaches 4.5:1. Next comes text on brand imagery: a headline over a photo passes on the dark part of the image and fails on the light part, so always test the worst-case region or add a scrim. Disabled buttons are technically exempt, but users still need to read their labels — keep disabled states above 3:1 even though the letter of the law does not require it.
Another trap is relying on bold or size alone. Making failing text bold does not raise its ratio; it only qualifies it for the large-text threshold (3:1) if it meets the size definition. Similarly, focus indicators are a contrast requirement too — a 1px outline in a color close to the page background fails the 3:1 non-text rule and leaves keyboard users lost. Run every interactive state through the checker, not just the resting design.
Keep refining your design with these free FistHost tools: Color Converter for hex/RGB/HSL conversions, CSS Minifier to ship your stylesheet lean, Open Graph Checker to verify how your pages look when shared, and Readability Checker to keep your copy as clear as your colors.
Ready to put an accessible, professional site online? FistHost web hosting starting at just $0.99 per month includes a free domain, one-click app installs, and dependable support — the affordable foundation for a website that looks great and works for everyone.
No reviews yet. Be the first to review this tool!
Reviews are protected by captcha and moderated before they appear.