What contrast ratio do I need?

WCAG AA, the level most laws and audits use, needs 4.5:1 for normal text and 3:1 for large text and for icons, borders and buttons. AAA, the stricter level, needs 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

At least 24 pixels (18 point), or at least 18.66 pixels (14 point) when bold.

How is the contrast ratio calculated?

Each colour's relative luminance is worked out from its red, green and blue values, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 (same colour) to 21:1 (black on white).

How does the suggested colour work?

It keeps your colour's hue and saturation and moves its lightness away from the background, one step at a time, until the ratio reaches 4.5:1. Your brand colour stays recognisable.

Free tool

Can everyone read your text? Check the contrast

Enter a text colour and a background. See the WCAG contrast ratio, pass or fail for AA and AAA, a live preview, and the nearest shade of your colour that passes.

What you get

WCAG 2.2 ratio for AA and AAA
Normal text, large text and buttons
Suggests a passing colour in the same hue

Making a favicon in your brand colours? Use the favicon generator.

Text colour

Background colour

Contrast ratio

2.54 : 1

Normal text, AA (4.5:1)Fail
Large text, AA (3:1)Fail
Normal text, AAA (7:1)Fail
Large text, AAA (4.5:1)Fail
Icons, borders, buttons (AA) (3:1)Fail

Nearest text colour that passes AA: #6d7787

Preview

Large heading text

Normal body text at 16 pixels. This is what most of your page is made of, so it needs at least 4.5 to 1 to pass AA.

Small print, captions and form hints at 13 pixels.

Button outline

Large text means at least 24 px, or 18.66 px bold. Ratios use the WCAG 2.2 formula, the standard behind most accessibility laws and audits. Checked in your browser; nothing is sent anywhere.

Why contrast matters

Light grey text on white loses readers, and fails audits.

Low contrast is the most common accessibility problem on the web. It makes pages harder to read on phones in sunlight and for anyone with weaker eyesight, and it is one of the first things an accessibility audit checks.

What contrast ratio do I need?: WCAG AA, the level most laws and audits use, needs 4.5:1 for normal text and 3:1 for large text and for icons, borders and buttons. AAA, the stricter level, needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text?: At least 24 pixels (18 point), or at least 18.66 pixels (14 point) when bold.
How is the contrast ratio calculated?: Each colour's relative luminance is worked out from its red, green and blue values, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 (same colour) to 21:1 (black on white).
How does the suggested colour work?: It keeps your colour's hue and saturation and moves its lightness away from the background, one step at a time, until the ratio reaches 4.5:1. Your brand colour stays recognisable.
Want the whole site checked?: Our fixed-price website check covers speed, mobile layout and search basics: the other things that quietly lose visitors.

Want a site that is easy for everyone to use?

We design and fix websites so they are easy to read and use on any screen, without losing your look.

Start a project Fixed-price checks