What counts as large text?

Text counts as large from 24 CSS pixels, or from about 18.66 CSS pixels when bold.

Is good colour contrast enough for an accessible website?

No. Colour contrast is only one part of accessibility. Structure, operation, alternative text, focus management and other requirements also need to be checked.

Check colour contrast against WCAG

Q: What contrast is required for normal text?

For WCAG AA, normal text requires at least 4.5 to 1. AAA requires at least 7 to 1.

Compare text and background colours, read the exact contrast ratio and check the thresholds for normal, large and particularly readable text.

Immediate resultThe calculation follows the WCAG 2.2 contrast method.

Text colour

Background colour

16.5:1

Very high contrast. The combination passes AA and AAA for all text sizes.

Websites and web development

If you need a bespoke version

You can keep using this free tool as it is. If you need a bespoke version with your own rules, data or workflows for a website, shop or internal process, I can build it for you – for example with custom validation rules, accessible operation, and integration into an existing website.

View services from Jan-Erik Andersen

What the ratio means

The contrast ratio ranges from 1:1 for two identical colours to 21:1 for black on white. WCAG 2.2 level AA requires at least 4.5:1 for normal body text. Large or sufficiently bold text may use 3:1 because its letter shapes are easier to recognise.

Large text is clearly defined

Text counts as large from 24 CSS pixels, or bold from about 18.66 CSS pixels. Text is not large merely because it is set in capitals or spaced widely.

Contrast is necessary, but not everything

A passing result proves only this colour combination. A complete review also considers keyboard operation, focus, heading structure, forms, alternative text, zoom, error messages and other requirements.

Frequently asked questions

What contrast is required for normal text?

WCAG AA requires at least 4.5:1. The stricter AAA level requires 7:1 for normal text.

Do the values apply to logos?

There is no general minimum contrast requirement for text in logos. Once a label serves operation or information, however, it should not be treated as purely branding.

Does this tool check transparency and background images?

No. It compares two fully opaque colours. With transparency, gradients or images, the colours actually visible must be checked at every relevant point.

How to use this tool

Assess the contrast ratio of two colours against WCAG 2.2.

Enter the text and background colours or choose them with the colour controls.
Read the contrast ratio and the result for normal and large text.
If contrast is too low, use the suggested closest suitable colour as a starting point.

Terms used in this tool

Contrast ratio: A value between 1:1 and 21:1 for the brightness difference between two colours.
WCAG: International guidelines for more accessible web content.
AA and AAA: Two WCAG conformance levels. AAA requires a higher text contrast than AA.