Color Contrast Checker (WCAG)
Check if two colors meet WCAG accessibility contrast standards.
Reviewed by the ToolNestr Editorial Team — July 2026
—
How contrast ratio works
The WCAG (Web Content Accessibility Guidelines) define contrast ratio as a measure of the difference in perceived luminance between two colors — typically text and its background. A higher ratio means more readable text, especially for users with low vision, color vision deficiency, or when viewing a screen in bright sunlight.
The ratio is always expressed as a single number, like 4.5:1, 7:1, or 21:1. It is calculated from the relative luminance of each color using the sRGB color space formula defined by the W3C. The scale ranges from 1:1 (no contrast, e.g. the same color on itself) to 21:1 (maximum contrast, e.g. black on white).
The formula
Per the WCAG 2.1 specification, relative luminance L for an sRGB color is:
where each linearized channel is:
The contrast ratio between two colors L1 (lighter) and L2 (darker) is:
Worked example
Take text color #595959 on a white background #ffffff.
Rlin = 0.321, Glin = 0.321, Blin = 0.321 → Ltext = 0.321
// White is always 1.0 in relative luminance
Lbg = 1.0
Contrast = (1.0 + 0.05) ÷ (0.321 + 0.05)
= ~7.0:1
A ratio of 7.0:1 passes WCAG AA (both normal and large text) and WCAG AAA (both normal and large text) — this is a very accessible color pair.
Common use cases
Designing accessible websites
When building a website, every text element — from body copy to navigation links, button labels, and placeholder text — must meet WCAG contrast requirements. Use this checker on your brand colors early in the design process instead of discovering a violation during a late-stage audit.
Checking brand colors
Marketing teams often choose colors for aesthetic reasons without considering accessibility. A brand’s primary blue on a white background might look fine but could fail AA for normal text. This tool helps you find accessible tints, shades, or complementary colors that preserve the brand identity while meeting the standard.
Meeting legal accessibility requirements
Many governments and public-sector organizations mandate WCAG 2.1 AA compliance by law (e.g. Section 508 in the US, EN 301 549 in the EU, the Accessibility for Ontarians with Disabilities Act). A contrast failure can be grounds for a compliance finding, so verifying every color combination is essential.
Email and document design
HTML emails and PDF documents also fall under accessibility guidelines. Whether you are designing a newsletter template, a data report, or a slide deck, checking contrast ratios ensures your content is readable by people using screen readers or who have low vision.
Tips for meeting WCAG contrast
Large text gets a lower threshold
The WCAG guidelines distinguish between normal text and large text because larger characters are inherently easier to read. Large text is defined as at least 18 point (24 pixels) or 14 point (18.66 pixels) bold. For large text, AA requires only 3:1 instead of 4.5:1, and AAA requires 4.5:1 instead of 7:1. This means a slightly lower-contrast color combination may still be acceptable for headings and display text even if it fails for body copy.
Never rely on color alone
Even if your contrast ratio passes, you must not use color as the only visual means of conveying information (e.g. red text for errors, green for success). Add icons, underlines, patterns, or text labels so that users who cannot perceive the color difference still understand the message. This is WCAG success criterion 1.4.1.
Test on real screens
A passing ratio calculated in a tool is a strong signal, but real-world factors affect perceived contrast: screen brightness, ambient lighting, anti-aliasing, and font weight. For critical text (legal disclaimers, medical information), aim well above the minimum — 7:1 or higher — to ensure readability in adverse conditions.
Include hover and focus states
Interactive elements like links and buttons change color on hover, focus, and active states. Each of those states must independently meet the contrast requirement against the background. Use this checker to validate every state in your component design system, not just the resting state.
Related tools
Frequently asked questions
What ratio do I need?
WCAG AA needs 4.5:1 for normal text, 3:1 for large text; AAA needs 7:1 and 4.5:1.
What counts as large text?
Roughly 18pt (24px) or 14pt (18.66px) bold and larger.
Does this guarantee accessibility?
Contrast is one factor; full accessibility also covers structure, alt text, and keyboard use.
How is contrast ratio calculated?
It uses the WCAG relative luminance formula for each color, then compares them.