Free tool

Contrast checker

This free contrast checker shows whether your text colour is readable on your background colour. Enter two colours and you see the contrast ratio and whether the pair meets WCAG 2.2 level AA and AAA, for normal text, large text and buttons.

Free, no account needed

What contrast does my text need?

Under WCAG 2.2 level AA, normal text needs a contrast ratio of at least 4.5:1 with its background, and large text at least 3:1. Buttons, icons and form borders also need 3:1 against the colours next to them. The ratio is not rounded, so 4.49:1 does not pass for normal text.

What the contrast checker calculates

The checker compares the relative brightness of the two colours, as defined in WCAG, and gives a ratio between 1:1 (no contrast) and 21:1 (black on white). It then tests that ratio against five thresholds and shows a live sample of a heading and body text in your colours.
  • AA, normal text: at least 4.5:1
  • AA, large text: at least 3:1
  • AAA, normal text: at least 7:1
  • AAA, large text: at least 4.5:1
  • Buttons, icons and form borders: at least 3:1

How to read the result

Green means the pair meets level AA for all text, so you can use it for body text, menus and buttons. Orange means the ratio is between 3:1 and 4.5:1. That is only enough for large text: at least 18 point (about 24 pixels), or 14 point bold (about 18.5 pixels). Use it for big headings, not for paragraphs, prices or form labels. Red means the ratio is below 3:1. Text in these colours is hard to read for many people, especially on a phone in sunlight. Make one colour darker or the other lighter until the result turns green.

Common contrast mistakes

  • Light grey body text on white because it looks calm
  • White text on a light brand colour, such as yellow, light green or orange
  • Placeholder text in form fields used as the only label
  • Text on top of a photo without a dark overlay
  • Button borders and icons that blend into the background
  • Assuming brand guidelines are an exception: only logos are exempt

What to do next

Test the colours your website really uses: body text, links, buttons, prices, form fields and the footer. If a brand colour fails, you do not have to drop it. Use it for backgrounds of large areas with dark text on top, or use a darker shade of the same colour for text and buttons. After changing colours, check the page again on a phone outdoors. Good contrast helps every visitor, not only people with low vision.

From 28 June 2025 the European Accessibility Act requires many online shops and services in the EU to meet accessibility requirements, which refer to WCAG level AA. Enough contrast is one of the most common gaps.

How to use the contrast checker

  1. Enter the text colour

    Pick it with the colour picker or type a hex code such as #1e3346.

  2. Enter the background colour

    Use the colour directly behind the text or button. Swap the colours with one click if needed.

  3. Read the ratio and the checks

    See the ratio and which AA and AAA levels pass for normal text, large text and buttons.

  4. Adjust until it passes

    Make the dark colour darker or the light one lighter and watch the sample until you see green.

Questions about colour contrast

What is a good contrast ratio?
For normal text aim for at least 4.5:1, which is WCAG level AA. 7:1 or more meets level AAA. Black on white is the maximum of 21:1.
What counts as large text?
WCAG defines large text as at least 18 point, about 24 CSS pixels, or at least 14 point bold, about 18.5 pixels.
Do logos have to meet the contrast rules?
No. Text that is part of a logo or brand name has no contrast requirement, and neither do disabled controls or purely decorative text.
Does my online shop have to meet these rules?
Since 28 June 2025 the European Accessibility Act applies to many online shops and services in the EU, and it refers to WCAG level AA. Microenterprises that provide services are exempt. Check the rules in your country to see what applies to you.
Is AAA required?
No law we know of requires AAA for a whole website. AA is the usual target. AAA is a good extra step for long texts and for audiences with many older visitors.

Related tools and guides

A website in your colours that stays readable

SitePack themes follow your own brand colours. Build your website from €15 per month, billed yearly, with EU hosting and SSL included. Try it free for 14 days without payment details.

Start free for 14 days View pricing
Cookie preferences

Cookies help us provide, protect and improve our products and services. By using our website, you agree to our use of cookies.