What contrast ratio do I need?

WCAG 2 AA: 4.5 : 1 for normal text and 3 : 1 for large text (18.66 px bold or 24 px regular and up). AAA raises those to 7 : 1 and 4.5 : 1. AA is the level most laws and guidelines reference.

Why does light grey text fail?

Light grey can look readable on a bright monitor and still be hard to read on other screens. #999999 on white is 2.85 : 1, which fails AA. #767676 is the lightest grey that passes on pure white.

Does this cover buttons and icons?

Button text follows the text rules. Icons and control outlines need 3 : 1 against their surroundings under WCAG 2.1 (non-text contrast); the sample shows a button so you can judge it.

What does the suggested colour do?

It keeps your hue and moves the text colour towards black (on light backgrounds) or white (on dark ones) just far enough to pass — the smallest change that fixes it.

Colour Contrast Checker

Check that text is readable on its background: the WCAG 2 contrast ratio, whether it passes AA and AAA for normal and large text, a live sample in real sizes, and the nearest shade that passes. Runs in your browser.

A free WCAG colour contrast checker: enter a text colour and a background colour and get the contrast ratio, pass/fail for AA and AAA at normal and large text sizes, a live sample at real sizes, and the nearest shade of your colour that passes. Runs in your browser.

Grey text on a white background looks elegant on your monitor and disappears on a phone in daylight — along with the button under it.

Two colours in, a pass or fail against the accessibility standard out.

Text colour

Background colour

4.83: 1 contrast ratio

✓ AA normal text (4.5)✓ AA large text (3)✕ AAA normal (7)✓ AAA large (4.5)

Nearest passing text colour on this background:

Live sample

Large text — 24 px bold headline

Large text — 18.66 px bold or 24 px regular

Normal text at 16 px. Body copy, prices, opening hours, the small print people actually need to read.

Small text at 13 px — captions, footnotes, form hints.

A button label

WCAG 2: normal text needs 4.5 : 1 for AA (7 : 1 for AAA); large text (18.66 px bold or 24 px regular and up) needs 3 : 1 (4.5 : 1 for AAA). Light grey body text on white is the one to check first.

Runs in your browser — nothing is uploaded, nothing is stored. Close the tab and it is gone.

What the research says

How much the look of a site counts for trust

Stanford asked 2,684 people how they judge whether a website is credible. WebAIM tested the top one million home pages for accessibility.

46.1%of people's comments about whether a website was credible were about its design look — the most-mentioned factor.

Source: Stanford Web Credibility Research, How Do People Evaluate a Web Site's Credibility? (2,684 people), 2002

95.9%of the top one million home pages had detected WCAG 2 accessibility failures — an average of 56.1 errors per page.

Source: WebAIM Million, the top 1,000,000 home pages, 2026

These figures are other people’s research, quoted as published. Your own site’s numbers come from the free checks and the audit.

After the fix

Text people can read on a phone outdoors

Left: light grey text and pale buttons that look fine on a bright monitor and fade on a phone screen. Right: the same design with the text colour moved just far enough to pass WCAG AA. Your brand colours stay; only the shade changes, so every line a customer needs to read stays readable.

Body text at 4.5 : 1 or better against its background
Button text and form labels checked the same way
Your brand colours kept, only the shade adjusted

900+ projects
since 2017: 4.9★
400+ five-star reviews on Fiverr: 9+ years
building WordPress and Next.js sites

Support is the whole team, not one person — reach us any time, and someone picks it up.

“Working with Sandipan Das was fantastic! The attention to detail and professionalism in his work was outstanding, and his proactive communication and timely delivery made the entire process smooth. He crafted the website exactly as I envisioned—highly recommend! 👍”

Indoor Pro Golf · 3-page WordPress site · the project

Schedule a Meeting

Bring what the tool found. I lead every project, and on the call we go through the list together and decide what to fix first.

Schedule a Meeting

How it works

How to use the Colour Contrast Checker

01Enter the text colour and the background colour (hex), or pick them.
02Read the ratio and the AA / AAA badges for normal and large text.
03If it fails, click the suggested shade — the closest colour to yours that passes.

Good to know

Why contrast matters beyond accessibility

Low-contrast grey text is harder for everyone to read, not only for people with low vision. WCAG AA (4.5 : 1 for body text) is also the level most accessibility laws and procurement rules point to.

In more depth

About the colour contrast checker

Readable is the first job of a design

Every conversion on a website passes through text someone has to read: the price, the phone number, the form label, the offer. Light grey on white can look fine in a mock-up and still be hard to read. The fix is usually one hex value, and AA is also the level accessibility rules point to.

The checker gives the ratio and the verdicts, but the live sample is the part worth looking at: if the 13-pixel line is hard to read there, it is hard to read for your customers.

FAQ