FreeToolsWorld

Color Contrast Checker

Check whether text is readable on a background, against WCAG levels.

Color Tools Free, no sign-up Runs in your browser
1.00
Contrast ratio
—
Best level reached

Preview

Large heading text

Normal body text at the size most paragraphs use. Readable contrast matters most here, because this is where people spend their reading time.

WCAG checks

RequirementNeedsResult

About the Color Contrast Checker

Color Contrast Checker measures how much difference there is between a text colour and the background behind it, and tells you whether that difference is enough for people to read comfortably. The result is a ratio, running from 1 to 1 for two identical colours up to 21 to 1 for black on white.

Accessibility guidance sets thresholds against that ratio. Normal body text needs at least 4.5 to 1 to meet level AA and 7 to 1 for the stricter AAA. Large text, meaning roughly 24 pixels or 19 pixels bold and above, needs 3 to 1 for AA and 4.5 to 1 for AAA. Interface components such as button borders and form outlines need 3 to 1. Every one of those checks is shown as a separate pass or fail rather than a single verdict, because a colour pair can be fine for a heading and unusable for body text.

A live preview shows your two colours as real text at both sizes, and when a pair fails the tool suggests the nearest passing adjustment by nudging the lightness of the text colour, so you get a usable answer rather than just bad news.

How to use the Color Contrast Checker

  1. Set the text colourUse the picker or type a HEX value.
  2. Set the background colourSame again for what sits behind the text.
  3. Read the ratio and the checksEach WCAG level is shown as a separate pass or fail.
  4. Use the suggestion if it failsA nearby passing colour is offered, which you can apply in one click.

Features

  • Contrast ratio calculated from relative luminance
  • Separate checks for normal text, large text and interface components
  • AA and AAA levels shown independently
  • Live preview of real text at both sizes
  • Suggests the nearest passing colour when a pair fails
  • Swap text and background in one click
  • Pass and fail shown in words, not by colour alone

Who uses this tool

The color contrast checker is used by writers, developers, students, marketers and anyone else who needs the job done once without installing software. Common cases include:

  • Checking a brand palette before using it for body text
  • Fixing a button whose label is hard to read
  • Auditing an existing page for accessibility problems
  • Choosing a readable colour for a coloured background
  • Documenting which colour pairs are approved in a design system

Frequently asked questions

What counts as large text?

Roughly 24 pixels and above, or 19 pixels and above when bold. Large text is held to a lower threshold because bigger shapes are easier to distinguish, which is why a heading colour can pass where the same colour fails for body copy.

What is the difference between AA and AAA?

AA is the level most organisations aim for and the one most commonly required by law or policy. AAA is stricter and is not always achievable across a whole design, particularly where brand colours are fixed.

Does contrast cover everything about accessible colour?

No. It covers legibility of text against its background. It says nothing about whether you are using colour alone to convey meaning, which is a separate requirement, or about colour combinations that are difficult for people with particular forms of colour vision.

How is the ratio calculated?

From the relative luminance of each colour, computed from its red, green and blue channels after a gamma adjustment. The lighter luminance plus 0.05 is divided by the darker plus 0.05, which is why the scale tops out at 21 to 1.

Does a semi-transparent colour work?

Not reliably. Contrast depends on the colour that is actually rendered, so flatten any transparency against its real background first and check the resulting solid colour.

Why does the suggestion only change the lightness?

Because that is the smallest change that preserves the character of your colour. Keeping hue and saturation while adjusting lightness usually keeps the result recognisably on brand.

If the color contrast checker is not quite what you need, these other free tools solve closely related problems.

Color Picker

Choose any colour and copy it in HEX, RGB or HSL, with tints and shades.

Color Tools Use tool

HEX to RGB Converter

Turn any HEX code into RGB and HSL values, with alpha support.

Color Tools Use tool

CSS Gradient Generator

Design linear and radial gradients with live preview and copyable CSS.

Color Tools Use tool

RGB to HEX Converter

Enter R, G and B values and get the matching HEX and HSL colour.

Color Tools Use tool