Skip to content
TabBench

Color Contrast Checker

Check text and background colours against WCAG 2.2 AA and AAA, get the nearest colours that pass, and preview them for colour blindness.

Runs in your browser. Nothing you add is uploaded.

What the Color Contrast Checker does

Text that is too close in colour to its background is hard to read for everyone and impossible for many people with low vision or colour blindness. This checker calculates the WCAG 2.2 contrast ratio between any two CSS colours — including transparent ones, which are checked as they actually appear — and shows whether the pair passes AA and AAA for normal text, large text and interface components. If it fails, it suggests the nearest text or background colour that passes while keeping the same hue. Ratios are cut rather than rounded, so a pair at 4.49:1 never looks like a pass. Previews show the pair for the main kinds of colour blindness.

How to check colour contrast

  1. Enter the text colour and the background colour in any CSS format, or pick them.
  2. Read the contrast ratio, from 1:1 (identical colours) to 21:1 (black on white), and the pass or fail for each WCAG check.
  3. If it fails, choose AA or AAA under Fix it and use the suggested text or background colour.
  4. Look at the preview with real text and a button outline, then at the colour-vision previews.

The Color Contrast Checker runs entirely in your browser — nothing you enter is uploaded, stored, or logged.

When to use it

Checking brand colours before launch

A light brand green on white often scores around 2.5:1 — fine for decoration but failing for body text. Finding this early lets you pick a darker shade for text and keep the bright one for backgrounds and icons.

Meeting accessibility requirements

Public-sector and many corporate sites must meet WCAG AA. Checking every text and background pair in your design system before build is much cheaper than fixing it after an audit.

Buttons and form states

Placeholder text, disabled buttons and error messages are the usual failures. Checking them — and checking that errors are not shown by colour alone — makes forms usable for more people.

Good to know

  • AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or about 19 px bold). AAA needs 7:1 and 4.5:1.
  • Icons, input borders and focus rings are non-text elements and need at least 3:1 against what is next to them.
  • Never rely on colour alone for meaning: add an icon or text to red error and green success states.
  • Pure black on pure white is the maximum 21:1, but very dark grey on white (around 15:1) is often more comfortable for long reading.

Frequently asked questions

What is the minimum WCAG AA contrast ratio?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and at least 3.0:1 for large text (18pt / 24px or 14pt / 18.66px bold) and UI components.

How is the contrast ratio calculated?

Each colour's relative luminance is computed from its RGB values, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). The result runs from 1:1 to 21:1 and does not depend on which colour is the text.

What counts as large text in WCAG?

At least 18 points (24 CSS pixels) regular, or 14 points (about 18.7 CSS pixels) bold. Large text only needs 3:1 for AA because bigger letters are easier to read.

Does WCAG 3 change these rules?

WCAG 3 is still a draft and proposes a different contrast method (APCA). WCAG 2.1 and 2.2 AA remain the standard that laws and procurement rules refer to, so check against them.

Related tools