WCAG Color Contrast Checker
Enter a text color and a background color to get their WCAG contrast ratio instantly. The tool shows AA and AAA pass or fail for normal and large text and previews the colors live, all in your browser.
How to check color contrast
- Pick or type your text (foreground) color as a HEX value.
- Pick or type the background color it sits on.
- Read the contrast ratio and check the AA and AAA badges for normal and large text.
Examples
Black text on white (maximum contrast)
foreground #000000, background #ffffff
21:1, passes AA and AAA for all text sizes
Gray text on white (borderline)
foreground #808080, background #ffffff
3.95:1, fails AA normal but passes AA large
Frequently asked questions
What is a contrast ratio?
It is a number from 1:1 to 21:1 that compares the relative luminance of two colors. Higher means more contrast. WCAG uses the formula (Llight + 0.05) / (Ldark + 0.05).
What do WCAG AA and AAA mean?
They are accessibility conformance levels. AA is the common legal and design baseline. AAA is the strictest level, used when the highest readability is required.
What is the 4.5:1 rule?
Normal body text needs a contrast ratio of at least 4.5:1 to pass WCAG AA. To pass the stricter AAA level, normal text needs at least 7:1.
What counts as large text?
Text that is at least 18pt (about 24px), or 14pt (about 18.66px) when bold. Large text passes AA at 3:1 and AAA at 4.5:1, so it can use lower contrast.
Why does contrast matter for accessibility?
Low contrast text is hard to read for people with low vision or color vision deficiency, and for everyone in glare or on poor screens. Meeting WCAG keeps content readable and helps with compliance.
Are my colors sent to a server?
No. The contrast ratio is computed entirely in your browser, so the colors you enter never leave your device.
Related tools
CSS Clamp Generator
Generate a responsive CSS clamp() value for fluid font sizes and spacing. Set min and max sizes plus viewport bounds and copy the result.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.
Base64 Decode
Decode Base64 to plain text online. Paste a Base64 or base64url string and get instant UTF-8 output. Free, fast and runs in your browser.