About the Contrast Checker (WCAG)
Text that looks fine to a designer on a bright monitor can be genuinely unreadable for someone with low vision, color blindness, or just a phone screen in direct sunlight. The Web Content Accessibility Guidelines (WCAG) define exact contrast ratio thresholds for this reason, and this checker calculates the real ratio between any two colors and tells you plainly whether that combination passes AA or AAA for normal and large text.
How it works
Pick a text color and a background color using the pickers or by typing hex codes directly. The tool calculates the relative luminance of each color using the WCAG formula, then derives the contrast ratio between them — a number between 1:1 (no contrast at all) and 21:1 (pure black on pure white). That ratio is then checked against the four WCAG thresholds: AA and AAA for normal text, and the more lenient AA and AAA thresholds for large text (18pt+ or 14pt+ bold), with a clear pass or fail shown for each.
Common use cases
- Checking body text and background color combinations before shipping a design
- Verifying button label contrast against a colored button background
- Auditing an existing website's color palette for accessibility compliance
- Choosing link colors that are readable against both light and dark surfaces
- Meeting WCAG 2.1 AA requirements for public sector or enterprise accessibility audits
Tips for best results
If a combination fails, the fastest fix is usually to darken the darker color or lighten the lighter one rather than changing the hue entirely — this preserves brand feel while boosting the ratio. Large, bold text has a lower bar to clear than small body text, so if you're stuck near the failure line, consider bumping the font size or weight instead of only adjusting color.
Frequently asked questions
For normal-sized text, WCAG AA requires a contrast ratio of at least 4.5:1. For large text — roughly 18pt regular or 14pt bold and above — the requirement drops to 3:1.
AAA is the stricter standard: 7:1 for normal text and 4.5:1 for large text. AA is the widely adopted baseline most sites target; AAA is recommended for content where readability is especially critical, like government or medical information.
No — contrast ratio is calculated from the luminance difference between the two colors and is symmetrical, so swapping which one is 'text' and which is 'background' gives you the same ratio.
AA is the standard required by most accessibility laws and guidelines worldwide, including the ADA and EN 301 549, so passing AA is generally sufficient. Aim for AAA on body copy if your audience skews toward low-vision users.
This tool checks luminance-based contrast, which is a different concern from color blindness. To see how a color pair looks to someone with a color vision deficiency, use the separate Color Blindness Simulator tool.