NineClip Free Tools

Contrast Checker

Check whether your text and background colours have enough contrast to read, with a pass or fail at each WCAG accessibility level.

Updated

Color ToolsEditor's Pick● Free No upload Instant

Loading Contrast Checker…

Your browser is preparing the tool. It runs 100% locally.

Quick answer

Pick a text colour and a background colour and the tool calculates their contrast ratio, then shows whether the pair passes WCAG: AA for normal text (4.5:1), AA for large text (3:1) and AAA for normal text (7:1). It uses the exact WCAG relative-luminance formula and shows a live preview. Ratios run from 1:1 (no contrast) to 21:1 (black on white). Your colours are checked on your device.

What the Contrast Checker does

Choose the two colours and you get the contrast ratio straight away, plus a pass or fail badge for each accessibility level and a preview of sample text. That tells you whether the text will be readable, including for people with reduced vision.

Web accessibility uses the contrast ratio as its standard measure of legibility. The higher the ratio, the more distinct the colours. WCAG sets minimum ratios for text, and the tool tells you whether your pair meets them.

How it works

The tool converts each colour to its relative luminance, a brightness value that weights green most and blue least to match how the eye sees colour. It then divides the lighter value by the darker one, each with a small offset, exactly as the WCAG formula says. The result is a number from 1 to 21.

That ratio is compared with the WCAG thresholds: 4.5:1 for normal text at level AA, 3:1 for large text at AA, and 7:1 for normal text at the stricter AAA. Each threshold gets its own pass or fail, so you can see which standards your colours meet.

What it checks & how

  1. Read the two colours. Take the text colour and the background colour.
  2. Compute relative luminance. Convert each colour to its relative luminance using the WCAG sRGB formula.
  3. Take the contrast ratio. Divide the lighter luminance plus 0.05 by the darker plus 0.05.
  4. Check against WCAG levels. Pass or fail at AA normal (4.5:1), AA large (3:1) and AAA normal (7:1).

WCAG contrast ratio

ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05) L = 0.2126·R + 0.7152·G + 0.0722·B (linearised sRGB) pass marks: AA normal 4.5:1 · AA large 3:1 · AAA normal 7:1
Worked example
black #000000 on white #FFFFFF → 21:1 (passes every level)

Ratios run from 1:1 (identical colours) to 21:1 (black on white). Higher is more readable.

Technical details

MeasuresWCAG contrast ratio (1:1 to 21:1)
ChecksAA normal, AA large, AAA normal
Formulaexact WCAG relative-luminance ratio
Previewlive sample text in your colours
Not shownAAA large (4.5:1)
Where it runsOn your device; colours are never sent

Standards and references

  • WCAG 2 contrast ratio: The accessibility standard's measure of legibility: the lighter colour's luminance divided by the darker's, each offset by 0.05, giving a value from 1:1 to 21:1.
  • AA and AAA levels: Level AA needs 4.5:1 for normal text and 3:1 for large text. The stricter AAA needs 7:1 for normal text and 4.5:1 for large text, which this tool doesn't show as a separate badge.
  • Large text definition: WCAG counts text as large at about 18 point, or 14 point bold. The tool can't see your font size, so you pick the threshold that matches your text.

Accuracy and limits

It uses the exact WCAG 2 formula, so the ratio matches other compliant checkers. When results seem to differ, a colour was usually rounded or had some transparency. This tool compares two solid colours.

It can't see your font size, so you decide which level applies. Large text (about 18 point, or 14 point bold) needs only 3:1 at AA, while normal text needs 4.5:1. Read the badge that matches your actual text.

It shows three of the four WCAG thresholds. AAA for large text is 4.5:1, the same number as AA for normal text, so the AA-normal badge answers both.

It assumes opaque colours on a flat background. Semi-transparent text, or a gradient or image behind it, changes the real contrast in ways a two-colour check can't capture. Test the colours as they actually render.

WCAG 2 contrast is today's standard, but it's a model and doesn't match perception perfectly. APCA, a newer perceptual method proposed for a future version, rates some colour pairs differently. For compliance now, the WCAG 2 ratio shown here is the one that counts.

Real-world uses

Designing accessible text

Check that body and heading colours are readable on their background.

Meeting accessibility rules

Confirm a colour pair passes WCAG AA or AAA before shipping.

Choosing button and link colours

Make sure interactive text stands out enough to read.

Auditing a design

Test existing colour pairs against the standard.

When it fits, and when it doesn't

Good for

  • Checking text-on-background readability
  • WCAG AA and AAA compliance
  • Choosing accessible colour pairs
  • A quick contrast ratio with a preview

Not the best choice for

  • Semi-transparent or layered colours
  • Non-text contrast rules in full (icons, UI)
  • The newer APCA perceptual model
  • Knowing your text size for you

Need to check a whole page automatically? A browser accessibility tool (such as axe or Lighthouse) scans every element. Want the newer perceptual model? An APCA checker rates contrast differently for a future standard.

Frequently asked questions

What contrast ratio do I need?
For WCAG AA, normal text needs at least 4.5:1 and large text at least 3:1. For the stricter AAA, normal text needs 7:1. Higher is more readable, and the maximum is 21:1 (black on white).
What counts as large text?
WCAG defines large text as about 18 point, or 14 point bold. Large text has a lower requirement (3:1 at AA), so if your text is that size or bigger, you can use the AA-large badge.
How is the ratio calculated?
Each colour is converted to a relative luminance, a brightness value weighted by how the eye sees red, green and blue. The ratio is the lighter value plus 0.05 divided by the darker value plus 0.05, exactly as WCAG specifies.
Why does it not show AAA for large text?
AAA for large text needs 4.5:1, the same number as AA for normal text. You can read it from the AA-normal badge, so the tool doesn't repeat it.
Does it handle transparent colours?
No. It compares two solid colours. If your text or background is semi-transparent, or sits over a gradient or image, the real contrast is different, so test the colours as they render.
What is relative luminance?
A measure of a colour's brightness as perceived, weighting green most and blue least and applying the sRGB gamma curve. WCAG uses it so the contrast ratio reflects how readable colours actually are.
Is a higher ratio always better?
For readability, yes. More contrast is easier to read, especially for people with low vision. Pure black on pure white can feel harsh to some readers, so many designs use near-black on near-white, which still passes easily.
Does this guarantee my page is accessible?
It checks one colour pair against the contrast rules. An accessible page also needs readable text sizes, sound structure and keyboard access. Contrast is one important part of that.
Why might another checker give a slightly different number?
Usually rounding, or a difference in how a colour was entered. The underlying WCAG formula is fixed, so two compliant checkers on the same two solid colours should match to two decimals.
What is APCA?
A newer, perceptually based contrast method proposed for a future version of the guidelines. It can rate some pairs differently from WCAG 2. For meeting today's standard, the WCAG 2 ratio shown here is the one to use.
Can I check icons or borders, not just text?
WCAG has a separate 3:1 rule for non-text elements such as icons and form borders. The ratio works for any two colours, so read it here and apply the threshold for what you're checking.
Is anything uploaded?
No. The colour maths runs on your device, so the colours you test stay with you.

References

The ratio comes from each colour's relative luminance, using the exact WCAG 2 formula, and is checked against AA normal (4.5:1), AA large (3:1) and AAA normal (7:1). AAA large is 4.5:1, so read it from the AA-normal badge. The tool compares solid colours only, and you choose the level that matches your text size.

PopularHot

Color Picker

Pick a colour with the swatch or type a hex code, and read it back as HEX, RGB, HSL and CMYK side by side. Your browser does every conversion.

ColorOpen Tool
Popular

HEX to RGB Converter

Turn a hex color into its red, green and blue numbers and the CSS rgb() string, exactly.

ColorOpen Tool

RGB to HEX Converter

Pack red, green and blue numbers into the compact #RRGGBB hex code the web runs on.

ColorOpen Tool
PopularHot

Image Compressor

Compress an image to JPEG with a quality slider and watch the file size drop as you drag, in your browser.

ImageOpen Tool
PopularHot

Merge PDF

Combine several PDFs into one file in the order you choose, without leaving your browser.

PDFOpen Tool
PopularHot

Word Counter

Count words, characters, sentences and paragraphs as you type, with reading and speaking time alongside.

TextOpen Tool

Back to the Contrast Checker

Run your check at the top of the page. What you enter stays on this device.

Go to the tool Explore Color Tools