ToolXkit Icon

Colour Contrast Checker

Check text against a background for WCAG AA and AAA.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark

Large heading text

Body copy at a normal size, which is the size that has to pass 4.5:1.

Small print, the hardest case of all.

5.17:1contrast ratio
  • AA — normal textneeds 4.5:1Pass
  • AA — large text (18pt+/14pt bold)needs 3:1Pass
  • AAA — normal textneeds 7:1Fail
  • AAA — large textneeds 4.5:1Pass
  • Buttons, icons and bordersneeds 3:1Pass

Worked out in your browser. Nothing you enter or open is uploaded.

How to Check Colour Contrast for Readable Text

Colour Contrast Checker: before and after TEXT A YOUR INPUT COLOURCONTRASTCHECKER DONE A RESULT

Light grey text on a white page looks elegant on a designer’s bright monitor and is unreadable on a cheap phone in sunlight. The WCAG accessibility guidelines put a number on this: the contrast ratio between text and background. This checker works out that ratio and tells you which levels your pair passes.

Enter the text colour and the background, and a live sample shows a heading, normal body text and small print in your colours. Below it you get the ratio and a pass or fail for five common requirements. If normal text fails, the page suggests the nearest shade of your colour that would pass.

No software to install Free Works on any device

Steps to Test Text Contrast

  1. 1. Set the text colour

    Use the First colour field for your text. Click the swatch to pick, or type a hex, rgb(), hsl() or colour name.

  2. 2. Set the background

    The Against field is the background, white by default. Change it to your page, button or banner colour.

  3. 3. Look at the sample and ratio

    The preview shows real text in your colours. The ratio below is coloured green, blue, amber or red depending on how well it does.

  4. 4. Read the pass and fail list

    Five rows cover AA and AAA for normal and large text, plus buttons, icons and borders. Each row shows the ratio it needs.

  5. 5. Try the suggested shade

    When normal text fails, a hex code appears for a nearby shade that reaches 4.5:1. Type it into the First colour box to check it.

Try it now

What Is a Contrast Ratio?

The contrast ratio compares how much light two colours give off, from 1:1 for identical colours to 21:1 for black on white. WCAG 2 sets a minimum of 4.5:1 for normal text at level AA, 3:1 for large text, and 7:1 for normal text at the stricter AAA level. Large means about 18 point regular or 14 point bold.

These rules help people with low vision or colour blindness, and anyone reading on a dim or glary screen. Many public bodies and companies must meet AA by law, so the checker is a quick way to catch problems before a site or document goes out.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Contrast Checker Tests

Live text sample

A heading, body line and small print drawn in your two colours, so you judge with your own eyes as well as the number.

Exact ratio

Worked out with the WCAG luminance formula and shown with its colour-coded rating.

Five pass or fail checks

AA normal, AA large, AAA normal, AAA large, and the 3:1 rule for buttons, icons and input borders.

Fix suggestion

When body text fails, the tool walks your colour lighter or darker until it reaches 4.5:1, keeping the same hue.

Why Use ToolXkit for Colour Contrast Checker?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Accessible Colours

  1. Aim for AA on all body text. Save lower-contrast colours for large headings or purely decorative elements.

  2. Check placeholder text and disabled buttons too. They are often the palest grey on the page and the first to fail.

  3. Text over a photo has no single background colour. Test against the lightest part of the image behind the words.

  4. Swap the two colours to test white text on a coloured button. The ratio is the same either way round.

  5. Passing the number is the minimum. Very thin fonts can still be hard to read at a ratio that technically passes.

Frequently Asked Questions

Answers to common questions about this tool.

What contrast ratio do I need for WCAG AA?

Normal text needs at least 4.5:1 against its background. Large text, roughly 18 point or 14 point bold and above, needs 3:1. Buttons, icons and form borders also need 3:1 against what surrounds them.

What is the difference between AA and AAA?

AA is the level most laws and policies require. AAA is stricter, asking for 7:1 on normal text and 4.5:1 on large text. It is good practice for long reading, but few brand palettes can meet it everywhere.

Does it matter which colour is text and which is background?

Not for the ratio, which comes out the same either way. It does matter for the sample and the suggested fix, which adjusts the first colour, the text, to reach 4.5:1.

Is 4.5:1 enough for everyone?

It covers most people with moderately low vision. Some readers need more, which is why AAA exists. Size, weight and spacing of the font also affect how readable the text feels.

Can I check a colour with transparency?

The checker works with solid colours. For semi-transparent text, work out the colour it becomes on top of your background, then enter that solid value.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is Colour Contrast Checker free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use Colour Contrast Checker?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools