What is the difference between WCAG AA and AAA?

WCAG AA (Level 2) is the legally mandated standard in most countries for public-facing websites. It requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA (Level 3) is the enhanced standard requiring 7:1 for normal text and 4.5:1 for large text. Most design teams target AA throughout and apply AAA selectively to primary reading content like body copy and legal text.

How is contrast ratio calculated?

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker. Relative luminance linearizes the sRGB color space using a gamma correction formula. The scale runs from 1:1 (identical colors, no contrast) to 21:1 (black #000000 on white #FFFFFF, maximum contrast). A ratio of 4.5:1 means the lighter color is 4.5× more luminous.

Does this apply to icons?

Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 minimum contrast ratio for user interface components: icons that convey meaning, input field borders (to distinguish from the background), focus indicators (tab focus rings), toggle switch boundaries, and chart elements. The same luminance formula applies. Purely decorative images and disabled UI components are exempt.

What contrast ratio does Google Material Design use?

Google Material Design 3 (Material You) requires a minimum 4.5:1 contrast for body and label text — matching WCAG AA exactly. Its dynamic color system generates color schemes that automatically satisfy this threshold. Apple's Human Interface Guidelines also recommend 4.5:1 minimum. Note: WCAG 3.0 (in active development) plans to replace the current luminance-ratio formula with APCA (Advanced Perceptual Contrast Algorithm), which better models human visual perception.

What counts as large text in WCAG?

Large text is at least 18pt (approximately 24px) at normal weight, or 14pt (approximately 18.66px) at bold weight. Large text only needs a 3:1 contrast ratio for WCAG AA and 4.5:1 for AAA — the lower threshold exists because larger letterforms remain legible at lower contrast. If your font size sits between these thresholds, check whether it is rendered bold to determine which requirement applies.

Does this contrast checker send my colors to a server?

No. The contrast ratio is calculated entirely in your browser using JavaScript. Nothing is uploaded, logged, or stored — not even temporarily. It is safe to check colors from unreleased designs, internal brand palettes, or client projects. The tool works fully offline once the page is loaded.

developer

Free Color Contrast Checker — WCAG AA & AAA Accessibility

Color contrast ratio measures the luminance difference between a foreground (text) color and a background color. WCAG 2.1 requires a minimum 4.5:1 for normal text (AA) and 7:1 for AAA. This tool calculates the exact ratio and shows pass/fail status for both standards instantly as you type.

Free — No SignupRuns in BrowserData Never UploadedPopular tool

developer

Check foreground/background color contrast for WCAG AA and AAA compliance.

Calculates the exact WCAG relative-luminance contrast ratio
Pass/fail for WCAG AA and AAA — normal text, large text, and UI components
Accepts hex color input with live color picker
Live preview renders actual text on the chosen background color
Swap foreground and background colors with one click
Covers SC 1.4.11 Non-text Contrast (icons, borders, focus rings)
Client-side only — no colors are uploaded or stored

Features

Everything you need in one Color Contrast Checker (WCAG)

Accurate contrast ratio

Uses the official WCAG relative-luminance formula to return the exact ratio between 1:1 and 21:1 — the same math browsers and audit tools apply.

AA and AAA pass/fail

Shows compliance for every WCAG threshold at once: normal text, large text, and the 3:1 minimum for icons and UI components under SC 1.4.11.

Live text preview

See your chosen colors rendered as real large and normal text so you can judge legibility, not just the number.

Hex & color picker input

Enter a hex code directly or use the browser color picker — the contrast ratio recalculates instantly on every change.

How It Works

How to use Color Contrast Checker (WCAG)

Enter foreground color

Type your text color as a hex code, RGB, or HSL value.

Enter background color

Type your background color. The contrast ratio updates in real time.

Check WCAG results

See the ratio and pass/fail for WCAG AA (4.5:1) and AAA (7:1) for normal and large text.

Format Comparison

WCAG 2.1 contrast requirements by content type

Content	Level AA	Level AAA
Normal text (under 18pt / 24px)	4.5:1	7:1
Large text (18pt+ / 24px+, or 14pt+ bold)	3:1	4.5:1
UI components & graphical objects	3:1	3:1
Incidental / disabled / logo text	No requirement	No requirement

Troubleshooting

How to fix common syntax errors

Most “invalid JSON” failures come from a small set of mistakes. Paste the failing JSON above, click Validate, and the tool points you at the exact line and column.

Non-hex color formatrgb(28, 35, 48) or "navy"

Convert to 6-digit hex first. In Chrome DevTools Styles panel, type any CSS color and hover the swatch — DevTools shows the hex equivalent. Alternatively, use CSS `color-mix()` or a color converter.

3-digit hex shorthand fails#fff or #369

Expand to 6 digits: #fff → #ffffff, #369 → #336699. Each single digit repeats to form a pair. The tool requires full 6-digit hex input.

Semi-transparent background colorrgba(0,0,0,0.5) on white

WCAG contrast applies to the final rendered color, not the CSS value. Composite the alpha over the actual page background first: a 50% black on white renders as #808080. Calculate contrast against that composited hex.

Ratio passes but text still looks unreadable5:1 contrast, thin light font

The luminance formula does not account for font weight, letterform size, or hue contrast. Increase contrast above the minimum, use at least 16px body text, and prefer regular or medium weight over thin fonts.

Text on a gradient backgroundWhite text over blue-to-purple gradient

WCAG requires checking contrast at the point of lowest contrast — typically the lightest part of the gradient. Measure at both ends and use the worst ratio. If either end fails, darken the gradient or add a semi-transparent overlay.

Focus ring fails non-text contrastDefault browser outline on light background

SC 1.4.11 requires 3:1 for focus indicators. Default outlines often fail. Use a 2px solid outline in a color that achieves 3:1 against both the focused element background and the surrounding page background.

FAQ

Frequently asked questions

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between foreground text and background color to ensure readability for users with low vision or color blindness. WCAG 2.1 Level AA requires 4.5:1 for normal-sized text (below 18pt or 14pt bold) and 3:1 for large text. Most legal accessibility standards worldwide — US ADA, EU EN 301 549, UK Equality Act — reference WCAG AA as the required level.

Related Tools

You might also need

Strong Password Generator

Generate cryptographically secure passwords instantly.

PNG to WebP Converter

Convert PNG images to WebP format online. Reduce file size by up to 30% with no quality loss.

JSON Formatter & Validator

Format, validate, and minify JSON instantly in your browser.

SQL Formatter

Format and beautify SQL queries with consistent indentation and keyword casing.

Regex Tester

Test regular expressions against strings with live match highlighting.

.htaccess Generator

Generate Apache .htaccess rules for redirects, HTTPS, caching, and security headers.

.env File Generator

Generate a boilerplate .env file for Laravel, Next.js, Node.js, or Docker.

Base64 Encoder / Decoder

Encode and decode Base64 strings instantly in your browser.

References

Need this built into your product?

We design and build custom software — SaaS platforms, MVPs, AI agents, and web apps.

Let's talk

Custom SaaS Development

End-to-end SaaS — API, auth, billing, dashboard, deployment.

MVP Development

Working product in 6–8 weeks. Fixed price, committed timeline.

AI Agent Development

Custom AI agents and workflow automation for your stack.

Web App Development

Full-stack web apps built with modern frameworks and best practices.

Have a project in mind?

We turn ideas into production-ready software — SaaS, web apps, mobile, and AI agents. Fixed price. Committed timeline. No surprises.