Color Contrast Checker: Pass WCAG AA and AAA

To check color contrast for accessibility, measure the ratio between your text and background colors and compare it to WCAG thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, or 7:1 and 4.5:1 at the stricter AAA. A contrast checker computes the exact ratio using the official relative-luminance formula and shows pass/fail badges instantly.

Here's what those numbers mean, how to test a color pair, and why contrast is one of the highest-impact accessibility fixes you can make.

Why contrast matters and who it helps

Low-contrast text is one of the most common accessibility failures on the web, and it affects far more people than you might think — anyone with low vision, aging eyes, color deficiency, or simply a phone screen in bright sunlight. Meeting WCAG contrast levels isn't just a legal checkbox for many organizations; it directly widens the audience that can comfortably read your product. A checker takes the guesswork out by grading each color pair against the same criteria auditors use, so you catch problems while designing rather than after a complaint. It's essential for anyone shipping a public website, but it's just as valuable for slide decks, email newsletters and data dashboards where a subtle gray-on-white label can quietly become unreadable. Because the ratio is a hard number, it also settles debates: instead of arguing about whether text is dark enough, you can point to a measured 3.8:1 that fails AA and adjust with confidence.

How to check contrast in your browser

1. Pick or paste the foreground (text) color.
2. Pick or paste the background color.
3. Read the exact contrast ratio and the WCAG AA/AAA badges for normal and large text.
4. Judge the live sample text rendered in your real colors, and hit Swap to preview the reversed arrangement.

WCAG contrast thresholds at a glance

Knowing the exact targets helps you decide when a color is safe. This table sums up the requirements.

Level	Normal text	Large text	UI & graphics
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	3:1

Large text means at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold. Most teams target AA as the practical baseline and reserve AAA for reading-heavy body content.

Key features and benefits

• Exact WCAG 2.x contrast ratio calculation.
• AA and AAA badges for both normal and large text.
• Live sample text rendered in your chosen colors.
• One-click foreground/background swap.
• HEX input and visual pickers.
• Free, private and client-side — ideal for checking unreleased brand palettes without uploading anything.

Try the Contrast Checker now — it's free and runs entirely in your browser.

Frequently asked questions

What contrast ratio does WCAG AA require?

At least 4.5:1 for normal text and 3:1 for large text (18pt/24px regular, or 14pt/18.66px bold). User interface components and meaningful graphics also need 3:1 against adjacent colors.

What does WCAG AAA require?

AAA, the strictest level, wants 7:1 for normal text and 4.5:1 for large text. It's recommended for body copy in reading-heavy products, though many organizations treat AA as the practical legal and accessibility baseline.

How is the contrast ratio calculated?

Each color is converted to relative luminance with the sRGB formula, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Results range from 1:1 for identical colors to 21:1 for black on white.

Does swapping foreground and background change the ratio?

No — contrast is symmetric, so black on white and white on black both measure 21:1. The Swap button is for previewing which arrangement reads better, not for changing the score.

Is 4.5:1 enough for buttons and icons?

For text inside a button, yes (AA). For the button's border, icons and other non-text UI parts, WCAG 1.4.11 requires only 3:1 against adjacent colors — but aim higher than the minimum when your audience includes low-vision users.

Related free tools

• Color Picker — sample precise colors to test.
• Color Palette Generator — build accessible schemes from a base color.
• HEX to RGB Converter — convert values while you audit.
• Random Color Generator — explore candidate colors quickly.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio that builds web apps, SaaS platforms and custom software for businesses. Need an accessible, well-built product from the ground up? Explore ByteVancer's services or hire the team for your next project.