Color Contrast Checker

Runs in your browserDeveloper Tools#Accessibility#Design

Check text and background contrast against WCAG 2.2 AA and AAA, or test a whole palette as a matrix.

Text colour

Background colour

Large text: 24 px regular

Large text: 18.66 px bold

Normal text at 16 px. The quick brown fox jumps over the lazy dog. ₹1,250

Button outline

See-through colours are blended: the text over the background, and the background over white.

Contrast ratio4.83:1Best level for normal text: AA

WCAG 2.2 contrast checks
Use	Level	Needs	Result
Normal text	AA	4.5:1	Pass
Normal text	AAA	7:1	Fail
Large text	AA	3:1	Pass
Large text	AAA	4.5:1	Pass
Icons, borders, form controls	AA	3:1	Pass

Large text is at least 24 px, or 18.66 px bold. Ratios are not rounded: 4.499:1 fails 4.5:1.

Closest colours that pass

Text for AAA#5459647.02:1
Background for AAANo lighter or darker shade reaches AAA; change the other colour.

How to use, limits & privacy

About Color Contrast Checker

Check whether text is readable on its background under WCAG 2.2. Enter a text colour and a background colour to see the exact contrast ratio, pass or fail for AA and AAA, normal and large text and interface parts, a live preview and the closest colours that would pass. The Palette tab works as a colour contrast matrix: it checks every pair of up to 8 brand colours at once. It runs in your browser and helps designers, developers and anyone making accessible websites, apps or slides.

How to Use

Enter two colours

Type or paste the text colour and background colour as hex (with or without #), rgb(), hsl() or a CSS name, or click the swatch to pick one. In Chrome and Edge the pipette button picks a colour from your screen.

Read the result

The contrast ratio appears with Pass or Fail for each WCAG level. If a level fails, Closest colours that pass suggests a lighter or darker shade; click Use to apply it.

Check a whole palette

Open the Palette tab, add 2 to 8 colours or paste a list, and read the grid of text and background pairs with their AAA, AA, AA large or Fail labels.

Privacy & Processing

Mode: local
Files Leave Browser: Local tool processing; review details below
Max Input Size: Device memory limits
Account Required: No
Data Stored Locally: Nothing is saved; your colours are cleared when you close the page.
Network Processing: Assets or models may require an initial download

Colours are checked in your browser. Nothing is uploaded.

Rules & Limitations

Uses the WCAG 2.2 contrast formula, which has the same thresholds as WCAG 2.0 and 2.1: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1, and icons, borders and form controls need 3:1.
Large text means at least 24 px, or 18.66 px bold.
Ratios are compared unrounded and shown cut to two decimals, so 4.499:1 shows as 4.49:1 and fails AA.
See-through colours are blended: the text over the background, and a see-through background over white.
It checks colour contrast only; it does not test images, gradients or text over photos.

Top Suggestions

Checking that body text and button labels meet WCAG AA before a website launch
Finding the nearest accessible shade of a brand colour
Testing a whole brand palette to see which colours can be used together as text and background
Meeting accessibility requirements such as GIGW or government website guidelines

Color Contrast Checker FAQ

What contrast ratio do I need to pass WCAG AA?

Normal text needs at least 4.5:1 against its background, and large text (24 px, or 18.66 px bold) needs 3:1. Icons, input borders and other interface parts also need 3:1. For AAA, normal text needs 7:1 and large text 4.5:1.

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 do I fix a colour that fails?

Look at Closest colours that pass under the result. It keeps the hue and saturation and makes the text or background lighter or darker just enough to reach AA or AAA. Click Use to try it.

What is a colour contrast matrix?

It is a grid that tests every colour in a palette as text on every other colour as background. The Palette tab builds one for up to 8 colours and marks each pair AAA, AA, AA large or Fail, so you can see which combinations are safe.

Is anything uploaded or saved?

No. The colours are checked in your browser and nothing is sent to a server or saved. The pipette only reads the one pixel you click.

What is the difference between WCAG 2.1 and 2.2 for contrast?

Nothing changes for contrast: WCAG 2.2 keeps the same 4.5:1, 3:1 and 7:1 requirements as 2.1. It added other rules, for example about focus visibility and target size.