Choose your two colors
The text color and the background it sits on.
Text readability preview
Pick a text color and a background color and see actual text rendered at six common sizes, from small captions to large headings, each marked with whether it passes WCAG AA contrast.
- Free
- No sign-up
- Runs in your browser
100% private — the calculation is done in your browser and nothing is sent to any server.
How it works
Add your own text
Or use the default sample sentence.
Check every size
Small text needs more contrast than large or bold text.
A single number does not tell the whole story
Contrast checkers usually give one ratio for a pair of colors, but whether that ratio is enough depends on how the text is actually used: WCAG sets a lower bar for large or bold text than for small body copy, because bigger, heavier strokes stay readable at lower contrast. This tool shows the real thing, your colors behind actual text at several sizes, so you see at a glance where the pair works and where it starts to struggle.
What is shown
Six common text sizes are rendered with your chosen colors: small captions at 12 and 14px, body text at 16 and 18px, and large headings at 24px and 32px bold. Each one is labeled with its exact contrast requirement and whether it passes, using the WCAG rule that text counted as large, 24px and up, or 18.66px and up in bold, only needs a 3:1 ratio, while smaller text needs 4.5:1.
Use your own words
The default sample is a neutral pangram, but typing your own heading or paragraph is more useful: real letter shapes, word lengths and language affect how readable a color pair feels in practice, beyond what the contrast number alone captures.
How to read the result
A ratio that fails for your body text size but passes for headings means you can safely use these colors for large text only, not for paragraphs. If nothing passes, the colors are too close for any normal use and need to move further apart. Use the contrast checker for the exact ratio and every WCAG level including AAA, or the accessible palette generator to adjust a color until it passes.
Limits
This checks color contrast only; it does not account for font choice, letter spacing or antialiasing, which also affect real-world legibility. Nothing is uploaded, and the preview is calculated in your browser.
Frequently asked questions
Why does the same contrast pass at one size and fail at another?
WCAG requires less contrast for large text, 24px and up or 18.66px bold, because bigger strokes stay legible more easily. Smaller text needs a higher ratio.
What contrast ratio do I need for body text?
4.5:1 for WCAG AA, the level most commonly required.
Can I preview my own text?
Yes. Type any sentence in the sample field and it replaces the default text at every size.
What if none of the sizes pass?
The colors are too close in contrast for normal use. Adjust one of them, or use the accessible palette generator to fix it automatically.
Does bold text need less contrast than regular text?
Yes, at 18.66px and up. Below that size, bold and regular need the same 4.5:1 ratio.
Is my text or colors sent anywhere?
No. Everything is rendered and calculated in your browser.
Related tools
More utilities that also run without leaving your browser.
Accessible color adjusterAdjust a color to pass WCAG contrast against a background, keeping its hue.
Brand color extractorGet the dominant colors of a logo or photo as ready-to-use hex codes.
Color blindness simulatorSee how an image looks to someone with color blindness, side by side.
Color contrast checkerCheck text and background colors against WCAG, and get a fix that passes.
Color picker from an imageClick any point of a photo to get its exact hex, RGB and HSL color.
Color palette generatorBuild a matching color palette from one base color, in six classic schemes.