Color contrast checker.

Check any text and background pair against WCAG AA and AAA — and see the largest readable size at a glance.

Runs in your browser
Nothing is uploaded
Free — no sign-up

Colors

Text color

Background color

Preview

Normal text — the quick brown fox jumps over the lazy dog.Large text — Aa Bb Cc

Contrast ratio

10.44: 1

Normal text — AA (4.5:1)Pass

Normal text — AAA (7:1)Pass

Large text — AA (3:1)Pass

Large text — AAA (4.5:1)Pass

Large text is 24px+, or 18.66px and bold. AA is the common legal and procurement bar; AAA is the stricter target for body text.

Good to know.

A color contrast checker measures the ratio between text and its background and tells you whether it passes WCAG AA and AAA for accessibility. This free tool shows the exact ratio with a live preview for normal and large text.

The number accessibility is graded on

WCAG measures readability as a contrast ratio between text and background, from 1:1 to 21:1. Enter two colors and see the exact ratio and whether it passes AA and AAA for normal and large text.

Where it actually matters

Low contrast is the most common accessibility failure — and the one enterprise buyers and audits check first. This tells you instantly whether your colors are readable, before it is a problem.

How to check color contrast

Enter your text color. Set the foreground color.
Enter your background color. Set the color behind the text.
Read the ratio. See the exact contrast ratio.
Check AA and AAA. Confirm it passes for normal and large text.

Frequently asked

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1. This tool shows pass/fail for each.

What counts as 'large' text?

24px or larger, or 18.66px (14pt) and bold. Large text is allowed a lower contrast ratio because it is easier to read.

Does contrast affect conversions?

Indirectly, yes — readable pages keep users engaged, and accessibility is increasingly a legal and procurement requirement. It is cheap insurance against losing users and contracts.

Builder

Accessible by default, not as a retrofit.

Checking one pair is easy; shipping an accessible site is the work. sparx Builder blocks are responsive and accessible out of the box, so contrast, focus states, and semantics are handled before you publish.

Explore Builder

What you get with sparx Builder.

The website module. Pick a theme, edit blocks in the browser, point your domain. SSL and the global CDN are handled for you. The same builder serves a one-page portfolio, a 40-post blog, or a 50,000-SKU catalog.

Theme-first.

Start from a polished theme, change the parts that matter, publish. Want full control? Build a custom frontend against the same API — coding optional, never required.

Block editor.

Drag, drop, edit in the browser. Every block is responsive and accessible by default — clean markup, no mystery wrappers, no shadow DOM.

Custom domain + SSL.

Point your DNS and your certificate provisions itself. No separate DNS service, no certificate to renew, no upcharge.

Builder is one module on the sparx platform — activate it alongside storefront, CRM, CMS, email, and B2B on one data layer and one bill. Only pay for what you run.

Explore the platform See pricing

More free tools.

Every sparx tool runs entirely in your browser — free, no account, nothing uploaded.