TechCompare LogoTechCompare
← Back to Home

Contrast Checker

Check color contrast for accessibility.

0%
100%
Contrast Ratio
21.00:1

Large Text

Normal text sample.

AA Normal
Normal text (< 18pt)
✓
AA Large
Large text (≥ 18pt)
✓
AAA Normal
Normal text (< 18pt)
✓
AAA Large
Large text (≥ 18pt)
✓
UI Components
Graphical objects
✓

About this tool

The Contrast Checker calculates the WCAG 2.1 contrast ratio between any two colours and tells you whether the pairing passes accessibility standards at AA, AAA, or fails outright. Paste a foreground and background hex value (or use the pickers) and you'll get the exact ratio, like 4.52:1 or 7.1:1, plus a pass/fail for normal text and large text at both tiers. A live preview pane shows how the combination actually looks, so you're not judging purely by number.

Use it every time you pick text colours, link styles, button backgrounds, or error messages. Even designers with strong colour intuition routinely underestimate how hard mid-grey text on white is for anyone with less-than-perfect vision, the checker turns that guess into a measured number that holds up in an accessibility audit or legal review.

WCAG thresholds

AA requires 4.5:1 for body text and 3:1 for large text (18pt+, or 14pt+ bold). AAA requires 7:1 and 4.5:1 respectively. Non-text UI (icons, borders, focus rings that carry meaning) needs 3:1 against its adjacent background under SC 1.4.11.

When to use it

Run every text and button colour through it before shipping, especially for brand-heavy palettes where muted tints on tinted backgrounds often sneak under AA. Pair with the Color Picker to dial in the exact hue or lightness adjustment needed to cross the threshold without changing the brand feel.

Frequently asked questions

What is a WCAG AA contrast ratio?
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+, or 14pt+ bold). It's the baseline most regulators and corporate accessibility policies reference.
What's the difference between WCAG AA and AAA?
AAA is stricter: 7:1 for normal text and 4.5:1 for large text. AAA is the enhanced target for content aimed at people with low vision, but it's harder to hit with brand colours. AA is the realistic minimum for general web content.
How do I check the contrast of my brand colours?
Enter the foreground and background hex values. The calculator returns the exact ratio (like 7.1:1) plus a pass/fail for AA normal, AA large, AAA normal, and AAA large. Both directions are checked, reversing fg/bg gives the same ratio, which is useful for testing both light and dark modes.
Does white text on yellow fail WCAG?
Almost always, yes. #FFFFFF on #FFD700 (gold) has a contrast ratio of about 1.08:1, failing every WCAG tier. You'd need dark text on yellow backgrounds, or a much darker yellow for text on white.
What is contrast ratio and how is it calculated?
Contrast ratio is the ratio of relative luminance between two colours, from 1:1 (identical) to 21:1 (pure black on pure white). It's computed from sRGB luminance with a specific gamma correction defined in the WCAG 2.1 spec, which is the same formula Chrome DevTools and every accessibility audit tool uses.
Do I need to pass WCAG for icons and logos?
Icons that convey meaning (status indicators, navigation chevrons) need 3:1 against their background under WCAG 2.1 SC 1.4.11. Decorative icons and brand logos are exempt, but anything the user needs to perceive for the page to function still needs contrast.

Related tools

Color Picker

Pick colors and convert between HEX, RGB, HSL, CMYK, and HSV formats.

Use tool ➜

PPI & Retina Calculator

Calculate PPI and Retina distance for your display.

Use tool ➜

Screen Size Comparison

Compare screen sizes side-by-side to visualize physical dimension differences.

Use tool ➜

JSON Formatter

Validate, format, and minify JSON data with syntax highlighting.

Use tool ➜