Why does this page not tell me whether my pair passes?

Because readability is the question, not compliance. A pair can satisfy every threshold and still look weak at 12px in a thin font. The ratio is printed so you can compare it against your own requirement, and the verdicts live on the dedicated threshold checkers.

Are the preview sizes in pixels or points?

They are pixels, fixed at 12, 14, 16, 20, 28 and 40. Because they are absolute rather than relative units, changing your browser's text size setting will not change the preview, which is worth remembering when you evaluate the smallest line.

Does the preview measure the actual rendered pixels?

No. The ratio is computed from the two colors you entered, and the rendering is there for your eyes. Antialiasing, subpixel rendering and the font you are viewing in all affect how it looks but not the figure.

Which size should I judge first?

The 12px line. It is the most demanding case and the fastest way to spot a pairing that is technically compliant but practically thin. If it reads cleanly there, the larger sizes will as well.

Can I check placeholder or secondary text here?

Yes, and it is worth doing, because muted text colors are where threshold failures usually hide. Substitute the muted color as the text color and read the smallest line, treating anything below 4.5 to 1 as a candidate for a darker value.

Text Readability Checker

Text

Background

Preview text

12px — The quick brown fox jumps over the lazy dog.

14px — The quick brown fox jumps over the lazy dog.

16px — The quick brown fox jumps over the lazy dog.

20px — The quick brown fox jumps over the lazy dog.

28px — The quick brown fox jumps over the lazy dog.

40px — The quick brown fox jumps over the lazy dog.

Contrast ratio: 17.85:1

You Might Also Need

Contrast Checker

Check contrast ratio between two colors

Accessible Color Pair Finder

Find readable pairs for any base color

Large Text Contrast Checker

Contrast threshold for headings & large text

Color Gamut Visualizer

Visualize where a color sits in common gamuts

Text Readability Checker renders your own copy in your chosen colors at six sizes at once, so a pairing can be judged as text rather than as a pair of swatches.

What is Text Readability Checker?

Text Readability Checker renders your own sentence in your chosen text and background colors at six sizes at once, from 12px up to 40px, with the contrast ratio printed underneath. It answers a question the number alone cannot: a pair can clear 4.5 to 1 and still read badly, and the only way to see that is to read it.

The preview is built to make the size question visible rather than theoretical:

12px, the size where a pairing that only just satisfies the threshold starts to look thin.
14px and 16px, the ordinary body sizes most interfaces actually use.
20px and 28px, where large-text allowances begin to apply and type starts to hold up.
40px, the display size at which almost any compliant pair reads comfortably.

The text is yours to set, so the preview shows the letters and word shapes your product will really print rather than a pangram. The colors are entered as a text color and a background color, and the ratio shown beside the preview is the standard WCAG 2.x calculation: both colors are converted to sRGB, their channels are linearised, and the linear values are weighted 0.2126 red, 0.7152 green and 0.0722 blue into a relative luminance, before the lighter plus 0.05 is divided by the darker plus 0.05 and rounded to two decimals.

This page deliberately does not hand down a verdict, and that shapes what it can and cannot do.

There are no pass or fail badges. The ratio is printed and the judgement is left to you, which is right for a readability question but wrong if you need a compliance answer.
The six sizes are fixed at 12, 14, 16, 20, 28 and 40 pixels. They are not rem values, so browser text scaling is not reflected in the preview.
Nothing is measured from the rendering. The number is the ratio of the two colors, not a sample of the pixels on screen, so antialiasing and font choice do not enter the result.
Font family and weight are not inputs, though both change how a pairing holds up at small sizes.
No alpha, gradients or surfaces behind the pair.

Use this page after a pair has passed its threshold check, not instead of it. Paste the longest line your interface really shows, read the 12px sample first and work upwards, and if the smallest size looks weak, treat that as a signal to move a color rather than to raise the type size everywhere.

A text on color preview is also the only reliable way to catch the subtler failures, which are about font size contrast rather than the pair itself. A muted grey that satisfies 4.5 to 1 can still look weak at 12px in a light weight, and a dark navy can look heavy at 40px in a bold one. Because the page pairs one color choice with six fixed sizes, a readable text check is really a question about which size the pairing is fit for, and the answer is often that the same two colors suit body copy at one width and captions at quite another.

How to use Text Readability Checker

Set the text color and the background color in the two swatch fields.
Type or paste the copy you actually want to test into the preview text field, replacing the default pangram.
Read the preview block, working from the 12px line upwards, since the smallest size reveals the most.
Compare the printed contrast ratio underneath against the threshold your text size requires.

When to use Text Readability Checker vs related tools

Use the text readability checker once a pair has already passed a threshold test and you want to see how it behaves as real text at small sizes. The threshold verdicts themselves belong with the contrast checker or the WCAG 2.1 AA checker, deciding which neutral to set it in is the job of the accessible color pair finder, and reviewing the pairing across a whole interface is easier with the palette accessibility checker.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.