webtoolshelper
Website Tools

WCAG Contrast Checker

Check whether text is readable against its background. Enter two colours in any CSS format – hex, rgb(), hsl() or a name – and see the contrast ratio with pass or fail for normal text and large text at levels AA and AAA, and for user-interface components and graphics. A live sample shows the colours, transparent text is blended over the background, and when a pair fails the checker suggests the nearest text or background colour of the same hue that passes. Check a whole palette at once in the matrix.

  • Runs in your browser
  • No sign-up
  • Free to use

Hex, rgb(), hsl() or colour names. A transparent text colour (alpha below 1) is blended over the background.

Normal text (16 px) – the quick brown fox jumps over the lazy dog.

Large text (24 px)

Bold text (18.66 px)

Button border and icon

Check a whole palette

How to use WCAG Contrast Checker

  1. Enter the text and background colours.
  2. Read the ratio and the five results.
  3. Apply a suggested fix if needed.
  4. Paste your palette to check every pair.

WCAG Contrast Checker features

WCAG 2.2

AA, AAA and non-text contrast.

Any CSS colour

Hex, rgb, hsl, names, alpha.

Nearest fix

Same hue, minimum change.

Live sample

Text sizes and a UI element.

Palette matrix

Every pair at once.

Private

Runs in your browser; nothing is uploaded.

When to use WCAG Contrast Checker

  • Choosing accessible brand colours.
  • Checking buttons and links.
  • Accessibility audits.
  • Design system palettes.

WCAG Contrast Checker FAQ

What ratio do I need?

AA: 4.5:1 for normal text, 3:1 for large text and UI components. AAA: 7:1 for normal and 4.5:1 for large text.

What counts as large text?

At least 24 CSS pixels, or 18.66 pixels when bold.

Why is 4.49 a fail?

WCAG thresholds are exact; the ratio is rounded down so a value just below the limit never passes.

What about APCA?

APCA is a proposed method for a future WCAG version. Current requirements use the WCAG 2 ratio shown here.

Does placeholder text need to meet contrast requirements?

Yes, if it carries information users need. Many placeholders are too light; use a visible label instead and keep the placeholder as a hint.

HTML Accessibility Checker Find the accessibility barriers that can be detected in a page’s code. The checker… Color Picker Choose a colour, type a code or sample one from an image, and get every format you… Color Palette Generator Create a harmonious colour scheme from a base colour, or pull a palette out of a… Image Alt Text Checker Alt text describes an image for people who cannot see it and for search engines… Website Mobile Friendly Checker Google retired its Mobile-Friendly Test in December 2023, but mobile-friendliness…

Readable colour combinations

The ratio compares the relative luminance of the two colours, from 1:1 (identical) to 21:1 (black on white). Luminance weights green most and blue least, which is why yellow on white fails while blue on white often passes.

Contrast is one of the most common accessibility failures, and one of the easiest to fix early in design.

WCAG sets minimum contrast ratios between text and its background: 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. User-interface components and meaningful graphics need at least 3:1 against their surroundings.

Large text means at least 24 px, or about 18.7 px when bold. Transparent text colours are blended with the background before the ratio is calculated, because that is what readers actually see. The live sample shows the pair so you can judge readability yourself.

If a pair fails, darken the text or lighten the background in small steps until it passes; brand colours can usually be kept for large headings and buttons while body text uses a darker shade.

Other useful tools