Color Contrast Checker

Check the contrast ratio of text and background colours against WCAG AA and AAA. Free and private.

Your colours

Text colour

Background colour

Contrast ratio

15.13:1

Preview and results

Large text sample

This is how normal body text looks with your colours. Can you read it comfortably?

Button

Normal text · AA

Body text under 24px, needs 4.5:1

Pass

Normal text · AAA

Enhanced contrast, needs 7:1

Pass

Large text · AA

24px, or 18.66px bold, and up, needs 3:1

Pass

Large text · AAA

Enhanced, large text, needs 4.5:1

Pass

Buttons and icons · AA

Borders, icons, form fields, needs 3:1

Pass

Everything is worked out in your browser. Nothing is sent to a server.

About This Tool

NinjaFunction's Color Contrast Checker compares a text colour with a background colour and shows the contrast ratio from 1:1 to 21:1. It tells you at once whether the pair passes WCAG AA and AAA for normal text, large text and interface parts such as buttons and icons, shows a live preview, and suggests a nearby colour that passes when yours fails. It runs in your browser, so nothing is sent to a server.

🔑 How to Use

Enter your text colour and your background colour. Type a HEX code such as #0A2B27, or click the colour box to pick one.
Read the contrast ratio. It is shown in large numbers, for example 15.2:1.
Check the five results. Each one says Pass or Fail for normal text, large text and buttons, at levels AA and AAA.
Look at the preview to see how real text and a button look in your colours.
Fix a failing pair with the suggestion box, or click Swap to try the colours the other way round.

💡 Pro Tips

✔ Test the lightest and darkest pairs you use, such as grey text on a white card.
✔ Do not rely on colour alone. Add an icon or text to show errors and links.
✔ Check hover and disabled states too, because they are often the weakest.
✔ Need matching colours first? Try the Color Palette Generator.

WCAG Contrast Levels

Level	What it covers	Ratio needed
AA	Normal text	4.5:1
AA	Large text	3:1
AA	Buttons, icons, borders of form fields	3:1
AAA	Normal text	7:1
AAA	Large text	4.5:1

These numbers come from the Web Content Accessibility Guidelines (WCAG), which many accessibility laws and policies refer to. Level AA is the common goal for websites.

Why Contrast Matters

People with low vision or colour blindness need enough difference between text and background to read it at all.
Everyone struggles in bad conditions, such as a phone screen in bright sunlight or an old monitor.
Search engines and users both prefer readable pages, and good contrast keeps people on your site longer.
It is often required. Public bodies and many companies must meet WCAG AA.

Frequently Asked Questions

What is a contrast ratio?

The contrast ratio compares how bright two colours are. It goes from 1:1, which is no difference at all, to 21:1, which is black on white. The higher the number, the easier the text is to read.

What contrast ratio do I need?

For WCAG level AA, normal text needs at least 4.5:1, and large text and interface parts such as buttons and icons need at least 3:1. For the stricter level AAA, normal text needs 7:1 and large text needs 4.5:1.

What counts as large text?

Text that is at least 24 pixels (18 points) in size, or at least 18.66 pixels (14 points) and bold. Anything smaller counts as normal text.

What is the difference between AA and AAA?

AA is the usual target for websites and the level most laws and policies ask for. AAA is stricter and gives the best readability, but it is not always possible for every colour, so it is usually used for body text where you can.

Do logos and decorative text have to pass?

No. WCAG does not ask for contrast on logos, on text that is only decoration, or on parts of a page that are switched off. Everything that people need to read or use should pass.

How does the Make the text pass AA button work?

When your colours fail, the tool keeps the same shade and makes your text colour lighter or darker, a little at a time, until it reaches 4.5:1. You can accept the suggestion or keep your own colour.

Are my colours sent to a server?

No. The ratio is worked out in your browser, and nothing you enter is sent or stored.