ToolBirch

Contrast Checker

Check a colour pair against WCAG AA and AAA contrast thresholds.Design & Color

Contrast checker

Check a foreground/background pair against WCAG 2.1 AA and AAA contrast thresholds.

Aa — Sample text

The quick brown fox jumps over the lazy dog.

Contrast ratio
17.16:1
Grade
AAA
Normal text AAA
Pass
Normal AA (4.5): PassNormal AAA (7): PassLarge AA (3): PassLarge AAA (4.5): Pass

About this tool

A palette can look good and still fail accessibility. Enter a foreground and background colour to get the WCAG contrast ratio and a clear pass/fail breakdown for normal text, large text and UI components.

How to use the Contrast Checker tool

  1. Pick two colours. Use the colour inputs or type HEX values for the text and background.
  2. Read the ratio. The contrast ratio is shown to two decimals alongside the four WCAG thresholds.
  3. Preview it. A live sample shows real text at normal and large sizes on your chosen background.

Supported formats

Input

  • Foreground HEX colour
  • Background HEX colour

Output

  • Contrast ratio
  • WCAG AA and AAA results for normal and large text
  • Live preview

Inputs are validated before anything is processed. Invalid values and unsupported files are rejected with a clear error instead of failing silently.

Frequently asked questions

Which thresholds are used?

WCAG 2.1: 4.5:1 for normal text and 3:1 for large text at AA; 7:1 and 4.5:1 at AAA. Non-text UI components use 3:1.

What counts as large text?

At least 18pt (24px) regular, or 14pt (18.66px) bold.

Does alpha affect the result?

Alpha is not modelled. Blend semi-transparent colours into an opaque value before checking them.

Is the ratio rounded?

It is displayed to two decimals, but pass/fail is decided from the unrounded value.

Privacy

Everything you enter stays in this browser tab. There is no upload endpoint for tool inputs, no account, and no server-side copy of your text or files. Results are produced locally and disappear when you close the page.

No account is required and no file is ever uploaded. See the privacy policy for details about analytics and the limited data this site stores.

Known limitations

  • Semi-transparent colours are not composited; alpha must be resolved beforehand.
  • Only WCAG 2.x relative luminance contrast is calculated, not APCA.
  • The result describes the colour pair only, not font weight, size or rendering conditions.

Related tools

Other free tools from the same collection.

Color ConverterConvert colours between HEX, RGB and HSL with a live preview.Date Difference CalculatorFind the days, weeks and weekdays between two dates.Case ConverterConvert text between upper, lower, title, camel, snake and kebab case.Word CounterCount words, characters, sentences, paragraphs and reading time.