Color Contrast Checker
Enter your text and background hex codes below, and this WCAG contrast checker calculates the exact ratio and whether it passes accessibility standards.
About
About Color Contrast Checker (WCAG)
A color contrast checker runs the actual WCAG formula, based on each color's relative luminance, against your foreground and background hex codes to produce a precise contrast ratio rather than a subjective "does this look readable" guess. This wcag contrast checker tells you immediately whether that ratio clears the thresholds required for AA or AAA compliance.
The specific numbers matter here: WCAG AA requires a 4.5:1 contrast ratio for normal body text, dropping to 3:1 for large text, defined as 18 point or 14 point bold and larger. AAA, the stricter tier, pushes that up to 7:1 for normal text. A lot of trendy light-gray-on-white design choices fail AA by a wide margin without ever looking obviously wrong to a sighted designer without a visual impairment.
For government websites and many large organizations, meeting WCAG AA isn't optional, it's a legal requirement under accessibility laws in several countries. Testing your actual brand hex codes here, rather than assuming they're fine because they look fine on a bright monitor, is what catches a compliance issue before it becomes a legal one.
Enter your foreground and background hex codes and the tool calculates the exact contrast ratio immediately, with a clear pass or fail result shown separately for normal text, large text, and UI components, since the thresholds differ for each.
If a color combination fails, you can adjust either value with the built-in picker and watch the ratio update live until it clears the threshold you're targeting. Everything calculates locally, so unreleased brand colors or an agency client's new palette never get uploaded anywhere just to run this check.
FAQ
Frequently asked questions
What is WCAG?
The Web Content Accessibility Guidelines, an internationally recognized standard from the World Wide Web Consortium defining how to make digital content usable for people with visual, auditory, motor, or cognitive disabilities.
What contrast ratio is needed to pass WCAG AA?
Normal text needs at least a 4.5:1 ratio against its background. Large text, 18 point or larger, or 14 point bold, only needs 3:1, since bigger text remains legible at lower contrast.
What's the actual difference between AA and AAA?
AA is the baseline most commercial and public sites are expected to meet. AAA is considerably stricter, requiring a 7:1 ratio for normal text, and is typically reserved for specialized contexts like government or medical platforms where accessibility requirements go beyond standard compliance.
Can I test contrast for text sitting over a photo instead of a solid color?
This tool is built for solid hex codes. For text over an image, use an eyedropper to sample the lightest, or most contrast-conflicting, pixel directly behind the text, then test that specific hex value here instead.
Why do my brand colors keep failing the test?
Light pastels and soft grays, common in print branding, often fail badly on backlit digital screens even though they look fine in a logo file. Passing usually means darkening the text or lightening the background until the math clears the threshold.
Is my color palette or branding data stored anywhere?
No, the ratio calculation runs entirely locally in your browser. Hex codes you test, including unreleased brand colors, are never uploaded or stored externally.
Related tools
View all developer tools →Color Picker
Pick colors from an image with an eyedropper and check contrast ratios.
Open toolPalette Generator
Extract a color palette from any image and export it in one click.
Open toolHEX to RGB Converter
Convert colors between HEX, RGB, HSL and CMYK.
Open toolColor Name Finder
Find the closest named color for any HEX or RGB value.
Open tool