Skip to content
Browser Screensaver

Contrast Ratio Checker

The WCAG contrast ratio between two colours, with real sample text at both sizes and the pass and fail thresholds that matter.

Press F for fullscreen, Esc to exit.

Monitor & Display Tests

View all 20
Show all 20 Show fewer

Browser Screensavers

View all

Fake Screens & Prank Screens

View all

Fullscreen Timers & Clocks

View all

Screen Lighting for Video Calls

View all

Colour & Screen Tools

View all

Solid Colour Screens

View all

What the contrast ratio checker shows

The ratio is (L1 + 0.05) / (L2 + 0.05) on relative luminance, where L1 is the lighter colour. It runs from 1:1 for identical colours to 21:1 for black on white. Unlike the panel tests on this site, this is a defined calculation rather than an observation, so the number is exact.

The thresholds are the useful part. Body text needs 4.5:1 for AA and 7:1 for AAA. Large text — 24px, or 19px bold — needs 3:1 and 4.5:1. Interface components and graphical objects need 3:1.

Using the ratio in practice

Read the sample text rather than only the number. A ratio that passes on paper can still be uncomfortable with a thin typeface or a light weight, because contrast requirements were written before variable fonts made hairline weights easy.

Both colours are kept in the address bar, so a checked pair is a link you can put in a review comment or a design ticket.

Questions

What contrast ratio do I need?

4.5:1 for body text to meet WCAG AA, 7:1 for AAA. Large text — 24px, or 19px and bold — needs 3:1 for AA and 4.5:1 for AAA. Interface components and meaningful graphics need 3:1.

Is the contrast ratio exact?

Yes. It is a defined calculation on relative luminance, not a measurement of your screen, so the number is the same everywhere. That makes it unusual on this site — the panel tests can only show you a pattern.

Does passing AA mean the text is comfortable?

Not always. The formula does not account for font weight or size beyond the large-text threshold, so a hairline weight at 4.5:1 can still be hard work. Read the sample rather than trusting the number alone.

Is the contrast ratio checker free?

Yes — free, with no account, no download and no limit. It is a web page, so it runs on any device with a modern browser.

Do I need to be fullscreen?

For anything involving the whole panel, yes. Press F, or the fullscreen button. On a desktop browser F11 also hides the browser toolbars, which matters for the tests where a bright strip at the top of the screen would affect what you are looking at.