Skip to content

Free tool

Colour Contrast Checker

Check any text and background colour pair against WCAG 2.2, preview it live and get the nearest shade that passes.

Runs entirely in your browser. Nothing you enter is sent to a server.

Large text sample

Normal text sample: the quick brown fox jumps over the lazy dog.

UI component

Contrast ratio

21:1

WCAG results
CheckNeedsResult

How it works

The contrast ratio compares the relative luminance of two colours: (L1 + 0.05) ÷ (L2 + 0.05), with L1 the lighter colour. Luminance is computed from the sRGB channels after removing the gamma curve, weighted by how sensitive the eye is to red, green and blue. Black on white gives 21:1; identical colours give 1:1.

The results table applies the WCAG 2.2 thresholds: 4.5:1 (AA) and 7:1 (AAA) for normal text, 3:1 (AA) and 4.5:1 (AAA) for large text, and 3:1 for user interface components and graphics. When a pair fails, the tool keeps the text colour’s hue and saturation and finds the closest lightness that passes.

Common uses

  • Checking brand colour palettes and design tokens before they reach production.
  • Finding an accessible variant of a colour that is slightly too light or too dark.
  • Verifying button, link and form-field colours against their backgrounds.
  • Preparing evidence for an accessibility audit or the European Accessibility Act.

Frequently asked questions

What contrast ratio does WCAG require?

WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text and for user interface components and graphical objects. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

WCAG defines large text as at least 18 point (24 CSS pixels) regular weight, or at least 14 point (about 18.66 CSS pixels) bold.

How is the contrast ratio calculated?

Each colour’s relative luminance is worked out from its linearised sRGB channels with the weights 0.2126, 0.7152 and 0.0722. The ratio is (lighter + 0.05) ÷ (darker + 0.05), which ranges from 1:1 for identical colours to 21:1 for black on white.

Do logos and disabled controls need to pass?

No. WCAG exempts purely decorative content, logos and brand names, and inactive (disabled) components. Meaningful icons, form field borders and focus indicators are covered by the 3:1 requirement.

How does the suggested shade work?

It keeps the hue and saturation of your text colour and moves its lightness, darker or lighter, in small steps until the chosen ratio is met, then offers the closest one to your original. It is a starting point; check it against your brand and background.

Related tools

All free tools

Need something built?

Need help with your cloud or software?

These tools are free to use. If you need cloud and DevOps, web or mobile development, CRM integrations or managed IT support, tell us what you are working on.

Get a quote +353 (89) 962 3525 info@cloudwiss.ie